1/* 2 * Project: S Gallery 3 * Description: Responsive jQuery Gallery Plugin with CSS3 Animations inspired by http://store.sony.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10551&storeId=10151&langId=-1&productId=8198552921666556433#gallery 4 * Author: Sara Soueidan 5 * License: Creative-Commons Attribution Non-Commercial 6 7 Customized: added number of image, for added captions in the HTML, these are hidden while image resizes 8 */ 9 10;(function ( $, window, document, undefined ) { 11 12 var pluginName = "sGallery", 13 defaults = { 14 fullScreenEnabled: false 15 }; 16 17 function Plugin( element, options ) { 18 this.element = element; 19 this.galleryContainer = $(this.element); 20 this.bigItemsList = this.galleryContainer.children('ul:eq(1)'); 21 this.bigItem = this.bigItemsList.children('li'); 22 this.options = $.extend( {}, defaults, options ); 23 this._defaults = defaults; 24 this._name = pluginName; 25 this.current = ""; 26 this.slideshow = false; 27 this.count = this.bigItem.length; 28 this.initialHeight = 'auto'; 29 this.isFullScreen = false; 30 this.$controls = $('.controls'); 31 this.$control = $('.control'); 32 this.$grid = $('.grid'); 33 this.$fsButton = $('.fs-toggle'); 34 this.$document = $(document); 35 this.$window = $(window); 36 this.init(); 37 } 38 39 Plugin.prototype = { 40 41 init: function() { 42 var that = this, 43 smallItems = this.galleryContainer.find('ul:eq(0)'), 44 smallItem = smallItems.children('li'), 45 options = this.options; 46 47 48 this.setDelays(smallItems); 49 this.bindListHandler(smallItems); 50 this.handleQuit(); 51 this.controlSlideShow(this.count); 52 if(options.fullScreenEnabled){ 53 this.controlFullScreen(); 54 } 55 this.changeHeight(); 56 this.handleTouch(); 57 }, 58 59 handleTouch: function(){ 60 var that = this; 61 //prevent image from being dragged without affecting its pointer events huhu! 62 this.bigItem.on('dragstart', function(event) { event.preventDefault(); }); 63 64 var scrollLeftOnSwipe = Hammer(this.element).on("swipeleft", function(event) { 65 if(that.slideshow){ 66 that.controlLeftRight('next'); 67 } 68 }); 69 var scrollRightOnSwipe = Hammer(this.element).on("swiperight", function(event) { 70 if(that.slideshow){ 71 that.controlLeftRight('previous'); 72 } 73 }); 74 75 }, 76 77 changeHeight: function(speed){ 78 var that = this, 79 speed = speed || 0 , 80 currentImg = this.bigItemsList.children('li:eq(' + that.current + ')'); 81 82 this.initialHeight = this.galleryContainer.outerHeight(), 83 this.minHeight = currentImg.height() 84 + parseInt(this.bigItem.css('top')) 85 + this.$controls.height() * 2; 86 this.adaptHeight(speed); 87 88 //update above values and adapt height again on window resize 89 this.$window.load(function(){ 90 91 that.$window.resize(function(){ 92 93 that.initialHeight = that.galleryContainer.outerHeight(); 94 95 that.minHeight = that.bigItem.height() 96 + parseInt(that.bigItem.css('top')) 97 + that.$controls.height() * 2; 98 that.adaptHeight(speed); 99 100 }); 101 that.$window.trigger('resize'); 102 }); 103 104 105 }, 106 107 adaptHeight: function(speed){ 108 109 var that = this, 110 height = this.bigItem.outerHeight(); 111 if(that.slideshow && that.initialHeight < that.minHeight){ 112 $(that.element).animate({'height': that.minHeight + 'px'}, speed); 113 } 114 else if(that.slideshow && that.initialHeight > that.minHeight){ 115 $(this.element).animate({'height': that.minHeight + 'px'}, speed); 116 } 117 }, 118 119 setDelays: function(smallItems){ 120 smallItems.children('li').each(function(index){ 121 $(this).css('animation-delay', 0.075 * index + 's'); 122 }); 123 }, 124 125 bindListHandler: function(smallItems){ 126 var that = this; 127 128 smallItems.on('click', 'li', function(e){ 129 e.preventDefault(); 130 var $this = $(this); 131 that.current = $this.index(); 132 that.fadeAllOut(); 133 that.showControls(); 134 that.slideshow = true; 135 startImg = that.bigItemsList.children('li:eq(' + that.current + ')'); 136 //to show index of img in list 137 var index = that.current + 1; 138 // startImg.find('.img-index').html(index + ' sur ' + that.count); 139 140 $this.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 141 startImg.addClass('fadeInScaleUp').removeClass('fadeOut'); 142 that.bigItemsList.css('pointer-events', 'auto'); 143 that.changeHeight(600); 144 }); 145 }); 146 }, 147 148 fadeAllOut: function(){ 149 this.galleryContainer.children('ul:eq(0)') 150 .children('li') 151 .removeClass('scaleUpFadeIn') 152 .removeClass('showLastSecond') 153 .addClass('scaleDownFadeOut'); 154 }, 155 156 fadeAllIn: function(){ 157 var that = this; 158 var dropZone = this.galleryContainer.children('ul:eq(0)').children('li:eq(' + that.current + ')'); 159 this.galleryContainer.children('ul:eq(0)') 160 .children('li') 161 .not(dropZone) 162 .removeClass('scaleDownFadeOut') 163 .addClass('scaleUpFadeIn'); 164 165 dropZone.removeClass('scaleDownFadeOut').addClass('showLastSecond'); 166 }, 167 168 showControls:function(){ 169 this.$controls.addClass('showControls') 170 .removeClass('hideControls'); 171 }, 172 173 hideControls: function(){ 174 this.$controls.addClass('hideControls') 175 .removeClass('showControls'); 176 }, 177 178 controlSlideShow: function(count){ 179 180 var that = this, key; 181 182 this.$document.on('keydown', function(e){ 183 184 var e = e || window.event; 185 key = e.keyCode; 186 187 if(key == 37 && that.slideshow){ 188 that.current--; 189 if(that.current < 0) { 190 that.current = count - 1; 191 } 192 that.moveToNextImage(); 193 } 194 else if(key == 39 && that.slideshow){ 195 that.current++; 196 if(that.current == count) { 197 that.current = 0; 198 } 199 that.moveToNextImage(); 200 } 201 202 }); 203 204 205 this.$control.on('click', function(){ 206 var direction = $(this).data('direction'); 207 that.controlLeftRight(direction); 208 }); 209 210 211 }, 212
213 controlLeftRight: function(direction){ 214 var direction = direction; 215 216 (direction == 'next') ? this.current++ : this.current--; 217 218 if(this.current < 0) { 219 this.current = this.count - 1; 220 } 221 else if(this.current == this.count) { 222 this.current = 0; 223 } 224 225 this.moveToNextImage(); 226 }, 227 228 moveToNextImage: function(){ 229 var that = this; 230 231 var currentImg = this.bigItemsList.children('li:eq(' + that.current + ')'); 232 //add this to show index of img in list 233 var index = this.current + 1; 234 // currentImg.find('.img-index').html(index + ' sur ' + that.count); 235 currentImg.addClass('fadeInScaleUp') 236 .siblings('li') 237 .filter('.fadeInScaleUp') 238 .removeClass('fadeInScaleUp') 239 .addClass('fadeOut') 240 .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 241 $(this).removeClass('fadeOut'); 242 }); 243 244 245 this.changeHeight(600); 246 }, 247 248 handleQuit: function(){ 249 250 var that = this; 251 252 this.$document.on('keydown', function(e){ 253 var e = e || window.event; 254 key = e.keyCode; 255 256 if(key == 16 && that.slideshow){ 257 that.quitSlideShow(); 258 } 259 }); 260 261 this.$grid.on('click', function(){ 262 that.quitSlideShow(); 263 }); 264 }, 265 266 controlFullScreen: function(){ 267 var that = this, gallery = this.element; 268 269 this.$fsButton.css('display', 'inline-block').on('click', function(){ 270 if (screenfull.enabled) { 271 screenfull.toggle(gallery); 272 if(!that.isFullScreen){ 273 $(this).removeClass('icon-fullscreen').addClass('icon-fullscreen-exit'); 274 that.isFullScreenfull = true; 275 } 276 else{ 277 $(this).removeClass('icon-fullscreen-exit').addClass('icon-fullscreen'); 278 that.isFullScreen=false; 279 } 280 } 281 else { 282 return false; 283 } 284 }); 285 }, 286 287 quitSlideShow: function(test) { 288 289 this.hideControls(); 290 this.fadeAllIn(); 291 this.slideshow = false; 292 293 var that = this; 294 295 if(!this.isFullScreen){ 296 this.galleryContainer.animate({'height' : that.initialHeight}, 0, function(){ 297 $(this).css('height', 'auto'); 298 }); 299 } 300 301 this.bigItemsList.css('pointer-events', 'none'); 302 var currentImg = this.galleryContainer.children('ul:eq(1)').children('li:eq(' + that.current + ')'), 303 dropZone = this.galleryContainer.children('ul:eq(0)').children('li:eq(' + that.current + ')'), 304 height = dropZone.height() - dropZone.find('.item-price').height(), 305 width = dropZone.width(), 306 left = dropZone.position().left, 307 top = dropZone.position().top, 308 delay = parseFloat(dropZone.css('animation-delay')), 309 duration = parseFloat(dropZone.css('animation-duration')), 310 wait = delay + duration; 311 312 //hide image description while it is resizing 313 currentImg.find('.img-caption').css('opacity', '0'); 314 currentImg.children('img').andSelf().animate({ 315 'height' : height, 316 'width' : width , 317 'left' : left + 'px', 318 'top' : top + 'px', 319 }, wait * 1000, function(){ 320 $(this).removeClass('fadeInScaleUp').removeAttr('style'); 321 currentImg.find('.img-caption').css('opacity', '1'); 322 }); 323 } 324 }; 325 326 327 $.fn[pluginName] = function ( options ) { 328 return this.each(function () { 329 if (!$.data(this, "plugin_" + pluginName)) { 330 $.data(this, "plugin_" + pluginName, new Plugin( this, options )); 331 } 332 }); 333 }; 334 335})( jQuery, window, document ); 336
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.