git.sur5r.net Git - contagged/blob - scripts/interface/islideshow.js

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * Slideshow\r
   4  * \r
   5  * http://interface.eyecon.ro\r
   6  * \r
   7  * Copyright (c) 2006 Stefan Petre\r
   8  * Dual licensed under the MIT (MIT-LICENSE.txt) \r
   9  * and GPL (GPL-LICENSE.txt) licenses.\r
  10  *\r
  11  */\r
  12 \r
  13 \r
  14 /**\r
  15  * Creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide. A page may have more then one slideshow, eachone working independently. Each slide can be bookmarked. The source images can be defined by JavaScript in slideshow options or by HTML placing images inside container.\r
  16  *\r
  17  * \r
  18  * \r
  19  * @name Slideshow\r
  20  * @description Creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide. A page may have more then one slideshow, eachone working independently. Each slide can be bookmarked. The source images can be defined by JavaScript in slideshow options or by HTML placing images inside container.\r
  21  * @param Hash hash A hash of parameters\r
  22  * @option String container container ID\r
  23  * @option String loader path to loading indicator image\r
  24  * @option String linksPosition (optional) images links position ['top'|'bottom'|null]\r
  25  * @option String linksClass (optional) images links cssClass\r
  26  * @option String linksSeparator (optional) images links separator\r
  27  * @option Integer fadeDuration fade animation duration in miliseconds\r
  28  * @option String activeLinkClass (optional) active image link CSS class\r
  29  * @option String nextslideClass (optional) next image CSS class\r
  30  * @option String prevslideClass (optional) previous image CSS class\r
  31  * @option String captionPosition (optional) image caption position ['top'|'bottom'|null]\r
  32  * @option String captionClass (optional) image caption CSS class\r
  33  * @option String autoplay (optional) seconds to wait untill next images is displayed. This option will make the slideshow to autoplay.\r
  34  * @option String random (optional) if slideshow autoplayes the images can be randomized\r
  35  * @option Array images (optional) array of hash with keys 'src' (path to image) and 'cation' (image caption) for images\r
  36  *\r
  37  * @type jQuery\r
  38  * @cat Plugins/Interface\r
  39  * @author Stefan Petre\r
  40  */\r
  41 jQuery.islideshow = {\r
  42         slideshows: [],\r
  43         gonext : function()\r
  44         {\r
  45                 this.blur();\r
  46                 slideshow = this.parentNode;\r
  47                 id = jQuery.attr(slideshow, 'id');\r
  48                 if (jQuery.islideshow.slideshows[id] != null) {\r
  49                         window.clearInterval(jQuery.islideshow.slideshows[id]);\r
  50                 }\r
  51                 slide = slideshow.ss.currentslide + 1;\r
  52                 if (slideshow.ss.images.length < slide) {\r
  53                         slide = 1;\r
  54                 }\r
  55                 images = jQuery('img', slideshow.ss.holder);\r
  56                 slideshow.ss.currentslide = slide;\r
  57                 if (images.size() > 0) {\r
  58                         images.fadeOut(\r
  59                                 slideshow.ss.fadeDuration,\r
  60                                 jQuery.islideshow.showImage\r
  61                         );\r
  62                 }\r
  63         },\r
  64         goprev : function()\r
  65         {\r
  66                 this.blur();\r
  67                 slideshow = this.parentNode;\r
  68                 id = jQuery.attr(slideshow, 'id');\r
  69                 if (jQuery.islideshow.slideshows[id] != null) {\r
  70                         window.clearInterval(jQuery.islideshow.slideshows[id]);\r
  71                 }\r
  72                 slide = slideshow.ss.currentslide - 1;\r
  73                 images = jQuery('img', slideshow.ss.holder);\r
  74                 if (slide < 1) {\r
  75                         slide = slideshow.ss.images.length ;\r
  76                 }\r
  77                 slideshow.ss.currentslide = slide;\r
  78                 if (images.size() > 0) {\r
  79                         images.fadeOut(\r
  80                                 slideshow.ss.fadeDuration,\r
  81                                 jQuery.islideshow.showImage\r
  82                         );\r
  83                 }\r
  84         },\r
  85         timer : function (c)\r
  86         {\r
  87                 slideshow = document.getElementById(c);\r
  88                 if (slideshow.ss.random) {\r
  89                         slide = slideshow.ss.currentslide;\r
  90                         while(slide == slideshow.ss.currentslide) {\r
  91                                 slide = 1 + parseInt(Math.random() * slideshow.ss.images.length);\r
  92                         }\r
  93                 } else {\r
  94                         slide = slideshow.ss.currentslide + 1;\r
  95                         if (slideshow.ss.images.length < slide) {\r
  96                                 slide = 1;\r
  97                         }\r
  98                 }\r
  99                 images = jQuery('img', slideshow.ss.holder);\r
 100                 slideshow.ss.currentslide = slide;\r
 101                 if (images.size() > 0) {\r
 102                         images.fadeOut(\r
 103                                 slideshow.ss.fadeDuration,\r
 104                                 jQuery.islideshow.showImage\r
 105                         );\r
 106                 }\r
 107         },\r
 108         go : function(o)\r
 109         {\r
 110                 var slideshow;\r
 111                 if (o && o.constructor == Object) {\r
 112                         if (o.loader) {\r
 113                                 slideshow = document.getElementById(o.loader.slideshow);\r
 114                                 url = window.location.href.split("#");\r
 115                                 o.loader.onload = null;\r
 116                                 if (url.length == 2) {\r
 117                                         slide = parseInt(url[1]);\r
 118                                         show = url[1].replace(slide,'');\r
 119                                         if (jQuery.attr(slideshow,'id') != show) {\r
 120                                                 slide = 1;\r
 121                                         }\r
 122                                 } else {\r
 123                                         slide = 1;\r
 124                                 }\r
 125                         }\r
 126                         if(o.link) {\r
 127                                 o.link.blur();\r
 128                                 slideshow = o.link.parentNode.parentNode;\r
 129                                 id = jQuery.attr(slideshow, 'id');\r
 130                                 if (jQuery.islideshow.slideshows[id] != null) {\r
 131                                         window.clearInterval(jQuery.islideshow.slideshows[id]);\r
 132                                 }\r
 133                                 url = o.link.href.split("#");\r
 134                                 slide = parseInt(url[1]);\r
 135                                 show = url[1].replace(slide,'');\r
 136                                 if (jQuery.attr(slideshow,'id') != show) {\r
 137                                         slide = 1;\r
 138                                 }\r
 139                         }\r
 140                         if (slideshow.ss.images.length < slide || slide < 1) {\r
 141                                 slide = 1;\r
 142                         }\r
 143                         slideshow.ss.currentslide = slide;\r
 144                         slidePos = jQuery.iUtil.getSize(slideshow);\r
 145                         slidePad = jQuery.iUtil.getPadding(slideshow);\r
 146                         slideBor = jQuery.iUtil.getBorder(slideshow);\r
 147                         if (slideshow.ss.prevslide) {\r
 148                                 slideshow.ss.prevslide.o.css('display', 'none');\r
 149                         }\r
 150                         if (slideshow.ss.nextslide) {\r
 151                                 slideshow.ss.nextslide.o.css('display', 'none');\r
 152                         }\r
 153                         \r
 154                         //center loader\r
 155                         if (slideshow.ss.loader) {\r
 156                                 y = parseInt(slidePad.t) + parseInt(slideBor.t);\r
 157                                 if (slideshow.ss.slideslinks) {\r
 158                                         if (slideshow.ss.slideslinks.linksPosition == 'top') {\r
 159                                                 y += slideshow.ss.slideslinks.dimm.hb;\r
 160                                         } else {\r
 161                                                 slidePos.h -= slideshow.ss.slideslinks.dimm.hb;\r
 162                                         }\r
 163                                 }\r
 164                                 if (slideshow.ss.slideCaption) {\r
 165                                         if (slideshow.ss.slideCaption && slideshow.ss.slideCaption.captionPosition == 'top') {\r
 166                                                 y += slideshow.ss.slideCaption.dimm.hb;\r
 167                                         } else {\r
 168                                                 slidePos.h -= slideshow.ss.slideCaption.dimm.hb;\r
 169                                         }\r
 170                                 }\r
 171                                 if (!slideshow.ss.loaderWidth) {\r
 172                                         slideshow.ss.loaderHeight = o.loader ? o.loader.height : (parseInt(slideshow.ss.loader.css('height'))||0);\r
 173                                         slideshow.ss.loaderWidth = o.loader ? o.loader.width : (parseInt(slideshow.ss.loader.css('width'))||0);\r
 174                                 }\r
 175                                 \r
 176                                 slideshow.ss.loader.css('top', y + (slidePos.h - slideshow.ss.loaderHeight)/2 + 'px');\r
 177                                 slideshow.ss.loader.css('left', (slidePos.wb - slideshow.ss.loaderWidth)/2 + 'px');\r
 178                                 slideshow.ss.loader.css('display', 'block');\r
 179                         }\r
 180                         \r
 181                         //getimage\r
 182                         images = jQuery('img', slideshow.ss.holder);\r
 183                         if (images.size() > 0) {\r
 184                                 images.fadeOut(\r
 185                                         slideshow.ss.fadeDuration,\r
 186                                         jQuery.islideshow.showImage\r
 187                                 );\r
 188                         } else {\r
 189                                 lnk = jQuery('a', slideshow.ss.slideslinks.o).get(slide-1);\r
 190                                 jQuery(lnk).addClass(slideshow.ss.slideslinks.activeLinkClass);\r
 191                                 var img = new Image();\r
 192                                 img.slideshow = jQuery.attr(slideshow,'id');\r
 193                                 img.slide = slide-1;\r
 194                                 img.src = slideshow.ss.images[slideshow.ss.currentslide-1].src ;\r
 195                                 if (img.complete) {\r
 196                                         img.onload = null;\r
 197                                         jQuery.islideshow.display.apply(img);\r
 198                                 } else {\r
 199                                         img.onload = jQuery.islideshow.display;\r
 200                                 }\r
 201                                 //slideshow.ss.holder.html('<img src="' + slideshow.ss.images[slide-1].src + '" />');\r
 202                                 if (slideshow.ss.slideCaption) {\r
 203                                         slideshow.ss.slideCaption.o.html(slideshow.ss.images[slide-1].caption);\r
 204                                 }\r
 205                                 //jQuery('img', slideshow.ss.holder).bind('load',jQuery.slideshowDisplay);\r
 206                         }\r
 207                 }\r
 208         },\r
 209         showImage : function()\r
 210         {\r
 211                 slideshow = this.parentNode.parentNode;\r
 212                 slideshow.ss.holder.css('display','none');\r
 213                 if (slideshow.ss.slideslinks.activeLinkClass) {\r
 214                         lnk = jQuery('a', slideshow.ss.slideslinks.o).removeClass(slideshow.ss.slideslinks.activeLinkClass).get(slideshow.ss.currentslide - 1);\r
 215                         jQuery(lnk).addClass(slideshow.ss.slideslinks.activeLinkClass);\r
 216                 }\r
 217                 //slideshow.ss.holder.html('<img src="' + slideshow.ss.images[slideshow.ss.currentslide - 1].src + '" />');\r
 218                 \r
 219                 var img = new Image();\r
 220                 img.slideshow = jQuery.attr(slideshow,'id');\r
 221                 img.slide = slideshow.ss.currentslide - 1;\r
 222                 img.src = slideshow.ss.images[slideshow.ss.currentslide - 1].src ;\r
 223                 if (img.complete) {\r
 224                         img.onload = null;\r
 225                         jQuery.islideshow.display.apply(img);\r
 226                 } else {\r
 227                         img.onload = jQuery.islideshow.display;\r
 228                 }\r
 229                 if (slideshow.ss.slideCaption) {\r
 230                         slideshow.ss.slideCaption.o.html(slideshow.ss.images[slideshow.ss.currentslide-1].caption);\r
 231                 }\r
 232                 //jQuery('img', slideshow.ss.holder).bind('load',jQuery.slideshowDisplay);\r
 233         },\r
 234         display : function ()\r
 235         {\r
 236                 slideshow = document.getElementById(this.slideshow);\r
 237                 if (slideshow.ss.prevslide) {\r
 238                         slideshow.ss.prevslide.o.css('display', 'none');\r
 239                 }\r
 240                 if (slideshow.ss.nextslide) {\r
 241                         slideshow.ss.nextslide.o.css('display', 'none');\r
 242                 }\r
 243                 slidePos = jQuery.iUtil.getSize(slideshow);\r
 244                 y = 0;\r
 245                 if (slideshow.ss.slideslinks) {\r
 246                         if (slideshow.ss.slideslinks.linksPosition == 'top') {\r
 247                                 y += slideshow.ss.slideslinks.dimm.hb;\r
 248                         } else {\r
 249                                 slidePos.h -= slideshow.ss.slideslinks.dimm.hb;\r
 250                         }\r
 251                 }\r
 252                 if (slideshow.ss.slideCaption) {\r
 253                         if (slideshow.ss.slideCaption && slideshow.ss.slideCaption.captionPosition == 'top') {\r
 254                                 y += slideshow.ss.slideCaption.dimm.hb;\r
 255                         } else {\r
 256                                 slidePos.h -= slideshow.ss.slideCaption.dimm.hb;\r
 257                         }\r
 258                 }\r
 259                 par = jQuery('.slideshowHolder', slideshow);\r
 260                 y = y + (slidePos.h - this.height)/2 ;\r
 261                 x = (slidePos.wb - this.width)/2;\r
 262                 slideshow.ss.holder.css('top', y + 'px').css('left', x + 'px').html('<img src="' + this.src + '" />');\r
 263                 slideshow.ss.holder.fadeIn(slideshow.ss.fadeDuration);\r
 264                 nextslide = slideshow.ss.currentslide + 1;\r
 265                 if (nextslide > slideshow.ss.images.length) {\r
 266                         nextslide = 1;\r
 267                 }\r
 268                 prevslide = slideshow.ss.currentslide - 1;\r
 269                 if (prevslide < 1) {\r
 270                         prevslide = slideshow.ss.images.length;\r
 271                 }\r
 272                 slideshow.ss.nextslide.o\r
 273                                 .css('display','block')\r
 274                                 .css('top', y + 'px')\r
 275                                 .css('left', x + 2 * this.width/3 + 'px')\r
 276                                 .css('width', this.width/3 + 'px')\r
 277                                 .css('height', this.height + 'px')\r
 278                                 .attr('title', slideshow.ss.images[nextslide-1].caption);\r
 279                 slideshow.ss.nextslide.o.get(0).href = '#' + nextslide + jQuery.attr(slideshow, 'id');\r
 280                 slideshow.ss.prevslide.o\r
 281                                 .css('display','block')\r
 282                                 .css('top', y + 'px')\r
 283                                 .css('left', x + 'px')\r
 284                                 .css('width', this.width/3 + 'px')\r
 285                                 .css('height', this.height + 'px')\r
 286                                 .attr('title', slideshow.ss.images[prevslide-1].caption);\r
 287                 slideshow.ss.prevslide.o.get(0).href = '#' + prevslide + jQuery.attr(slideshow, 'id');\r
 288         },\r
 289         build : function(o)\r
 290         {\r
 291                 if (!o || !o.container || jQuery.islideshow.slideshows[o.container])\r
 292                         return;\r
 293                 var container = jQuery('#' + o.container);\r
 294                 var el = container.get(0);\r
 295                 \r
 296                 if (el.style.position != 'absolute' && el.style.position != 'relative') {\r
 297                         el.style.position = 'relative';\r
 298                 }\r
 299                 el.style.overflow = 'hidden';\r
 300                 if (container.size() == 0)\r
 301                         return;\r
 302                 el.ss = {};\r
 303                 \r
 304                 el.ss.images = o.images ? o.images : [];\r
 305                 el.ss.random = o.random && o.random == true || false;\r
 306                 imgs = el.getElementsByTagName('IMG');\r
 307                 for(i = 0; i< imgs.length; i++) {\r
 308                         indic = el.ss.images.length;\r
 309                         el.ss.images[indic] = {src:imgs[i].src, caption:imgs[i].title||imgs[i].alt||''};\r
 310                 }\r
 311                 \r
 312                 if (el.ss.images.length == 0) {\r
 313                         return;\r
 314                 }\r
 315                 \r
 316                 el.ss.oP = jQuery.extend(\r
 317                                 jQuery.iUtil.getPosition(el),\r
 318                                 jQuery.iUtil.getSize(el)\r
 319                         );\r
 320                 el.ss.oPad = jQuery.iUtil.getPadding(el);\r
 321                 el.ss.oBor = jQuery.iUtil.getBorder(el);\r
 322                 t = parseInt(el.ss.oPad.t) + parseInt(el.ss.oBor.t);\r
 323                 b = parseInt(el.ss.oPad.b) + parseInt(el.ss.oBor.b);\r
 324                 jQuery('img', el).remove();\r
 325                 el.ss.fadeDuration = o.fadeDuration ? o.fadeDuration : 500;\r
 326                 if (o.linksPosition || o.linksClass || o.activeLinkClass) {\r
 327                         el.ss.slideslinks = {};\r
 328                         container.append('<div class="slideshowLinks"></div>');\r
 329                         el.ss.slideslinks.o = jQuery('.slideshowLinks', el);\r
 330                         if (o.linksClass) {\r
 331                                 el.ss.slideslinks.linksClass = o.linksClass;\r
 332                                 el.ss.slideslinks.o.addClass(o.linksClass);\r
 333                         }\r
 334                         if (o.activeLinkClass) {\r
 335                                 el.ss.slideslinks.activeLinkClass = o.activeLinkClass;\r
 336                         }\r
 337                         el.ss.slideslinks.o.css('position','absolute').css('width', el.ss.oP.w + 'px');\r
 338                         if (o.linksPosition && o.linksPosition == 'top') {\r
 339                                 el.ss.slideslinks.linksPosition = 'top';\r
 340                                 el.ss.slideslinks.o.css('top',t + 'px');\r
 341                         } else {\r
 342                                 el.ss.slideslinks.linksPosition = 'bottom';\r
 343                                 el.ss.slideslinks.o.css('bottom',b + 'px');\r
 344                         }\r
 345                         el.ss.slideslinks.linksSeparator = o.linksSeparator ? o.linksSeparator : ' ';\r
 346                         for (var i=0; i<el.ss.images.length; i++) {\r
 347                                 indic = parseInt(i) + 1;\r
 348                                 el.ss.slideslinks.o.append('<a href="#' + indic + o.container + '" class="slideshowLink" title="' + el.ss.images[i].caption + '">' + indic + '</a>' + (indic != el.ss.images.length ? el.ss.slideslinks.linksSeparator : ''));\r
 349                         }\r
 350                         jQuery('a', el.ss.slideslinks.o).bind(\r
 351                                 'click',\r
 352                                 function()\r
 353                                 {\r
 354                                         jQuery.islideshow.go({link:this})\r
 355                                 }\r
 356                         );\r
 357                         el.ss.slideslinks.dimm = jQuery.iUtil.getSize(el.ss.slideslinks.o.get(0));\r
 358                 }\r
 359                 if (o.captionPosition || o.captionClass) {\r
 360                         el.ss.slideCaption = {};\r
 361                         container.append('<div class="slideshowCaption">&nbsp;</div>');\r
 362                         el.ss.slideCaption.o = jQuery('.slideshowCaption', el);\r
 363                         if (o.captionClass) {\r
 364                                 el.ss.slideCaption.captionClass = o.captionClass;\r
 365                                 el.ss.slideCaption.o.addClass(o.captionClass);\r
 366                         }\r
 367                         el.ss.slideCaption.o.css('position','absolute').css('width', el.ss.oP.w + 'px');\r
 368                         if (o.captionPosition&& o.captionPosition == 'top') {\r
 369                                 el.ss.slideCaption.captionPosition = 'top';\r
 370                                 el.ss.slideCaption.o.css('top', (el.ss.slideslinks && el.ss.slideslinks.linksPosition == 'top' ? el.ss.slideslinks.dimm.hb + t : t) + 'px');\r
 371                         } else {\r
 372                                 el.ss.slideCaption.captionPosition = 'bottom';\r
 373                                 el.ss.slideCaption.o.css('bottom', (el.ss.slideslinks && el.ss.slideslinks.linksPosition == 'bottom' ? el.ss.slideslinks.dimm.hb + b : b) + 'px');\r
 374                         }\r
 375                         el.ss.slideCaption.dimm = jQuery.iUtil.getSize(el.ss.slideCaption.o.get(0));\r
 376                 }\r
 377                 \r
 378                 if (o.nextslideClass) {\r
 379                         el.ss.nextslide = {nextslideClass:o.nextslideClass};\r
 380                         container.append('<a href="#2' + o.container + '" class="slideshowNextSlide">&nbsp;</a>');\r
 381                         el.ss.nextslide.o = jQuery('.slideshowNextSlide', el);\r
 382                         el.ss.nextslide.o.css('position', 'absolute').css('display', 'none').css('overflow','hidden').css('fontSize', '30px').addClass(el.ss.nextslide.nextslideClass);\r
 383                         el.ss.nextslide.o.bind('click', jQuery.islideshow.gonext);\r
 384                 }\r
 385                 if (o.prevslideClass) {\r
 386                         el.ss.prevslide= {prevslideClass:o.prevslideClass};\r
 387                         container.append('<a href="#0' + o.container + '" class="slideshowPrevslide">&nbsp;</a>');\r
 388                         el.ss.prevslide.o = jQuery('.slideshowPrevslide', el);\r
 389                         el.ss.prevslide.o.css('position', 'absolute').css('display', 'none').css('overflow','hidden').css('fontSize', '30px').addClass(el.ss.prevslide.prevslideClass);\r
 390                         el.ss.prevslide.o.bind('click', jQuery.islideshow.goprev);\r
 391                 }\r
 392                 \r
 393                 container.prepend('<div class="slideshowHolder"></div>');\r
 394                 el.ss.holder = jQuery('.slideshowHolder', el);\r
 395                 el.ss.holder.css('position','absolute').css('top','0px').css('left','0px').css('display', 'none');\r
 396                 if (o.loader) {\r
 397                         container.prepend('<div class="slideshowLoader" style="display: none;"><img src="' + o.loader + '" /></div>');\r
 398                         el.ss.loader = jQuery('.slideshowLoader', el);\r
 399                         el.ss.loader.css('position', 'absolute');\r
 400                         var img = new Image();\r
 401                         img.slideshow = o.container;\r
 402                         img.src = o.loader;\r
 403                         if (img.complete) {\r
 404                                 img.onload = null;\r
 405                                 jQuery.islideshow.go({loader:img});\r
 406                         } else {\r
 407                                 img.onload = function()\r
 408                                 {\r
 409                                         jQuery.islideshow.go({loader:this});\r
 410                                 };\r
 411                         }\r
 412                 } else {\r
 413                         jQuery.islideshow.go({container:el});\r
 414                 }\r
 415                 \r
 416                 if(o.autoplay) {\r
 417                         time = parseInt(o.autoplay) * 1000;\r
 418                 }\r
 419                 jQuery.islideshow.slideshows[o.container] = o.autoplay ? window.setInterval('jQuery.islideshow.timer(\'' + o.container + '\')', time) : null;\r
 420         }\r
 421 };\r
 422 jQuery.slideshow = jQuery.islideshow.build;