1/* =========================================================== 2 * jquery-immersive-slider.js v1 3 * =========================================================== 4 * Copyright 2013 Pete Rojwongsuriya. 5 * http://www.thepetedesign.com 6 * 7 * Create an immersive slider that changes the 8 * the whole container to match the viewing slide 9 * 10 * https://github.com/peachananr/immersive-slider 11 * 12 * ========================================================== */ 13 14!function($){ 15 16 var defaults = { 17 animation: "bounce", 18 slideSelector: ".slide", 19 container: ".main", 20 cssBlur: false, 21 pagination: true, 22 loop: true, 23 autoStart: 4000 24 }; 25 26 /*------------------------------------------------*/ 27 /* Credit: Eike Send for the awesome swipe event */ 28 /*------------------------------------------------*/ 29 30 $.fn.swipeEvents = function() { 31 return this.each(function() { 32 33 var startX, 34 startY, 35 $this = $(this); 36 37 $this.bind('touchstart', touchstart); 38 39 function touchstart(event) { 40 var touches = event.originalEvent.touches; 41 if (touches && touches.length) { 42 startX = touches[0].pageX; 43 startY = touches[0].pageY; 44 $this.bind('touchmove', touchmove); 45 } 46 event.preventDefault(); 47 } 48 49 function touchmove(event) { 50 var touches = event.originalEvent.touches; 51 if (touches && touches.length) { 52 var deltaX = startX - touches[0].pageX; 53 var deltaY = startY - touches[0].pageY; 54 55 if (deltaX >= 50) { 56 $this.trigger("swipeLeft"); 57 } 58 if (deltaX <= -50) { 59 $this.trigger("swipeRight"); 60 } 61 if (deltaY >= 50) { 62 $this.trigger("swipeUp"); 63 } 64 if (deltaY <= -50) { 65 $this.trigger("swipeDown"); 66 } 67 if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { 68 $this.unbind('touchmove', touchmove); 69 } 70 } 71 event.preventDefault(); 72 } 73 74 }); 75 }; 76 77 $.fn.transformSlider = function(settings, pos) { 78 var el = $(this) 79 switch(settings.animation) { 80 case 'slide': 81 el.addClass("ease").css({ 82 "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 83 "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 84 "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 85 "transform": "translate3d(" + pos + "%, 0, 0)" 86 }); 87 break; 88 case 'slideUp': 89 el.addClass("ease").css({ 90 "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 91 "-moz-transform": "translate3d(0, " + pos + "%, 0)", 92 "-ms-transform": "translate3d(0, " + pos + "%, 0)", 93 "transform": "translate3d(0, " + pos + "%, 0)" 94 }); 95 break; 96 case 'bounce': 97 el.addClass("bounce").css({ 98 "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 99 "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 100 "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 101 "transform": "translate3d(" + pos + "%, 0, 0)" 102 }); 103 break; 104 case 'bounceUp': 105 el.addClass("bounce").css({ 106 "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 107 "-moz-transform": "translate3d(0, " + pos + "%, 0)", 108 "-ms-transform": "translate3d(0, " + pos + "%, 0)", 109 "transform": "translate3d(0, " + pos + "%, 0)" 110 }); 111 break; 112 case 'fade': 113 el.addClass("no-animation").fadeOut("slow", function() { 114 el.css({ 115 "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 116 "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 117 "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 118 "transform": "translate3d(" + pos + "%, 0, 0)" 119 }).fadeIn("slow"); 120 }); 121 122 break; 123 } 124 } 125 126 $.fn.positionSlides = function(settings, index) { 127 var el = $(this); 128 if (settings.animation == "slideUp" || settings.animation == "bounceUp") { 129 el.css({ 130 top: (index * 100) + "%" 131 }); 132 }else { 133 el.css({ 134 left: (index * 100) + "%" 135 }); 136 } 137 } 138 139
140 141 $.fn.immersive_slider = function(options){ 142 var settings = $.extend({}, defaults, options), 143 el = $(this), 144 cssblur = "", 145 pagination = ""; 146 147 // Add all the gs sepecific classes 148 el.addClass("immersive_slider") 149 el.find(settings.slideSelector).addClass("is-slide"); 150 151 // Use CSS to blur the first image the plugin found automatically 152 if (settings.cssBlur == true) { 153 el.find(".is-slide img:first-child").each(function( index ) { 154 var activeclass = "" 155 if(index == 0) activeclass = "active" 156 var img = $(this); 157 158 $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background gs_cssblur " + activeclass + "'>" + img.clone().wrap("<div />").parent().html() + "</div>") 159 $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index) 160 }); 161 } else { 162 el.find(".is-slide").each(function( index ) { 163 var activeclass = "" 164 if(index == 0) activeclass = "active" 165 var img = "<img src='"+ $(this).data("blurred") +"'>"; 166 167 $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background " + activeclass + "'>" + img + "</div>") 168 $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index) 169 }); 170 } 171 172 if(settings.autoStart != 0 || settings.autoStart != false) { 173 setInterval(function() { 174 el.moveNext(); 175 }, settings.autoStart); 176 } 177 178 $(settings.container).find(".is-background").wrapAll( "<div class='is-bg-overflow' />"); 179 el.find(".is-slide").wrapAll( "<div class='is-overflow' />"); 180 el.find(".is-slide").each(function( index ) { 181 var activeclass = "" 182 if(index == 0) activeclass = "active" 183 $(this).attr("id","slide_" + (index + 1)).addClass(activeclass) 184 $(this).positionSlides(settings, index) 185 if(settings.pagination == true) { 186 pagination += "<li><a class='is-page " + activeclass + "' href='#slide_" + (index + 1) + "'></a></li>" 187 } 188 }); 189 190 $("<ul class='is-pagination'>"+pagination+"</ul>").appendTo(el) 191 192 if(settings.pagination == true) { 193 $(".is-pagination li a").click(function (){ 194 var page_index = $(this).attr("href"); 195 196 if (!$(this).hasClass("active")) { 197 el.moveSlider(settings, page_index) 198 } 199 return false 200 }); 201 } 202 $(".is-next").click(function() { 203 el.moveNext(); 204 return false; 205 }); 206 $(".is-prev").click(function() { 207 el.movePrev(); 208 return false; 209 }); 210 211 $.fn.moveSlider = function(settings, page_index) { 212 var el = $(this), 213 current = el.find(".is-slide.active"), 214 next = el.find(".is-slide" + page_index), 215 bg_current = $(settings.container).find(".is-background.active"), 216 bg_next = $(settings.container).find(".is-background" + page_index + "_bg"); 217 if(next) { 218 current.removeClass("active") 219 next.addClass("active") 220 221 bg_current.removeClass("active") 222 bg_next.addClass("active") 223 $(".is-pagination li a" + ".active").removeClass("active"); 224 $(".is-pagination li a" + "[href='" + (page_index) + "']").addClass("active"); 225 } 226 pos = ((page_index.replace('#slide_','') - 1) * 100) * -1; 227 el.find(".is-overflow").transformSlider(settings, pos); 228 $(settings.container).find(".is-bg-overflow").transformSlider(settings, pos); 229 } 230 231 $.fn.moveNext = function() { 232 var el = $(this), 233 total = el.find(settings.slideSelector).length + 1, 234 page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) + 1; 235 if(page_index_number < total) { 236 el.moveSlider(settings, "#slide_" + page_index_number) 237 } else { 238 if (settings.loop == true ) el.moveSlider(settings, "#slide_1") 239 } 240 } 241 242 $.fn.movePrev = function() { 243 var el = $(this), 244 total = el.find(settings.slideSelector).length + 1, 245 page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) - 1; 246 if(page_index_number <= total && page_index_number > 0) { 247 el.moveSlider(settings, "#slide_" + page_index_number) 248 }else { 249 if (settings.loop == true ) el.moveSlider(settings, "#slide_" + (total - 1 )) 250 } 251 } 252 253 el.swipeEvents().bind("swipeRight", function(){ 254 el.movePrev(); 255 }).bind("swipeLeft", function(){ 256 el.moveNext(); 257 }); 258 259 } 260 261}(window.jQuery); 262 263
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.