/* Ultimate Fade-in slideshow (v2.6.1)
* Last updated: March 7th, 2016. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
//June 22nd, 14' (v2.6): 1) Slideshow now responsive, supporting percentage values in the dimensions[w, h] option. 2) Swipe to navigate added on both desktop and mobile devices.
//June 22nd, 14' (v2.6.1): Enabled vertical swiping inside slideshow to scroll page
//Unofficial Updates: (three following March 6 ,2016 - dates below mark their initial coding for version 2.4)
//Sept 2nd, '11 Update for loading image bug see: http://www.dynamicdrive.com/forums/showthread.php?p=260188#post260188
//Sept 4rth '11 Update for initial mouseover bug in some browsers - first image wouldn't show up if mouse was over the show as page loaded
//Sept 13th '11 Update for missing first image bug in IE - added onerror to onload for routine that tests first image before getting underway
//March 7, 2016 Update to prevent taps in most tap capable browsers from activating mouseover pause. Android sometimes still has this problem
// adding this meta tag may help with that:
var fadeSlideShow_descpanel={
controls: [['x.png', 7, 7], ['restore.png', 10, 11], ['loading.gif', 54, 55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}
//No need to edit beyond here...
jQuery.noConflict()
function fadeSlideShow(settingarg){
this.setting=settingarg
settingarg=null
var setting=this.setting
setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
setting.isflexible = /\%/.test(setting.dimensions[0]) || /\%/.test(setting.dimensions[1]) // test if one of slideshow dimension sides is a percentage value
setting.oninit=setting.oninit || function(){}
setting.onslide=setting.onslide || function(){}
if (setting.displaymode.randomize) //randomly shuffle order of images?
setting.imagearray.sort(function() {return 0.5 - Math.random()})
var preloadimages=[] //preload images
setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
for (var i=0; isetting.longestdesc.length)
setting.longestdesc=setting.imagearray[i][3]
}
var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
setting.closebutton=(setting.descreveal=="always")? '' : ''
var slideshow=this
jQuery(document).ready(function($){ //fire on DOM ready
var setting=slideshow.setting
var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
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
setting.dimensions = [ // get dimensions of slideshow in pixels
setting.$wrapperdiv.outerWidth(),
setting.$wrapperdiv.outerHeight()
]
if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
return
}
setting.$gallerylayers=$('') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
.appendTo(setting.$wrapperdiv)
var $loadingimg=$('')
.css({zIndex:1000,left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]/2}) //center loading gif
.appendTo(setting.$wrapperdiv)
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
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
fadeSlideShow.routines.adddescpanel($, setting)
if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
setting.$descinner.click(function(e){ //asign click behavior to "close" icon
if (e.target.className=="close"){
slideshow.showhidedescpanel('hide')
}
})
setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
slideshow.showhidedescpanel('show')
$(this).css({visibility:'hidden'})
})
}
else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
}
}
setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
if (setting.$wrapperdiv.swipe){ // if swipe enabled (swipe function exists)
var swipeOptions={ // swipe object variables
triggerOnTouchEnd : true,
triggerOnTouchLeave : true,
threshold: 75,
allowPageScroll: 'vertical',
excludedElements:[]
}
swipeOptions.swipeStatus = function(event, phase, direction, distance){
var evtparent = event.target.parentNode // check parent element of target image
if (phase == 'start' && evtparent.tagName == 'A'){ // cancel A action when finger makes contact with element
evtparent.onclick = function(){
return false
}
}
if (phase == 'cancel' && evtparent.tagName == 'A'){ // if swipe action canceled (so no proper swipe), enable A action
evtparent.onclick = function(){
return true
}
}
if (phase == 'end'){
var navkeyword = /(right)/i.test(direction)? 'prev' : 'next'
if ( /(left)|(right)/i.test(direction) )
slideshow.navigate(navkeyword)
}
}
setting.$wrapperdiv.swipe(swipeOptions)
} // end setting.$wrapperdiv.swipe check
slideshow.paginateinit($);
function loaded_or_error(){
$loadingimg.hide()
setting.$wrapperdiv.bind('touchstart mouseenter', function(e){ //pause slideshow mouseover
setting.ismouseover = true;
if(e.type === 'touchstart'){
clearTimeout(setting.ismouseovertimer);
setting.ismouseovertimer = setTimeout(function(){setting.ismouseover = false;}, 600);
}
});
slideshow.showslide(setting.curimage)
}
if ($curimage.get(0).complete){loaded_or_error(); //accounf for IE firing image.onload too soon for cached and small images
} else { //initialize slideshow when first image has fully loaded or errors out
$(new Image()).bind('load error', loaded_or_error).attr('src', $curimage.attr('src'));
}
setting.oninit.call(slideshow) //trigger oninit() event
$(window).bind('resize', function(){ // when window is resized, reposition description panel and images
var slideshowdimensions = [
setting.$wrapperdiv.outerWidth(),
setting.$wrapperdiv.outerHeight()
]
if (slideshowdimensions[0] == setting.dimensions[0] && slideshowdimensions[1] == setting.dimensions[1]){ // if no change in image dimensions, just exit
return
}
setting.dimensions = slideshowdimensions // refresh image dimensions data
if (setting.$descpanel && setting.$descpanel.length == 1){ // if description panel enabled for slideshow
setting.$descpanel
.find('div')
.css({width:setting.$descpanel.width()-8})
.eq(2) // reference hidden description panel (used to calculate height of longest message
.css({height:'auto', background:'blue'}).html(setting.closebutton + setting.longestdesc).end() // populate hidden DIV with longest message
setting.panelheight = setting.$descpanel.find('div').eq(2).outerHeight() // then get height of that DIV
setting.$descpanel.css({height: setting.panelheight}) // reset main description panel height
if (!setting.$restorebutton || (setting.$restorebutton && setting.$restorebutton.css('visibility') == 'hidden')){ // if panel doesn't contain restore button (meaning it should always be repositioned onresize), or there is restore button and it's currenty hidden (meaning panel is currently not minimized)
setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
}
}
var $slideimage=setting.$gallerylayers.eq(setting.fglayer).find('img').eq(setting.curimage)
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]0 && imgdimensions[1]0? setting.curimage-1 : totalimages-1)
: Math.min(keyword, totalimages-1)
var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]0 && imgdimensions[1]\n' : '' //hyperlink slide?
layerHTML+='\n'
layerHTML+=(imgelement[1])? '\n' : ''
return layerHTML //return HTML for this layer
},
getFullHTML:function(imagearray){
var preloadhtml=''
for (var i=0; i')
.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
.appendTo(setting.$wrapperdiv)
$('') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
.eq(2).css({visibility: 'hidden', zIndex: -1}).html(setting.closebutton + setting.longestdesc).end() //"descpanelhidden" hidden div to re-get height of panel after populating it with text
.appendTo(setting.$descpanel)
setting.$descinner=setting.$descpanel.find('div.descpanelfg')
setting.panelheight=setting.$descinner.outerHeight()
setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
if (setting.descreveal=="always"){ //create restore button
setting.$restorebutton=$('')
.appendTo(setting.$wrapperdiv)
}
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
}