nxhtml/nxhtml/doc/js/smoothgallery/scripts/jd.gallery.js

   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
  29 var $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
  45 var gallery = new Class({
  46         initialize: function(element, options) {
  47                 this.setOptions({
  48                         showArrows: true,
  49                         showCarousel: true,
  50                         showInfopane: true,
  51                         showDescription: false,
  52                         thumbHeight: 75,
  53                         thumbWidth: 100,
  54                         thumbSpacing: 10,
  55                         embedLinks: true,
  56                         fadeDuration: 500,
  57                         timed: false,
  58                         delay: 9000,
  59                         preloader: true,
  60                         manualData: [],
  61                         populateData: true,
  62                         elementSelector: "div.imageElement",
  63                         titleSelector: "h3",
  64                         subtitleSelector: "p",
  65                         descriptionSelector: "div",
  66                         linkSelector: "a.open",
  67                         imageSelector: "img.full",
  68                         thumbnailSelector: "img.thumbnail",
  69                         slideInfoZoneOpacity: 0.7,
  70                         carouselMinimizedOpacity: 0.4,
  71                         carouselMinimizedHeight: 20,
  72                         carouselMaximizedOpacity: 0.7,
  73                         destroyAfterPopulate: true,
  74                         baseClass: 'jdGallery',
  75                         withArrowsClass: 'withArrows',
  76                         textShowCarousel: 'Pictures',
  77                         useThumbGenerator: false,
  78                         thumbGenerator: 'resizer.php'
  79                 }, options);
  80                 this.fireEvent('onInit');
  81                 this.currentIter = 0;
  82                 this.lastIter = 0;
  83                 this.maxIter = 0;
  84                 this.galleryElement = element;
  85                 this.galleryData = this.options.manualData;
  86                 this.galleryInit = 1;
  87                 this.galleryElements = Array();
  88                 this.thumbnailElements = Array();
  89                 this.galleryElement.addClass(this.options.baseClass);
  90                 if (this.options.populateData)
  91                         this.populateData();
  92                 element.style.display="block";
  93
  94                 if (this.options.embedLinks)
  95                 {
  96                         this.currentLink = new Element('a').addClass('open').setProperties({
  97                                 href: '#',
  98                                 title: ''
  99                         }).injectInside(element);
 100                         if ((!this.options.showArrows) && (!this.options.showCarousel))
 101                                 this.galleryElement = element = this.currentLink;
 102                         else
 103                                 this.currentLink.setStyle('display', 'none');
 104                 }
 105
 106                 this.constructElements();
 107                 if ((data.length>1)&&(this.options.showArrows))
 108                 {
 109                         var leftArrow = new Element('a').addClass('left').addEvent(
 110                                 'click',
 111                                 this.prevItem.bind(this)
 112                         ).injectInside(element);
 113                         var rightArrow = new Element('a').addClass('right').addEvent(
 114                                 'click',
 115                                 this.nextItem.bind(this)
 116                         ).injectInside(element);
 117                         this.galleryElement.addClass(this.options.withArrowsClass);
 118                 }
 119                 this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
 120                 if (this.options.showInfopane) this.initInfoSlideshow();
 121                 if (this.options.showCarousel) this.initCarousel();
 122                 this.doSlideShow(1);
 123         },
 124         populateData: function() {
 125                 currentArrayPlace = this.galleryData.length;
 126                 options = this.options;
 127                 data = this.galleryData;
 128                 this.galleryElement.getElements(options.elementSelector).each(function(el) {
 129                         elementDict = {
 130                                 image: el.getElement(options.imageSelector).getProperty('src'),
 131                                 number: currentArrayPlace
 132                         };
 133                         if ((options.showInfopane) | (options.showCarousel))
 134                                 Object.extend(elementDict, {
 135                                         title: el.getElement(options.titleSelector).innerHTML,
 136                                         description: el.getElement(options.subtitleSelector).innerHTML
 137                                 });
 138                         if ((options.showDescription))
 139                                 Object.extend(elementDict, {
 140                                         outsideDescription: el.getElement(options.descriptionSelector).innerHTML
 141                                 });
 142                         if (options.embedLinks)
 143                                 Object.extend(elementDict, {
 144                                         link: el.getElement(options.linkSelector).href||false,
 145                                         linkTitle: el.getElement(options.linkSelector).title||false
 146                                 });
 147                         if ((!options.useThumbGenerator) && (options.showCarousel))
 148                                 Object.extend(elementDict, {
 149                                         thumbnail: el.getElement(options.thumbnailSelector).src
 150                                 });
 151                         else if (options.useThumbGenerator)
 152                                 Object.extend(elementDict, {
 153                                         thumbnail: 'resizer.php?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
 154                                 });
 155
 156                         data[currentArrayPlace] = elementDict;
 157                         currentArrayPlace++;
 158                         if (this.options.destroyAfterPopulate)
 159                                 el.remove();
 160                 });
 161                 this.galleryData = data;
 162                 this.fireEvent('onPopulated');
 163         },
 164         constructElements: function() {
 165                 el = this.galleryElement;
 166                 this.maxIter = this.galleryData.length;
 167                 var currentImg;
 168                 for(i=0;i<this.galleryData.length;i++)
 169                 {
 170                         var currentImg = new Fx.Style(
 171                                 new Element('div').addClass('slideElement').setStyles({
 172                                         'position':'absolute',
 173                                         'left':'0px',
 174                                         'right':'0px',
 175                                         'margin':'0px',
 176                                         'padding':'0px',
 177                                         'backgroundImage':"url('" + this.galleryData[i].image + "')",
 178                                         'backgroundPosition':"center center",
 179                                         'opacity':'0'
 180                                 }).injectInside(el),
 181                                 'opacity',
 182                                 {duration: this.options.fadeDuration}
 183                         );
 184                         this.galleryElements[parseInt(i)] = currentImg;
 185                 }
 186         },
 187         destroySlideShow: function(element) {
 188                 var myClassName = element.className;
 189                 var newElement = new Element('div').addClass('myClassName');
 190                 element.parentNode.replaceChild(newElement, element);
 191         },
 192         startSlideShow: function() {
 193                 this.fireEvent('onStart');
 194                 this.loadingElement.style.display = "none";
 195                 this.lastIter = this.maxIter - 1;
 196                 this.currentIter = 0;
 197                 this.galleryInit = 0;
 198                 this.galleryElements[parseInt(this.currentIter)].set(1);
 199                 if (this.options.showInfopane)
 200                         this.showInfoSlideShow.delay(1000, this);
 201                 this.prepareTimer();
 202                 if (this.options.embedLinks)
 203                         this.makeLink(this.currentIter);
 204         },
 205         nextItem: function() {
 206                 this.fireEvent('onNextCalled');
 207                 this.nextIter = this.currentIter+1;
 208                 if (this.nextIter >= this.maxIter)
 209                         this.nextIter = 0;
 210                 this.galleryInit = 0;
 211                 this.goTo(this.nextIter);
 212         },
 213         prevItem: function() {
 214                 this.fireEvent('onPreviousCalled');
 215                 this.nextIter = this.currentIter-1;
 216                 if (this.nextIter <= -1)
 217                         this.nextIter = this.maxIter - 1;
 218                 this.galleryInit = 0;
 219                 this.goTo(this.nextIter);
 220         },
 221         goTo: function(num) {
 222                 this.clearTimer();
 223                 if (this.options.embedLinks)
 224                         this.clearLink();
 225                 if (this.options.showInfopane)
 226                 {
 227                         this.slideInfoZone.clearChain();
 228                         this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
 229                 } else
 230                         this.changeItem.delay(500, this, num);
 231                 if (this.options.embedLinks)
 232                         this.makeLink(num);
 233                 if (this.options.showDescription)
 234                         this.showDescription(num);
 235                 this.prepareTimer();
 236                 /*if (this.options.showCarousel)
 237                         this.clearThumbnailsHighlights();*/
 238         },
 239         changeItem: function(num) {
 240                 this.fireEvent('onStartChanging');
 241                 this.galleryInit = 0;
 242                 if (this.currentIter != num)
 243                 {
 244                         for(i=0;i<this.maxIter;i++)
 245                         {
 246                                 if ((i != this.currentIter)) this.galleryElements[i].set(0);
 247                         }
 248                         if (num > this.currentIter) this.galleryElements[num].custom(1);
 249                         else
 250                         {
 251                                 this.galleryElements[num].set(1);
 252                                 this.galleryElements[this.currentIter].custom(0);
 253                         }
 254                         this.currentIter = num;
 255                 }
 256                 this.doSlideShow.bind(this)();
 257                 this.fireEvent('onChanged');
 258         },
 259         clearTimer: function() {
 260                 if (this.options.timed)
 261                         $clear(this.timer);
 262         },
 263         prepareTimer: function() {
 264                 if (this.options.timed)
 265                         this.timer = this.nextItem.delay(this.options.delay, this);
 266         },
 267         doSlideShow: function(position) {
 268                 if (this.galleryInit == 1)
 269                 {
 270                         imgPreloader = new Image();
 271                         imgPreloader.onload=function(){
 272                                 this.startSlideShow.delay(10, this);
 273                         }.bind(this);
 274                         imgPreloader.src = this.galleryData[0].image;
 275                 } else {
 276                         if (this.options.showInfopane)
 277                         {
 278                                 if (this.options.showInfopane)
 279                                 {
 280                                         this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
 281                                 } else
 282                                         if (this.options.showCarousel)
 283                                                 this.centerCarouselOn(position);
 284                         }
 285                 }
 286         },
 287         initCarousel: function () {
 288                 var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
 289                 this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut});
 290                 this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
 291                 this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
 292
 293                 this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
 294                         title: this.options.textShowCarousel
 295                 }).setHTML(this.options.textShowCarousel).injectInside(carouselContainerElement);
 296
 297                 this.carouselBtn.addEvent(
 298                         'click',
 299                         function () {
 300                                 this.carouselContainer.clearTimer();
 301                                 this.toggleCarousel();
 302                         }.bind(this)
 303                 );
 304                 this.carouselActive = false;
 305
 306                 var carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
 307                 this.carousel = new Fx.Styles(carouselElement);
 308
 309                 this.carouselLabel = new Element('p').addClass('label').injectInside(this.carousel.element);
 310                 this.carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(this.carousel.element);
 311                 this.carouselInner = new Element('div').addClass('carouselInner').injectInside(this.carouselWrapper);
 312
 313                 this.carouselWrapper.scroller = new Scroller(this.carouselWrapper, {
 314                         area: 100,
 315                         velocity: 0.2
 316                 })
 317
 318                 this.carouselWrapper.elementScroller = new Fx.Scroll(this.carouselWrapper, {
 319                         duration: 400,
 320                         onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
 321                         onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
 322                 });
 323
 324                 this.constructThumbnails();
 325
 326                 this.carouselInner.style.width = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing)) - this.options.thumbSpacing + this.options.thumbWidth) + "px";
 327         },
 328         toggleCarousel: function() {
 329                 if (this.carouselActive)
 330                         this.hideCarousel();
 331                 else
 332                         this.showCarousel();
 333         },
 334         showCarousel: function () {
 335                 this.fireEvent('onShowCarousel');
 336                 this.carouselContainer.custom({
 337                         'opacity': this.options.carouselMaximizedOpacity,
 338                         'top': 0
 339                 }).addEvent('onComplete', function() { this.carouselActive = true; this.carouselWrapper.scroller.start(); }.bind(this));
 340         },
 341         hideCarousel: function () {
 342                 this.fireEvent('onHideCarousel');
 343                 this.carouselContainer.custom({
 344                         'opacity': this.options.carouselMinimizedOpacity,
 345                         'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)
 346                 }).addEvent('onComplete', function() { this.carouselActive = false; this.carouselWrapper.scroller.stop(); }.bind(this));
 347         },
 348         constructThumbnails: function () {
 349                 element = this.carouselInner;
 350                 for(i=0;i<this.galleryData.length;i++)
 351                 {
 352                         var currentImg = new Fx.Style(new Element ('div').addClass("thumbnail").setStyles({
 353                                         backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
 354                                         backgroundPosition: "center center",
 355                                         backgroundRepeat: 'no-repeat',
 356                                         marginLeft: this.options.thumbSpacing + "px",
 357                                         width: this.options.thumbWidth + "px",
 358                                         height: this.options.thumbHeight + "px"
 359                                 }).injectInside(element), "opacity", {duration: 200}).set(0.2);
 360                         currentImg.element.addEvents({
 361                                 'mouseover': function (myself) {
 362                                         myself.clearTimer();
 363                                         myself.custom(0.99);
 364                                         $(this.carouselLabel).setHTML('<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
 365                                 }.pass(currentImg, this),
 366                                 'mouseout': function (myself) {
 367                                         myself.clearTimer();
 368                                         myself.custom(0.2);
 369                                 }.pass(currentImg, this),
 370                                 'click': function (myself) {
 371                                         this.goTo(myself.relatedImage.number);
 372                                 }.pass(currentImg, this)
 373                         });
 374
 375                         currentImg.relatedImage = this.galleryData[i];
 376                         this.thumbnailElements[parseInt(i)] = currentImg;
 377                 }
 378         },
 379         clearThumbnailsHighlights: function()
 380         {
 381                 for(i=0;i<this.galleryData.length;i++)
 382                 {
 383                         this.thumbnailElements[i].clearTimer();
 384                         this.thumbnailElements[i].custom(0.2);
 385                 }
 386         },
 387         centerCarouselOn: function(num) {
 388                 var carouselElement = this.thumbnailElements[num];
 389                 var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
 390                 var carouselWidth = this.carouselWrapper.offsetWidth;
 391                 var carouselInnerWidth = this.carouselInner.offsetWidth;
 392                 var diffWidth = carouselWidth / 2;
 393                 var scrollPos = position-diffWidth;
 394                 this.carouselWrapper.elementScroller.scrollTo(scrollPos,0);
 395         },
 396         initInfoSlideshow: function() {
 397                 /*if (this.slideInfoZone.element)
 398                         this.slideInfoZone.element.remove();*/
 399                 this.slideInfoZone = new Fx.Styles(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
 400                 var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
 401                 var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
 402                 this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
 403                 this.slideInfoZone.element.setStyle('opacity',0);
 404         },
 405         changeInfoSlideShow: function()
 406         {
 407                 this.hideInfoSlideShow.delay(10, this);
 408                 this.showInfoSlideShow.delay(500, this);
 409         },
 410         showInfoSlideShow: function() {
 411                 this.fireEvent('onShowInfopane');
 412                 this.slideInfoZone.clearTimer();
 413                 element = this.slideInfoZone.element;
 414                 element.getElement('h2').setHTML(this.galleryData[this.currentIter].title);
 415                 element.getElement('p').setHTML(this.galleryData[this.currentIter].description);
 416                 this.slideInfoZone.custom({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
 417                 if (this.options.showCarousel)
 418                         this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
 419                 return this.slideInfoZone;
 420         },
 421         hideInfoSlideShow: function() {
 422                 this.fireEvent('onHideInfopane');
 423                 this.slideInfoZone.clearTimer();
 424                 this.slideInfoZone.custom({'opacity': 0, 'height': 0});
 425                 return this.slideInfoZone;
 426         },
 427         makeLink: function(num) {
 428                 this.currentLink.setProperties({
 429                         href: this.galleryData[num].link,
 430                         title: this.galleryData[num].linkTitle
 431                 })
 432                 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
 433                         this.currentLink.setStyle('display', 'block');
 434         },
 435         showDescription: function(num) {
 436                 var descObj = document.getElementById('DescriptionDiv');
 437                 if (descObj)
 438                         descObj.setHTML(this.galleryData[num].outsideDescription);
 439         },
 440         clearLink: function() {
 441                 this.currentLink.setProperties({href: '', title: ''});
 442                 if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
 443                         this.currentLink.setStyle('display', 'none');
 444         }
 445 });
 446 gallery.implement(new Events);
 447 gallery.implement(new Options);
 448
 449 /* All code copyright 2006 Jonathan Schemoul */