1/* 2 This file is part of JonDesign's SmoothGallery v1.0.1. 3 4 JonDesign's SmoothGallery is free software; you can redistribute it and/or modify 5 it under the terms of the GNU General Public License as published by 6 the Free Software Foundation; either version 2 of the License, or 7 (at your option) any later version. 8 9 JonDesign's SmoothGallery is distributed in the hope that it will be useful, 10 but WITHOUT ANY WARRANTY; without even the implied warranty of 11 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 GNU General Public License for more details. 13 14 You should have received a copy of the GNU General Public License 15 along with JonDesign's SmoothGallery; if not, write to the Free Software 16 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA 17 18 Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/) 19 Contributed code by: 20 - Christian Ehret (bugfix) 21 - Nitrix (bugfix) 22 - Valerio from Mad4Milk for his great help with the carousel scrolling and many other things. 23 - Archie Cowan for helping me find a bugfix on carousel inner width problem. 24 Many thanks to: 25 - The mootools team for the great mootools lib, and it's help and support throughout the project. 26*/ 27 28 29var $removeEvents = function (object, type) 30{ 31 if (!object.events) return object; 32 if (type){ 33 if (!object.events[type]) return object; 34 for (var fn in object.events[type]) object.removeEvent(type, fn); 35 object.events[type] = null; 36 } else { 37 for (var evType in object.events) object.removeEvents(evType); 38 object.events = null; 39 } 40 return object; 41}; 42 43 44// declaring the class 45var gallery = new Class({ 46 initialize: function(element, options) { 47 this.setOptions({ 48 showArrows: true, 49 showCarousel: true, 50 showInfopane: true, 51 thumbHeight: 75, 52 thumbWidth: 100, 53 thumbSpacing: 10, 54 embedLinks: true, 55 fadeDuration: 500, 56 timed: false, 57 delay: 9000, 58 preloader: true, 59 manualData: [], 60 populateData: true, 61 elementSelector: "div.imageElement", 62 titleSelector: "h3", 63 subtitleSelector: "p", 64 linkSelector: "a.open", 65 imageSelector: "img.full", 66 thumbnailSelector: "img.thumbnail", 67 slideInfoZoneOpacity: 0.7, 68 carouselMinimizedOpacity: 0.4, 69 carouselMinimizedHeight: 20, 70 carouselMaximizedOpacity: 0.7, 71 destroyAfterPopulate: true, 72 baseClass: 'jdGallery', 73 withArrowsClass: 'withArrows', 74 textShowCarousel: 'Pictures', 75 useThumbGenerator: false, 76 thumbGenerator: 'resizer.php' 77 }, options); 78 this.fireEvent('onInit'); 79 this.currentIter = 0; 80 this.lastIter = 0; 81 this.maxIter = 0; 82 this.galleryElement = element; 83 this.galleryData = this.options.manualData; 84 this.galleryInit = 1; 85 this.galleryElements = Array(); 86 this.thumbnailElements = Array(); 87 this.galleryElement.addClass(this.options.baseClass); 88 if (this.options.populateData) 89 this.populateData(); 90 element.style.display="block"; 91 92 if (this.options.embedLinks) 93 { 94 this.currentLink = new Element('a').addClass('open').setProperties({ 95 href: '#', 96 title: '' 97 }).injectInside(element); 98 if ((!this.options.showArrows) && (!this.options.showCarousel)) 99 this.galleryElement = element = this.currentLink; 100 else 101 this.currentLink.setStyle('display', 'none'); 102 } 103 104 this.constructElements(); 105 if ((data.length>1)&&(this.options.showArrows)) 106 { 107 var leftArrow = new Element('a').addClass('left').addEvent( 108 'click', 109 this.prevItem.bind(this) 110 ).injectInside(element); 111 var rightArrow = new Element('a').addClass('right').addEvent( 112 'click', 113 this.nextItem.bind(this) 114 ).injectInside(element); 115 this.galleryElement.addClass(this.options.withArrowsClass); 116 } 117 this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element); 118 if (this.options.showInfopane) this.initInfoSlideshow(); 119 if (this.options.showCarousel) this.initCarousel(); 120 this.doSlideShow(1); 121 }, 122 populateData: function() { 123 currentArrayPlace = this.galleryData.length; 124 options = this.options; 125 data = this.galleryData; 126 this.galleryElement.getElements(options.elementSelector).each(function(el) { 127 elementDict = { 128 image: el.getElement(options.imageSelector).getProperty('src'), 129 number: currentArrayPlace 130 }; 131 if ((options.showInfopane) | (options.showCarousel)) 132 Object.extend(elementDict, { 133 title: el.getElement(options.titleSelector).innerHTML, 134 description: el.getElement(options.subtitleSelector).innerHTML 135 }); 136 if (options.embedLinks) 137 Object.extend(elementDict, { 138 link: el.getElement(options.linkSelector).href||false, 139 linkTitle: el.getElement(options.linkSelector).title||false 140 });
141 if ((!options.useThumbGenerator) && (options.showCarousel)) 142 Object.extend(elementDict, { 143 thumbnail: el.getElement(options.thumbnailSelector).src 144 }); 145 else if (options.useThumbGenerator) 146 Object.extend(elementDict, { 147 thumbnail: 'resizer.php?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight 148 }); 149 150 data[currentArrayPlace] = elementDict; 151 currentArrayPlace++; 152 if (this.options.destroyAfterPopulate) 153 el.remove(); 154 }); 155 this.galleryData = data; 156 this.fireEvent('onPopulated'); 157 }, 158 constructElements: function() { 159 el = this.galleryElement; 160 el.innerHTML += "<img src='assets/snippets/maxigallery/smoothgallery/js/banner.jpg' style='visibility:hidden' alt='hidden'/>"; 161 this.maxIter = this.galleryData.length; 162 var currentImg; 163 for(i=0;i<this.galleryData.length;i++) 164 { 165 var currentImg = new Fx.Style( 166 new Element('div').addClass('slideElement').setStyles({ 167 'position':'absolute', 168 'left':'0px', 169 'right':'0px', 170 'margin':'0px', 171 'padding':'0px', 172 'backgroundImage':"url('" + this.galleryData[i].image + "')", 173 'backgroundPosition':"center center", 174 'opacity':'0' 175 }).setHTML("<img src='assets/snippets/maxigallery/smoothgallery/js/banner.jpg' style='visibility:hidden' alt='hidden'/>").injectInside(el), 176 'opacity', 177 {duration: this.options.fadeDuration} 178 ); 179 this.galleryElements[parseInt(i)] = currentImg; 180 } 181 }, 182 destroySlideShow: function(element) { 183 var myClassName = element.className; 184 var newElement = new Element('div').addClass('myClassName'); 185 element.parentNode.replaceChild(newElement, element); 186 }, 187 startSlideShow: function() { 188 this.fireEvent('onStart'); 189 this.loadingElement.style.display = "none"; 190 this.lastIter = this.maxIter - 1; 191 this.currentIter = 0; 192 this.galleryInit = 0; 193 this.galleryElements[parseInt(this.currentIter)].set(1); 194 if (this.options.showInfopane) 195 this.showInfoSlideShow.delay(1000, this); 196 this.prepareTimer(); 197 if (this.options.embedLinks) 198 this.makeLink(this.currentIter); 199 }, 200 nextItem: function() { 201 this.fireEvent('onNextCalled'); 202 this.nextIter = this.currentIter+1; 203 if (this.nextIter >= this.maxIter) 204 this.nextIter = 0; 205 this.galleryInit = 0; 206 this.goTo(this.nextIter); 207 }, 208 prevItem: function() { 209 this.fireEvent('onPreviousCalled'); 210 this.nextIter = this.currentIter-1; 211 if (this.nextIter <= -1) 212 this.nextIter = this.maxIter - 1; 213 this.galleryInit = 0; 214 this.goTo(this.nextIter); 215 }, 216 goTo: function(num) { 217 this.clearTimer(); 218 if (this.options.embedLinks) 219 this.clearLink(); 220 if (this.options.showInfopane) 221 { 222 this.slideInfoZone.clearChain(); 223 this.hideInfoSlideShow().chain(this.changeItem.pass(num, this)); 224 } else 225 this.changeItem.delay(500, this, num); 226 if (this.options.embedLinks) 227 this.makeLink(num); 228 this.prepareTimer(); 229 /*if (this.options.showCarousel) 230 this.clearThumbnailsHighlights();*/ 231 }, 232 changeItem: function(num) { 233 this.fireEvent('onStartChanging'); 234 this.galleryInit = 0; 235 if (this.currentIter != num) 236 { 237 for(i=0;i<this.maxIter;i++) 238 { 239 if ((i != this.currentIter)) this.galleryElements[i].set(0); 240 } 241 if (num > this.currentIter) this.galleryElements[num].custom(1); 242 else 243 { 244 this.galleryElements[num].set(1); 245 this.galleryElements[this.currentIter].custom(0); 246 } 247 this.currentIter = num; 248 } 249 this.doSlideShow.bind(this)(); 250 this.fireEvent('onChanged'); 251 }, 252 clearTimer: function() { 253 if (this.options.timed) 254 $clear(this.timer); 255 }, 256 prepareTimer: function() { 257 if (this.options.timed) 258 this.timer = this.nextItem.delay(this.options.delay, this); 259 }, 260 doSlideShow: function(position) { 261 if (this.galleryInit == 1) 262 { 263 imgPreloader = new Image(); 264 imgPreloader.onload=function(){ 265 this.startSlideShow.delay(10, this); 266 }.bind(this); 267 imgPreloader.src = this.galleryData[0].image; 268 } else { 269 if (this.options.showInfopane) 270 { 271 if (this.options.showInfopane) 272 { 273 this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this); 274 } else 275 if (this.options.showCarousel) 276 this.centerCarouselOn(position); 277 } 278 } 279 }, 280 initCarousel: function () { 281 var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement); 282 this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut}); 283 this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight; 284 this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)}); 285 286 this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({ 287 title: this.options.textShowCarousel 288 }).setHTML(this.options.textShowCarousel).injectInside(carouselContainerElement); 289 290 this.carouselBtn.addEvent( 291 'click', 292 function () { 293 this.carouselContainer.clearTimer(); 294 this.toggleCarousel(); 295 }.bind(this) 296 ); 297 this.carouselActive = false;
298 299 var carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement); 300 this.carousel = new Fx.Styles(carouselElement); 301 302 this.carouselLabel = new Element('p').addClass('label').injectInside(this.carousel.element); 303 this.carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(this.carousel.element); 304 this.carouselInner = new Element('div').addClass('carouselInner').injectInside(this.carouselWrapper); 305 306 this.carouselWrapper.scroller = new Scroller(this.carouselWrapper, { 307 area: 100, 308 velocity: 0.2 309 }) 310 311 this.carouselWrapper.elementScroller = new Fx.Scroll(this.carouselWrapper, { 312 duration: 400, 313 onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller), 314 onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller) 315 }); 316 317 this.constructThumbnails(); 318 319 this.carouselInner.style.width = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing)) - this.options.thumbSpacing + this.options.thumbWidth) + "px"; 320 }, 321 toggleCarousel: function() { 322 if (this.carouselActive) 323 this.hideCarousel(); 324 else 325 this.showCarousel(); 326 }, 327 showCarousel: function () { 328 this.fireEvent('onShowCarousel'); 329 this.carouselContainer.custom({ 330 'opacity': this.options.carouselMaximizedOpacity, 331 'top': 0 332 }).addEvent('onComplete', function() { this.carouselActive = true; this.carouselWrapper.scroller.start(); }.bind(this)); 333 }, 334 hideCarousel: function () { 335 this.fireEvent('onHideCarousel'); 336 this.carouselContainer.custom({ 337 'opacity': this.options.carouselMinimizedOpacity, 338 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight) 339 }).addEvent('onComplete', function() { this.carouselActive = false; this.carouselWrapper.scroller.stop(); }.bind(this)); 340 }, 341 constructThumbnails: function () { 342 element = this.carouselInner; 343 for(i=0;i<this.galleryData.length;i++) 344 { 345 var currentImg = new Fx.Style(new Element ('div').addClass("thumbnail").setStyles({ 346 backgroundImage: "url('" + this.galleryData[i].thumbnail + "')", 347 backgroundPosition: "center center", 348 backgroundRepeat: 'no-repeat', 349 marginLeft: this.options.thumbSpacing + "px", 350 width: this.options.thumbWidth + "px", 351 height: this.options.thumbHeight + "px" 352 }).injectInside(element), "opacity", {duration: 200}).set(0.2); 353 currentImg.element.addEvents({ 354 'mouseover': function (myself) { 355 myself.clearTimer(); 356 myself.custom(0.99); 357 $(this.carouselLabel).setHTML('<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title); 358 }.pass(currentImg, this), 359 'mouseout': function (myself) { 360 myself.clearTimer(); 361 myself.custom(0.2); 362 }.pass(currentImg, this), 363 'click': function (myself) { 364 this.goTo(myself.relatedImage.number); 365 }.pass(currentImg, this) 366 }); 367 368 currentImg.relatedImage = this.galleryData[i]; 369 this.thumbnailElements[parseInt(i)] = currentImg; 370 } 371 }, 372 clearThumbnailsHighlights: function() 373 { 374 for(i=0;i<this.galleryData.length;i++) 375 { 376 this.thumbnailElements[i].clearTimer(); 377 this.thumbnailElements[i].custom(0.2); 378 } 379 }, 380 centerCarouselOn: function(num) { 381 var carouselElement = this.thumbnailElements[num]; 382 var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2); 383 var carouselWidth = this.carouselWrapper.offsetWidth; 384 var carouselInnerWidth = this.carouselInner.offsetWidth; 385 var diffWidth = carouselWidth / 2; 386 var scrollPos = position-diffWidth; 387 this.carouselWrapper.elementScroller.scrollTo(scrollPos,0); 388 }, 389 initInfoSlideshow: function() { 390 /*if (this.slideInfoZone.element) 391 this.slideInfoZone.element.remove();*/ 392 this.slideInfoZone = new Fx.Styles(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0}); 393 var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element); 394 var slideInfoZoneDescription = new Element('h3').injectInside(this.slideInfoZone.element); 395 this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight; 396 this.slideInfoZone.element.setStyle('opacity',0); 397 }, 398 changeInfoSlideShow: function() 399 { 400 this.hideInfoSlideShow.delay(10, this); 401 this.showInfoSlideShow.delay(500, this); 402 }, 403 showInfoSlideShow: function() { 404 this.fireEvent('onShowInfopane'); 405 this.slideInfoZone.clearTimer(); 406 element = this.slideInfoZone.element; 407 element.getElement('h2').setHTML(this.galleryData[this.currentIter].title); 408 element.getElement('h3').setHTML(this.galleryData[this.currentIter].description); 409 this.slideInfoZone.custom({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]}); 410 if (this.options.showCarousel) 411 this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this)); 412 return this.slideInfoZone; 413 }, 414 hideInfoSlideShow: function() { 415 this.fireEvent('onHideInfopane'); 416 this.slideInfoZone.clearTimer(); 417 this.slideInfoZone.custom({'opacity': 0, 'height': 0}); 418 return this.slideInfoZone; 419 }, 420 makeLink: function(num) { 421 this.currentLink.setProperties({ 422 href: this.galleryData[num].link,
423 title: this.galleryData[num].linkTitle 424 }) 425 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel))) 426 this.currentLink.setStyle('display', 'block'); 427 }, 428 clearLink: function() { 429 this.currentLink.setProperties({href: '', title: ''}); 430 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel))) 431 this.currentLink.setStyle('display', 'none'); 432 } 433}); 434gallery.implement(new Events); 435gallery.implement(new Options); 436 437/* All code copyright 2006 Jonathan Schemoul */
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.