1//** Simple Controls Gallery- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com 2//** Dec 7th, 08'- Script created (Requires jquery 1.2.x) 3//** February 6th, 09'- Updated to v 1.3: 4 //1) Adds Description Panel to optionally show a textual description for each slide 5 //2) In Auto Play mode, you can now set the number of cycles before gallery stops. 6 //3) Inside oninit() and onslide(), keyword "this" now references the current gallery instance 7 8 9 10var simpleGallery_navpanel={ 11 panel: {height:'35px', opacity:1.0, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container 12 images: [ 'images/photoalbum/left.gif', 'images/photoalbum/play.gif', 'images/photoalbum/right.gif', 'images/photoalbum/pause.gif'], //nav panel images (in that order) 13 imageSpacing: {offsetTop:[-3, 0, -3], spacing:1}, //top offset of left, play, and right images, PLUS spacing between the 3 images 14 slideduration: 500 //duration of slide up animation to reveal panel 15} 16 17function simpleGallery(settingarg){ 18 this.setting=settingarg 19 settingarg=null 20 var setting=this.setting 21 setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height) 22 setting.fadeduration=parseInt(setting.fadeduration) 23 setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0 24 setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty 25 setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play 26 setting.currentstep=0 //keep track of # of slides slideshow has gone through 27 setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles 28 setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide) 29 setting.oninit=setting.oninit || function(){} 30 setting.onslide=setting.onslide || function(){} 31 var preloadimages=[], longestdesc=null, longestcaption=null //preload images 32 setting.longestcaption=""; 33 setting.highestImg = 0; 34 var currentHeight = 0; 35 var tempCurrentHeight = 0 ; 36 setting.longestDescHeight = 0 ; 37 38 39 for (var i=0; i<setting.imagearray.length; i++){ 40 preloadimages[i]=new Image() 41 preloadimages[i].src=setting.imagearray[i][0] 42 43 if (setting.imagearray[i][6] && setting.imagearray[i][6].length>setting.longestcaption.length){ 44 setting.longestcaption=setting.imagearray[i][6] 45 } 46 47 currentHeight = parseInt(setting.imagearray[i][2]); 48 49 var tempCaption = $('<div class="gallerycaption"><div style="margin:0 0 4px 0;" class="gallerycaptionbg">'+setting.imagearray[i][3]+'</div><div class="gallerycaptionfg"><div class="gallerycaptiontext"> ' + 50 setting.imagearray[i][6] + ' </div></div></div>'); 51 52 var descriptionHeight = tempCaption.appendTo($('#'+ setting.wrapperid)).height(); 53 tempCaption.remove(); 54 55 tempCurrentHeight = currentHeight + descriptionHeight; 56 57 58 if ( tempCurrentHeight && (tempCurrentHeight > (setting.highestImg + setting.longestDescHeight))){ 59 setting.highestImg = parseInt(setting.imagearray[i][2]); 60 setting.longestDescHeight=descriptionHeight; 61 } 62 63 } 64} 65 66simpleGallery.prototype={ 67 68 start:function(){ 69 var slideshow=this 70 var setting=slideshow.setting 71 72 var slideHeight = simpleGallery.routines.determineSlideShowHeight(setting); 73 74 var closeButtonPosition = (setting.galWidth / 2) + 3 ; 75 76 $('#'+setting.wrapperid + "Holder .gallery-close-button").css({left:closeButtonPosition+"px"}); 77 78 if (setting.showGallery == false) 79 { 80 this.setting.autoplay[0] = false; 81 setting.ispaused = true; 82 } 83 84 setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:setting.bgcolor, overflow:'hidden', width:setting.galWidth, height:slideHeight}).empty() //main gallery DIV 85 if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found 86 alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.") 87 return 88 } 89 setting.$gallerylayers=$('<div class="gallerylayer" style="width: 100%"></div><div class="gallerylayer" style="width: 100%"></div>') //two stacked DIVs to display the actual slide 90 .css({position:'absolute', left:0, top:0}) 91 .appendTo(setting.$wrapperdiv) 92 setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects 93 setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects 94 95 if (setting.longestDescHeight!="") //if at least one slide contains a description (feature is enabled) 96 setting.descdiv=simpleGallery.routines.adddescpanel(setting) 97 98 if (setting.longestcaption!="") //if at least one slide contains a caption (feature is enabled) 99 setting.captiondiv=simpleGallery.routines.addcaptionpanel(setting) 100 101 $(setting.navbuttons).filter('img.navimages').css({opacity:1}) 102 .bind('mouseover mouseout', function(e){ 103 $(this).css({opacity:(e.type=="mouseover")? 1 : 1}) 104 }) 105 .bind('click', function(e){ 106 var keyword=e.target.title.toLowerCase() 107 slideshow.navigate(keyword) //assign behavior to nav images 108 }) 109 $(setting.navbuttons).filter('img.minus-control').css({opacity:1}) 110 .bind('click', function(e){
111 setting.autoplay[1] = (Math.floor(setting.autoplay[1]) -1000) < 3000 ? 3000: Math.floor(setting.autoplay[1]) -1000 112 $(setting.navbuttons).filter('div.delay').html(Math.floor(setting.autoplay[1]/1000) +' sec') 113 114 }) 115 $(setting.navbuttons).filter('img.add-control').css({opacity:1}) 116 .bind('click', function(e){ 117 setting.autoplay[1] = (Math.floor(setting.autoplay[1])+ 1000) >10000 ? 10000: Math.floor(setting.autoplay[1])+ 1000 118 $(setting.navbuttons).filter('div.delay').html(Math.floor(setting.autoplay[1]/1000) +' sec') 119 }) 120 121 $(setting.navbuttons).filter('div.delay').html(Math.floor(setting.autoplay[1]/1000) +' sec') 122 123 //When user chooses to show browsing control all the time 124 if (setting.showControls){ 125 126 if (setting.showGallery == false) 127 { 128 setting.$wrapperdiv.bind('mouseenter mouseleave', function(){slideshow.showhidenavpanel('hide')}) 129 } 130 else 131 { 132 setting.$wrapperdiv.bind('mouseenter mouseleave', function(){slideshow.showhidenavpanel('show')}) 133 slideshow.showhidenavpanel('show'); 134 } 135 136 }else{ 137 setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')}) 138 setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')}) 139 } 140 slideshow.showslide(setting.curimage) //show initial slide 141 setting.oninit.call(slideshow) //trigger oninit() event 142 $(window).bind('unload', function(){ //clean up and persist 143 $(slideshow.setting.navbuttons).unbind() 144 if (slideshow.setting.persist) //remember last shown image's index 145 simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage) 146 jQuery.each(slideshow.setting, function(k){ 147 if (slideshow.setting[k] instanceof Array){ 148 for (var i=0; i<slideshow.setting[k].length; i++){ 149 if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div 150 slideshow.setting[k][i].innerHTML=null 151 slideshow.setting[k][i]=null 152 } 153 } 154 if (slideshow.setting[k].innerHTML) //catch gallerydesctext div 155 slideshow.setting[k].innerHTML=null 156 slideshow.setting[k]=null 157 }) 158 slideshow=slideshow.setting=null 159 }) 160 }, 161 162 navigate:function(keyword){ 163 clearTimeout(this.setting.playtimer); 164 this.setting.totalsteps=100000; //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number 165 if (!isNaN(parseInt(keyword))){ 166 167 this.showslide(parseInt(keyword)); 168 169 /*for floating popup, reduce accomodate the size of the popup*/ 170 if(!(this.setting.showGallery)){ 171 172 /*10 image margin top + 8px image margin bottom + 4px between caption and description */ 173 var slideHeight = 22; 174 175 //caption height 176 slideHeight += $('.gallerycaptiontext div').height(); 177 178 //image height 179 slideHeight += parseInt(this.setting.imagearray[keyword][2]); 180 181 $('#'+this.setting.wrapperid).css({height:slideHeight}); 182 } 183 184 } 185 else if (/(prev)|(next)/i.test(keyword)){ 186 this.showslide(keyword.toLowerCase()) 187 } 188 else{ //if play|pause button 189 var slideshow=this 190 var $playbutton=$(this.setting.navbuttons).eq(1) 191 if (!this.setting.ispaused){ //if pause Gallery 192 this.setting.autoplay[0]=false 193 $playbutton.attr({title:'Play', src:this.setting.relpath + simpleGallery_navpanel.images[1]}) 194 } 195 else if (this.setting.ispaused){ //if play Gallery 196 this.setting.autoplay[0]=true 197 this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1]) 198 $playbutton.attr({title:'Pause', src:this.setting.relpath + simpleGallery_navpanel.images[3]}) 199 } 200 slideshow.setting.ispaused=!slideshow.setting.ispaused 201 } 202 }, 203 204 showslide:function(keyword){ 205 var slideshow=this 206 var setting=slideshow.setting 207 var totalimages=setting.imagearray.length 208 var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0) 209 : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1) 210 : Math.min(keyword, totalimages-1) 211 setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex]) 212 setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}
212) //background layer becomes foreground 213 .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete: 214 clearTimeout(setting.playtimer) 215 setting.gallerylayers[setting.bglayer].innerHTML=''//null -ktg 040309 //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below) 216 try{ 217 setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage) 218 }catch(e){ 219 alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e) 220 } 221 setting.currentstep+=1 222 if (setting.autoplay[0]){ 223 if (setting.currentstep<=setting.totalsteps) 224 setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1]) 225 else 226 slideshow.navigate("play/pause") 227 } 228 }) //end callback function 229 setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background 230 setting.fglayer=setting.bglayer 231 setting.bglayer=(setting.bglayer==0)? 1 : 0 232 setting.curimage=imgindex 233 setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length 234 if (setting.imagearray[imgindex][3]){ //if this slide contains a description 235 if (setting.$descpanel) 236 { 237 setting.$descpanel.css({visibility:'visible'}) 238 } 239 //setting.descdiv.innerHTML=setting.imagearray[imgindex][3] 240 } 241 else if (setting.longestDescHeight!=""){ //if at least one slide contains a description (feature is enabled) 242 setting.descdiv.innerHTML=''//null -ktg 040309 243 setting.$descpanel.css({visibility:'hidden'}) 244 245 } 246 247 if (setting.imagearray[imgindex][6]){ //if this slide contains a caption 248 setting.$captionpanel.css({visibility:'visible'}) 249 var imgHeight = parseInt(setting.imagearray[imgindex][2]) + 16; //10 image top margin + 6 image bottom margin - setting.highestImg ; 250 setting.captiondiv.innerHTML='<div style="width:100%;position: absolute;top: '+imgHeight+'px ; left:0px;"/> ' + 251 '<div class="gallerycaptiontitle" style="position: relative; margin: 0px 0 4px 0;" >' + setting.imagearray[imgindex][3] + '</div> ' + 252 '<div class="gallerycaptiondescription" style="position: relative;">' + setting.imagearray[imgindex][6] + '</div>' + 253 '</div>' 254 } 255 else if (setting.longestcaption!=""){ //if at least one slide contains a caption (feature is enabled) 256 setting.captiondiv.innerHTML=''//null -ktg 040309 257 setting.$captionpanel.css({visibility:'hidden'}) 258 } 259 }, 260 261 showhidenavpanel:function(state){ 262 var setting=this.setting 263 264 var slideHeight = simpleGallery.routines.determineSlideShowHeight(setting); 265 266 var endpoint=(state=="show")? slideHeight - setting.panelheight : slideHeight 267 setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 268 if (setting.longestDescHeight!=""){ //if at least one slide contains a description (feature is enabled) 269 this.showhidedescpanel(state) 270 } 271 if (setting.longestcaption!=""){ //if at least one slide contains a caption (feature is enabled) 272 this.showhidecaptionpanel(state) 273 } 274 }, 275 276 showhidedescpanel:function(state){ 277 var setting=this.setting 278 var endpoint=(state=="show")? 0 : -setting.descpanelheight; 279 setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 280 }, 281 282 showhidecaptionpanel:function(state){ 283 if(state == "show"){ 284 var setting=this.setting; 285 if(!setting.captionpanel_initialized){ 286 //var endpoint=(state=="show")? -setting.captionpanelheight : -setting.captionpanelheight; 287 //setting.$captionpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration); 288 setting.captionpanel_initialized = "true"; 289 } 290 setting.$captionpanel.css({visibility:'visible'}); 291 } 292 } 293} 294 295simpleGallery.routines={ 296 297 getSlideHTML:function(imgelement){ 298 return '<img src="'+imgelement[0] + '"' + imgelement[4] + ' style="border-width:0;' + imgelement[5] + '" />'; //return HTML for this layer 299 }, 300 301 addnavpanel:function(setting){ 302 var slideHeight = this.determineSlideShowHeight(setting); 303 304 var interfaceHTML='' 305 for (var i=0; i<3; i++){ 306 var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0) 307 var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next') 308 var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i] 309 interfaceHTML+='<img class="navimages" title="' + title + '" src="' + setting.relpath + imagesrc +'" style="'+imgstyle+'" /> ' 310 } 311 interfaceHTML+='<img class="add-control" title="add" style="border: 0pt none ; position: absolute; right: 0px; cursor: pointer; margin-top: 5px; margin-right: 1px;" src="' + setting.relpath + 'images/photoalbum/plus.gif"/>' 312 interfaceHTML+='<div class="delay" style= "position: absolute; top: 0px; margin-top: 9px; margin-right: 4px; right: 11px;" ></div>' 313 interfaceHTML+='<img class="minus-control" title="minus" style="border: 0pt none ; position: absolute; cursor: pointer; margin-top: 5px; margin-right: 3px; right: 55px;" src="' + setting.relpath + 'images/photoalbum/minus.gif"/>' 314 interfaceHTML+='<div class="gallerystatus" style="position: absolute; top: 0px; left: 0px; margin-top: 10px; margin-left: 4px; float: left;">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>' 315 316 setting.$navpanel=$('<div class="navpanellayer"></div>') 317 .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, bottom:0, font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'}); 318 319 if(setting.showGallery){ 320 //append it when is not popup 321 setting.$navpanel.appendTo(setting.$wrapperdiv); 322 } 323 324 var navPanelBg = $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs 325 .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'}) 326 .eq(0).css({background:'#B5B2B5', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div 327 .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div 328 .appendTo(setting.$navpanel); 329 330 return setting.$navpanel.find('img.navimages, div.gallerystatus, img.minus-control, img.add-control, div.delay').get() //return 4 nav related images and DIVs as DOM objects, Also speed control 331 }, 332 333 adddescpanel:function(setting){ 334 var slideHeight = this.determineSlideShowHeight(setting); 335 var descFontSize = Math.floor(slideHeight/25); 336 if(descFontSize > 14){ 337 descFontSize = 14; 338 } 339 setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>') 340 .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'}) 341 .find('div').css({position:'absolute', left:0, top:0, width:'100%'}) 342 .eq(0).css({background:'#B5B2B5', opacity:simpleGallery_navpanel.panel.opacity, display:'none'}).end() //"gallerydescbg" div
343 .eq(1).css({color:setting.fontcolor, fontFamily:setting.fontfamily, fontWeight:'bold', fontSize:descFontSize}).end() //"gallerydescfg" div 344 .eq(2).html("").end().end() 345 .appendTo(setting.$wrapperdiv) 346 var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext') 347 setting.descpanelheight=$gallerydesctext.outerHeight() 348 setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'}) 349 return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object 350 }, 351 352 addcaptionpanel:function(setting){ 353 var slideHeight = simpleGallery.routines.determineSlideShowHeight(setting); 354 355 356 357 setting.$captionpanel=$('<div class="gallerycaption"><div class="gallerycaptionbg"></div><div class="gallerycaptionfg"><div class="gallerycaptiontext"></div></div></div>') 358 .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1010'}) 359 .find('div').css({position:'absolute', left:0, top:0, width:'100%'}) 360 .eq(0).css({opacity:simpleGallery_navpanel.panel.opacity, display:'none'}).end() //"gallerycaptionbg" div 361 .eq(1).css({color:setting.fontcolor, fontFamily:setting.fontfamily, fontWeight:'bold'/*, fontSize:captionFontSize*/}).end() //"gallerycaptionfg" div 362 .eq(2).html("").end().end() 363 .appendTo(setting.$wrapperdiv) 364 var $gallerycaptiontext=setting.$captionpanel.find('div.gallerycaptiontext') 365 $gallerycaptiontext.css({top:0,marginTop:1,marginBottom:2, left:0}); 366 367 setting.captionpanelheight=$gallerycaptiontext.outerHeight(); 368 369 370 setting.$captionpanel.find('div.gallerycaptionbg').css({top:0}); 371 setting.$captionpanel.find('div.gallerycaptionfg').css({top:0}); 372 setting.$captionpanel.css({top:0, height:setting.captionpanelheight}).find('div').css({height:'100%'}) 373 374 return setting.$captionpanel.find('div.gallerycaptiontext').get(0) //return gallery caption DIV as a DOM object 375 }, 376 377 getCookie:function(Name){ 378 var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair 379 if (document.cookie.match(re)) //if cookie found 380 return document.cookie.match(re)[0].split("=")[1] //return its value 381 return null 382 }, 383 384 setCookie:function(name, value){ 385 document.cookie = name+"=" + value + ";path=/" 386 }, 387 388 /** 389 * return the best height for the slide show. 390 * */ 391 determineSlideShowHeight:function(setting){ 392 return setting.highestImg + setting.longestDescHeight + 68 /*10 image margin top + 8px image margin bottom + 4px between caption and description + 36 navbar height + 10 navbar margin */; 393 394 } 395 396}
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.