Posted By

dottDesign on 06/26/10


Tagged

javascript textmate html slideshow


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

byrdka


Javascript Slideshow


 / Published in: Other
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html lang="en">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>Javascript Slideshow</title>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  9.  
  10. <script type="text/javascript">
  11. /* Ultimate Fade-in slideshow (v2.4)
  12. * Last updated: May 24th, 2010. This notice must stay intact for usage
  13. * Author: Dynamic Drive at http://www.dynamicdrive.com/
  14. * Visit http://www.dynamicdrive.com/ for full source code
  15. */
  16.  
  17. //Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
  18. //May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
  19.  
  20. var fadeSlideShow_descpanel={
  21. controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
  22. fontStyle: 'normal 11px Verdana', //font style for text descriptions
  23. slidespeed: 200 //speed of description panel animation (in millisec)
  24. }
  25.  
  26. //No need to edit beyond here...
  27.  
  28. jQuery.noConflict()
  29.  
  30. function fadeSlideShow(settingarg){
  31. this.setting=settingarg
  32. settingarg=null
  33. var setting=this.setting
  34. setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
  35. setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
  36. setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
  37. setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
  38. setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
  39. setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
  40. setting.oninit=setting.oninit || function(){}
  41. setting.onslide=setting.onslide || function(){}
  42. if (setting.displaymode.randomize) //randomly shuffle order of images?
  43. setting.imagearray.sort(function() {return 0.5 - Math.random()})
  44. var preloadimages=[] //preload images
  45. setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
  46. for (var i=0; i<setting.imagearray.length; i++){ //preload images
  47. preloadimages[i]=new Image()
  48. preloadimages[i].src=setting.imagearray[i][0]
  49. if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
  50. setting.longestdesc=setting.imagearray[i][3]
  51. }
  52. var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
  53. 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" />' : ''
  54. var slideshow=this
  55. jQuery(document).ready(function($){ //fire on DOM ready
  56. var setting=slideshow.setting
  57. var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
  58. 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
  59. if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
  60. alert("Error: DIV with ID ""+setting.wrapperid+"" not found on page.")
  61. return
  62. }
  63. setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
  64. .css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
  65. .appendTo(setting.$wrapperdiv)
  66. var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
  67. .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
  68. .appendTo(setting.$wrapperdiv)
  69. 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
  70. 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
  71. fadeSlideShow.routines.adddescpanel($, setting)
  72. if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
  73. setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
  74. setting.$descinner.click(function(e){ //asign click behavior to "close" icon
  75. if (e.target.className=="close"){
  76. slideshow.showhidedescpanel('hide')
  77. }
  78. })
  79. setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
  80. slideshow.showhidedescpanel('show')
  81. $(this).css({visibility:'hidden'})
  82. })
  83. }
  84. else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
  85. setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
  86. setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
  87. }
  88. }
  89. setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
  90. setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
  91. if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
  92. $loadingimg.hide()
  93. slideshow.paginateinit($)
  94. slideshow.showslide(setting.curimage)
  95. }
  96. else{ //initialize slideshow when first image has fully loaded
  97. $loadingimg.hide()
  98. slideshow.paginateinit($)
  99. $curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
  100. }
  101. setting.oninit.call(slideshow) //trigger oninit() event
  102. $(window).bind('unload', function(){ //clean up and persist
  103. if (slideshow.setting.persist) //remember last shown image's index
  104. fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
  105. jQuery.each(slideshow.setting, function(k){
  106. if (slideshow.setting[k] instanceof Array){
  107. for (var i=0; i<slideshow.setting[k].length; i++){
  108. if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
  109. slideshow.setting[k][i].innerHTML=null
  110. slideshow.setting[k][i]=null
  111. }
  112. }
  113. })
  114. slideshow=slideshow.setting=null
  115. })
  116. })
  117. }
  118.  
  119. fadeSlideShow.prototype={
  120.  
  121. navigate:function(keyword){
  122. var setting=this.setting
  123. clearTimeout(setting.playtimer)
  124. if (setting.displaymode.type=="auto"){ //in auto mode
  125. setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on
  126. setting.displaymode.wraparound=true //set wraparound option to true
  127. }
  128. if (!isNaN(parseInt(keyword))){ //go to specific slide?
  129. this.showslide(parseInt(keyword))
  130. }
  131. else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
  132. this.showslide(keyword.toLowerCase())
  133. }
  134. },
  135.  
  136. showslide:function(keyword){
  137. var slideshow=this
  138. var setting=slideshow.setting
  139. if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
  140. setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
  141. return
  142. }
  143. var totalimages=setting.imagearray.length
  144. var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
  145. : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
  146. : Math.min(keyword, totalimages-1)
  147. var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
  148. var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
  149. $slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
  150. $slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
  151. if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
  152. clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
  153. slideshow.showhidedescpanel('hide', 0) //and hide it immediately
  154. }
  155. setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
  156. .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
  157. clearTimeout(setting.playtimer)
  158. try{
  159. setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
  160. }catch(e){
  161. alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the "onslide" event: "+e)
  162. }
  163. if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
  164. slideshow.showhidedescpanel('show')
  165. setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
  166. }
  167. setting.currentstep+=1
  168. if (setting.displaymode.type=="auto"){
  169. if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
  170. setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
  171. }
  172. }) //end callback function
  173. setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
  174. setting.fglayer=setting.bglayer
  175. setting.bglayer=(setting.bglayer==0)? 1 : 0
  176. setting.curimage=imgindex
  177. if (setting.$descpanel){
  178. setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
  179. if (setting.imagearray[imgindex][3]) //if this slide contains a description
  180. setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
  181. }
  182. if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
  183. this.paginatecontrol()
  184. }
  185. if (setting.$status) //if status container defined
  186. setting.$status.html(setting.curimage+1 + "/" + totalimages)
  187. },
  188.  
  189. showhidedescpanel:function(state, animateduration){
  190. var setting=this.setting
  191. var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
  192. setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
  193. if (setting.descreveal=="always" && state=="hide")
  194. setting.$restorebutton.css({visibility:'visible'}) //show restore button
  195. })
  196. },
  197.  
  198. paginateinit:function($){
  199. var slideshow=this
  200. var setting=this.setting
  201. if (setting.togglerid){ //if toggler div defined
  202. setting.$togglerdiv=$("#"+setting.togglerid)
  203. setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
  204. setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
  205. setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
  206. var $target=$(this)
  207. slideshow.navigate($target.data('action'))
  208. e.preventDefault()
  209. })
  210. setting.$status=setting.$togglerdiv.find('.status')
  211. }
  212. },
  213.  
  214. paginatecontrol:function(){
  215. var setting=this.setting
  216. setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev')
  217. setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next')
  218. if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link
  219. setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1})
  220. setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1})
  221. }
  222. }
  223.  
  224.  
  225. }
  226.  
  227. fadeSlideShow.routines={
  228.  
  229. getSlideHTML:function(imgelement){
  230. var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">n' : '' //hyperlink slide?
  231. layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />n'
  232. layerHTML+=(imgelement[1])? '</a>n' : ''
  233. return layerHTML //return HTML for this layer
  234. },
  235.  
  236. getFullHTML:function(imagearray){
  237. var preloadhtml=''
  238. for (var i=0; i<imagearray.length; i++)
  239. preloadhtml+=this.getSlideHTML(imagearray[i])
  240. return preloadhtml
  241. },
  242.  
  243. adddescpanel:function($, setting){
  244. setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
  245. .css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
  246. .appendTo(setting.$wrapperdiv)
  247. $('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
  248. .css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
  249. .eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
  250. .eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
  251. .appendTo(setting.$descpanel)
  252. setting.$descinner=setting.$descpanel.find('div.descpanelfg')
  253. setting.panelheight=setting.$descinner.outerHeight()
  254. setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
  255. if (setting.descreveal=="always"){ //create restore button
  256. 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" />')
  257. .appendTo(setting.$wrapperdiv)
  258.  
  259.  
  260. }
  261. },
  262.  
  263.  
  264. getCookie:function(Name){
  265. var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
  266. if (document.cookie.match(re)) //if cookie found
  267. return document.cookie.match(re)[0].split("=")[1] //return its value
  268. return null
  269. },
  270.  
  271. setCookie:function(name, value){
  272. document.cookie = name+"=" + value + ";path=/"
  273. }
  274. }
  275.  
  276. </script>
  277.  
  278. <script type="text/javascript">
  279.  
  280. var mygallery=new fadeSlideShow({
  281. wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
  282. dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
  283. imagearray: [
  284. ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
  285. ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
  286. ["http://i30.tinypic.com/531q3n.jpg"],
  287. ["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
  288. ],
  289. displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
  290. persist: false, //remember last viewed slide and recall within same session?
  291. fadeduration: 500, //transition duration (milliseconds)
  292. descreveal: "ondemand",
  293. togglerid: ""
  294. })
  295.  
  296.  
  297. var mygallery2=new fadeSlideShow({
  298. wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
  299. dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
  300. imagearray: [
  301. ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
  302. ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
  303. ["http://i30.tinypic.com/531q3n.jpg"],
  304. ["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
  305. ],
  306. displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
  307. persist: false, //remember last viewed slide and recall within same session?
  308. fadeduration: 500, //transition duration (milliseconds)
  309. descreveal: "always",
  310. togglerid: "fadeshow2toggler"
  311. })
  312.  
  313. </script>
  314.  
  315. <!-- Date: 2010-06-25 -->
  316. </head>
  317. <body>
  318. <div id="fadeshow1"></div>
  319.  
  320. <br />
  321.  
  322. <div id="fadeshow2"></div>
  323.  
  324. <div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
  325. <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
  326. </div>
  327. <div id="slideshowtoggler">
  328. <a href="#" class="prev"><img src="left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="right.png" style="border-width:0" /></a>
  329. </div>
  330. </body>
  331. </html>

Report this snippet  

You need to login to post a comment.