1/* Ultimate Fade-in slideshow (v2.4) 2* Last updated: May 24th, 2010. This notice must stay intact for usage 3* Author: Dynamic Drive at http://www.dynamicdrive.com/ 4* Visit http://www.dynamicdrive.com/ for full source code 5*/ 6 7//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize 8//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added. 9 10var fadeSlideShow_descpanel = { 11 controls: [['/system/statV.0/web/img/slideshow/x.png', 7, 7], ['/system/statV.0/web/img/slideshow/restore.png', 10, 11], ['/system/statV.0/web/img/slideshow/loading.gif', 54, 55]], //full URL and dimensions of close, restore, and loading images 12 fontStyle: 'normal 11px Verdana', //font style for text descriptions 13 slidespeed: 200 //speed of description panel animation (in millisec) 14} 15 16//No need to edit beyond here... 17 18 19 20function fadeSlideShow(settingarg) { 21 this.setting = settingarg 22 settingarg = null 23 var setting = this.setting 24 setting.fadeduration = setting.fadeduration ? parseInt(setting.fadeduration) : 500 25 setting.curimage = (setting.persist) ? fadeSlideShow.routines.getCookie("gallery-" + setting.wrapperid) : 0 26 setting.curimage = setting.curimage || 0 //account for curimage being null if cookie is empty 27 setting.currentstep = 0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only) 28 setting.totalsteps = setting.imagearray.length * (setting.displaymode.cycles > 0 ? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0) 29 setting.fglayer = 0, setting.bglayer = 1 //index of active and background layer (switches after each change of slide) 30 setting.oninit = setting.oninit || function () { } 31 setting.onslide = setting.onslide || function () { } 32 if (setting.displaymode.randomize) //randomly shuffle order of images? 33 setting.imagearray.sort(function () { return 0.5 - Math.random() }) 34 var preloadimages = [] //preload images 35 setting.longestdesc = "" //get longest description of all slides. If no desciptions defined, variable contains "" 36 if (setting.curimage >= setting.imagearray.length) setting.curimage = 0; 37 for (var i = 0; i < setting.imagearray.length; i++) { //preload images 38 preloadimages[i] = new Image() 39 preloadimages[i].src = setting.imagearray[i][0] 40 if (setting.imagearray[i][3] && setting.imagearray[i][3].length > setting.longestdesc.length) 41 setting.longestdesc = setting.imagearray[i][3] 42 } 43 var closebutt = fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always" 44 setting.closebutton = (setting.descreveal == "always") ? '<img class="close" src="' + closebutt[0] + '" style="float:right;cursor:hand;cursor:pointer;width:' + closebutt[1] + 'px;height:' + closebutt[2] + 'px;margin-left:2px" title="Hide Description" />' : '' 45 var slideshow = this 46 jQuery(document).ready(function ($) { //fire on DOM ready 47 var setting = slideshow.setting 48 var fullhtml = fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow 49 //setting.$wrapperdiv = $('#' + setting.wrapperid).css({ position: 'relative', visibility: 'visible', background: 'black', overflow: 'hidden', width: setting.dimensions[0], height: setting.dimensions[1] }).empty() //main slideshow DIV 50 setting.$wrapperdiv = $('#' + setting.wrapperid).css({ position: 'relative', visibility: 'visible', overflow: 'hidden', width: setting.dimensions[0], height: setting.dimensions[1] }).empty() //main slideshow DIV 51 if (setting.$wrapperdiv.length == 0) { //if no wrapper DIV found 52 alert("Error: DIV with ID \"" + setting.wrapperid + "\" not found on page.") 53 return 54 } 55 setting.$gallerylayers = $('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 56 //.css({ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', background: 'black' }) 57 .css({ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }) 58 .appendTo(setting.$wrapperdiv) 59 var $loadingimg = $('<img src="' + fadeSlideShow_descpanel.controls[2][0] + '" style="position:absolute;width:' + fadeSlideShow_descpanel.controls[2][1] + ';height:' + fadeSlideShow_descpanel.controls[2][2] + '" />') 60 .css({ left: setting.dimensions[0] / 2 - fadeSlideShow_descpanel.controls[2][1] / 2, top: setting.dimensions[1] / 2 - fadeSlideShow_descpanel.controls[2][2] }) //center loading gif 61 .appendTo(setting.$wrapperdiv) 62 var $curimage = setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image 63 if (setting.longestdesc != "" && setting.descreveal != "none") { //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled 64 fadeSlideShow.routines.adddescpanel($, setting) 65 if (setting.descreveal == "always") { //position desc panel so it's visible to begin with 66 setting.$descpanel.css({ top: setting.dimensions[1] - setting.panelheight }) 67 setting.$descinner.click(function (e) { //asign click behavior to "close" icon 68 if (e.target.className == "close") { 69 slideshow.showhidedescpanel('hide') 70 } 71 }) 72 setting.$restorebutton.click(function (e) { //asign click behavior to "restore" icon 73 slideshow.showhidedescpanel('show') 74 $(this).css({ visibility: 'hidden' }) 75 }) 76 } 77 else if (setting.descreveal == "ondemand") { //display desc panel on demand (mouseover) 78 setting.$wrapperdiv.bind('mouseenter', function () { slideshow.showhidedescpanel('show') }) 79 setting.$wrapperdiv.bind('mouseleave', function () { slideshow.showhidedescpanel('hide') }) 80 } 81 } 82 setting.$wrapperdiv.bind('mouseenter', function () { setting.ismouseover = true }) //pause slideshow mouseover 83 setting.$wrapperdiv.bind('mouseleave', function () { setting.ismouseover = false }) 84 if ($curimage.get(0).complete) { //accounf for IE not firing image.onload 85 $loadingimg.hide() 86 slideshow.paginateinit($) 87 slideshow.showslide(setting.curimage) 88 } 89 else { //initialize slideshow when first image has fully loaded 90 $loadingimg.hide() 91 slideshow.paginateinit($) 92 $curimage.bind('load', function () { slideshow.showslide(setting.curimage) }) 93 } 94 setting.oninit.call(slideshow) //trigger oninit() event 95 $(window).bind('unload', function () { //clean up and persist 96 if (slideshow.setting.persist) //remember last shown image's index
97 fadeSlideShow.routines.setCookie("gallery-" + setting.wrapperid, setting.curimage) 98 jQuery.each(slideshow.setting, function (k) { 99 if (slideshow.setting[k] instanceof Array) { 100 for (var i = 0; i < slideshow.setting[k].length; i++) { 101 if (slideshow.setting[k][i].tagName == "DIV") //catches 2 gallerylayer divs, gallerystatus div 102 slideshow.setting[k][i].innerHTML = null 103 slideshow.setting[k][i] = null 104 } 105 } 106 }) 107 slideshow = slideshow.setting = null 108 }) 109 }) 110} 111 112fadeSlideShow.prototype = { 113 114 navigate: function (keyword) { 115 var setting = this.setting 116 clearTimeout(setting.playtimer) 117 if (setting.displaymode.type == "auto") { //in auto mode 118 setting.displaymode.type = "manual" //switch to "manual" mode when nav buttons are clicked on 119 setting.displaymode.wraparound = true //set wraparound option to true 120 } 121 if (!isNaN(parseInt(keyword))) { //go to specific slide? 122 this.showslide(parseInt(keyword)) 123 } 124 else if (/(prev)|(next)/i.test(keyword)) { //go back or forth inside slide? 125 this.showslide(keyword.toLowerCase()) 126 } 127 }, 128 129 showslide: function (keyword) { 130 var slideshow = this 131 var setting = slideshow.setting 132 if (setting.displaymode.type == "auto" && setting.ismouseover && setting.currentstep <= setting.totalsteps) { //if slideshow in autoplay mode and mouse is over it, pause it 133 setting.playtimer = setTimeout(function () { slideshow.showslide('next') }, setting.displaymode.pause) 134 return 135 } 136 var totalimages = setting.imagearray.length 137 var imgindex = (keyword == "next") ? (setting.curimage < totalimages - 1 ? setting.curimage + 1 : 0) 138 : (keyword == "prev") ? (setting.curimage > 0 ? setting.curimage - 1 : totalimages - 1) 139 : Math.min(keyword, totalimages - 1) 140 var $slideimage = setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one 141 var imgdimensions = [$slideimage.width(), $slideimage.height()] //center align image 142 $slideimage.css({ marginLeft: (imgdimensions[0] > 0 && imgdimensions[0] < setting.dimensions[0]) ? setting.dimensions[0] / 2 - imgdimensions[0] / 2 : 0 }) 143 $slideimage.css({ marginTop: (imgdimensions[1] > 0 && imgdimensions[1] < setting.dimensions[1]) ? setting.dimensions[1] / 2 - imgdimensions[1] / 2 : 0 }) 144 if (setting.descreveal == "peekaboo" && setting.longestdesc != "") { //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown 145 clearTimeout(setting.hidedesctimer) //clear hide desc panel timer 146 slideshow.showhidedescpanel('hide', 0) //and hide it immediately 147 } 148 setting.$gallerylayers.eq(setting.bglayer).css({ zIndex: 1000, opacity: 0 }) //background layer becomes foreground 149 .stop().css({ opacity: 0 }).animate({ opacity: 1 }, setting.fadeduration, function () { //Callback function after fade animation is complete: 150 clearTimeout(setting.playtimer) 151 try { 152 setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage) 153 } catch (e) { 154 alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: " + e) 155 } 156 if (setting.descreveal == "peekaboo" && setting.longestdesc != "") { 157 slideshow.showhidedescpanel('show') 158 setting.hidedesctimer = setTimeout(function () { slideshow.showhidedescpanel('hide') }, setting.displaymode.pause - fadeSlideShow_descpanel.slidespeed) 159 } 160 setting.currentstep += 1 161 if (setting.displaymode.type == "auto") { 162 if (setting.currentstep <= setting.totalsteps || setting.displaymode.cycles == 0) 163 setting.playtimer = setTimeout(function () { slideshow.showslide('next') }, setting.displaymode.pause) 164 } 165 }) //end callback function 166 setting.$gallerylayers.eq(setting.fglayer).css({ zIndex: 999 }) //foreground layer becomes background 167 setting.fglayer = setting.bglayer 168 setting.bglayer = (setting.bglayer == 0) ? 1 : 0 169 setting.curimage = imgindex 170 if (setting.$descpanel) { 171 setting.$descpanel.css({ visibility: (setting.imagearray[imgindex][3]) ? 'visible' : 'hidden' }) 172 if (setting.imagearray[imgindex][3]) //if this slide contains a description
173 setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3]) 174 } 175 if (setting.displaymode.type == "manual" && !setting.displaymode.wraparound) { 176 this.paginatecontrol() 177 } 178 if (setting.$status) //if status container defined 179 setting.$status.html(setting.curimage + 1 + "/" + totalimages) 180 }, 181 182 showhidedescpanel: function (state, animateduration) { 183 var setting = this.setting 184 var endpoint = (state == "show") ? setting.dimensions[1] - setting.panelheight : this.setting.dimensions[1] 185 setting.$descpanel.stop().animate({ top: endpoint }, (typeof animateduration != "undefined" ? animateduration : fadeSlideShow_descpanel.slidespeed), function () { 186 if (setting.descreveal == "always" && state == "hide") 187 setting.$restorebutton.css({ visibility: 'visible' }) //show restore button 188 }) 189 }, 190 191 paginateinit: function ($) { 192 var slideshow = this 193 var setting = this.setting 194 if (setting.togglerid) { //if toggler div defined 195 setting.$togglerdiv = $("#" + setting.togglerid) 196 setting.$prev = setting.$togglerdiv.find('.prev').data('action', 'prev') 197 setting.$next = setting.$togglerdiv.find('.next').data('action', 'next') 198 setting.$prev.add(setting.$next).click(function (e) { //assign click behavior to prev and next controls 199 var $target = $(this) 200 slideshow.navigate($target.data('action')) 201 e.preventDefault() 202 }) 203 setting.$status = setting.$togglerdiv.find('.status') 204 } 205 }, 206 207 paginatecontrol: function () { 208 var setting = this.setting 209 setting.$prev.css({ opacity: (setting.curimage == 0) ? 0.4 : 1 }).data('action', (setting.curimage == 0) ? 'none' : 'prev') 210 setting.$next.css({ opacity: (setting.curimage == setting.imagearray.length - 1) ? 0.4 : 1 }).data('action', (setting.curimage == setting.imagearray.length - 1) ? 'none' : 'next') 211 if (document.documentMode == 8) { //in IE8 standards mode, apply opacity to inner image of link 212 setting.$prev.find('img:eq(0)').css({ opacity: (setting.curimage == 0) ? 0.4 : 1 }) 213 setting.$next.find('img:eq(0)').css({ opacity: (setting.curimage == setting.imagearray.length - 1) ? 0.4 : 1 }) 214 } 215 } 216 217 218} 219 220fadeSlideShow.routines = { 221 222 getSlideHTML: function (imgelement) { 223 var titleTag = ""; 224 if (imgelement[4]) { 225 titleTag = ' title="' + imgelement[4] + '"'; 226 //console.log(imgelement[4]); 227 } 228 var layerHTML = (imgelement[1]) ? '<a href="' + imgelement[1] + '" target="' + imgelement[2] + '"' + titleTag + '>\n' : '' //hyperlink, alt and title? 229 layerHTML += '<img src="' + imgelement[0] + '" style="border-width:0;" />\n' 230 layerHTML += (imgelement[1]) ? '</a>\n' : '' 231 return layerHTML //return HTML for this layer 232 }, 233 234 getFullHTML: function (imagearray) { 235 var preloadhtml = '' 236 for (var i = 0; i < imagearray.length; i++) 237 preloadhtml += this.getSlideHTML(imagearray[i]) 238 return preloadhtml 239 }, 240 241 adddescpanel: function ($, setting) { 242 setting.$descpanel = $('<div class="fadeslidedescdiv"></div>') 243 .css({ position: 'absolute', visibility: 'hidden', width: '100%', left: 0, top: setting.dimensions[1], font: fadeSlideShow_descpanel.fontStyle, zIndex: '1001' }) 244 .appendTo(setting.$wrapperdiv) 245 $('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs 246 .css({ position: 'absolute', left: 0, top: 0, width: setting.$descpanel.width() - 8, padding: '4px' }) 247 .eq(0).css({ background: 'black', opacity: 0.7 }).end() //"descpanelbg" div 248 .eq(1).css({ color: 'white' }
248).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div 249 .appendTo(setting.$descpanel) 250 setting.$descinner = setting.$descpanel.find('div.descpanelfg') 251 setting.panelheight = setting.$descinner.outerHeight() 252 setting.$descpanel.css({ height: setting.panelheight }).find('div').css({ height: '100%' }) 253 if (setting.descreveal == "always") { //create restore button 254 setting.$restorebutton = $('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] + '" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:' + fadeSlideShow_descpanel.controls[1][1] + 'px;height:' + fadeSlideShow_descpanel.controls[1][2] + 'px;cursor:pointer;cursor:hand" />') 255 .appendTo(setting.$wrapperdiv) 256 257 258 } 259 }, 260 261 262 getCookie: function (Name) { 263 var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair 264 if (document.cookie.match(re)) //if cookie found 265 return document.cookie.match(re)[0].split("=")[1] //return its value 266 return null 267 }, 268
269 setCookie: function (name, value) { 270 document.cookie = name + "=" + value + ";path=/" 271 } 272}
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.