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