Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Slideshow with captions

  1. #1
    Join Date
    Sep 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slideshow with captions

    I'm using this fade-in slideshow in my website:

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    I'd like to add a different caption to each image. I've tried to search the forums for an answer but didn't find one. Anyone can help me? The caption must be different for each imagen sliding. Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Hot off the presses, identical in function but uses captions (see in script comments for configuration):
    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Fade-in image slideshow script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use.
    * Modified here by jscheuer1 in http://www.dynamicdrive.com/forums to use captions
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
    ***********************************************/
    
    var slideshow_width='140px' //SET IMAGE WIDTH
    var slideshow_height='225px' //SET IMAGE HEIGHT
    var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
    
    var fadeimages=new Array()
    //SET 1) IMAGE PATHS, 2) optional link, 3), optional link target, 4) optional caption:
    fadeimages[0]=["photo1.jpg", "", "", "Kissing Fools"] //plain image syntax w/caption
    fadeimages[1]=["photo2.jpg", "http://www.google.com", "", "Seated Woman"] //image with link syntax w/caption
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "Woman with Parasol"] //image with link and target syntax w/caption
    fadeimages[3]=["photo4.jpg", "", "", ""] //plain image syntax 
    ////NO need to edit beyond here/////////////
    
    var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p][0]
    }
    
    var ie4=document.all&&!window.opera? document.all : 0
    var dom=document.getElementById&&!window.opera? document.getElementById : 0
    
    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'"><br>')
    if(document.all||document.getElementById){
    var text=(fadeimages[0][3]!=='')? fadeimages[0][3] : '&nbsp;'
    document.write('<br><div id="caploadarea" style="width:'+slideshow_width+';text-align:center;">'+text+'</div>')
    }
    
    var curpos=10
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1
    var flag=0
    
    function fadepic(){
    if (curpos<100){
    curpos+=10
    if (tempobj.filters&&tempobj.filters.alpha)
    tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
    tempobj.style.MozOpacity=curpos/101
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? ie4[nextcanvas] : document.getElementById(nextcanvas)
    tempobj.innerHTML=insertimage(nextimageindex)
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    var tempobj2=ie4? ie4[nextcanvas] : document.getElementById(nextcanvas)
    tempobj2.style.visibility="hidden"
    setTimeout("rotateimage()",pause)
    }
    }
    
    function insertimage(i){
    var capSpot=ie4? ie4['caploadarea'] : document.getElementById('caploadarea')
    var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
    tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
    tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
    if (ie4||dom){
    var capDex=(i-1<0)? fadeimages.length-1 : i-1
    if (i||flag){
    flag=1
    capSpot.innerHTML=fadeimages[capDex][3]
    }
    }
    return tempcontainer
    }
    
    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? ie4[curcanvas] : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    tempobj.style.visibility="visible"
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else{
    var capSpot=document.all? document.all['caploadarea'] : document.getElementById? document.getElementById('caploadarea') : 0
    document.images.defaultslide.src=fadeimages[curimageindex][0]
    if (capSpot&&capSpot.innerHTML)
    capSpot.innerHTML=(fadeimages[curimageindex][3]!=='')? fadeimages[curimageindex][3] : '&nbsp;'
    }
    curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    }
    
    function resetit(what){
    curpos=10
    var crossobj=ie4? ie4[what] : document.getElementById(what)
    if (crossobj.filters&&crossobj.filters.alpha)
    crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/101
    }
    
    function startit(){
    var crossobj=ie4? ie4[curcanvas] : document.getElementById(curcanvas)
    crossobj.innerHTML=insertimage(curimageindex)
    rotateimage()
    }
    
    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)
    
    </script>
    Last edited by jscheuer1; 09-18-2005 at 06:25 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I love this script. I was wondering if there was a way to have the link targets open up in a new browser window?

    Thanks for any advice.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This script already has that option:

    Code:
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "Woman with Parasol"] //image with link and target syntax w/caption
    However, the script has been upgraded and modified since this thread was originally posted. The upgraded script is here:

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    To add captions to that version, see here:

    http://www.dynamicdrive.com/forums/s...87&postcount=4

    Or, better yet, use these modifications with my own personal mod of this upgraded script which fades well in more browsers:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>U-Fade w/captions</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    /***********************************************
    * Ultimate Fade-In Slideshow (v1.5):  Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    * Updated for better Safari and Opera 9+ Compliance plus optional captions
    * by jscheuer1 in http://www.dynamicdrive.com/forums
    ***********************************************/
     
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", "", "cap1"] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", "cap2"] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "cap3"] //image with link and target syntax
     
    var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
     
    var fadebgcolor="white"
     
    ////NO need to edit beyond here/////////////
     
    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers
     
    var dom=(document.getElementById) //modern dom browsers
    var iebrowser=document.all
     
    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
    this.pausecheck=pause
    this.mouseovercheck=0
    this.delay=delay
    this.degree=10 //initial opacity degree (10%)
    this.curimageindex=0
    this.nextimageindex=1
    fadearray[fadearray.length]=this
    this.slideshowid=fadearray.length-1
    this.canvasbase="canvas"+this.slideshowid
    this.curcanvas=this.canvasbase+"_0"
    this.theimages=theimages
    if (typeof displayorder!="undefined")
    this.theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
    this.imageborder=parseInt(borderwidth)
    this.postimages=new Array() //preload images
    for (p=0;p<theimages.length;p++){
    this.postimages[p]=new Image()
    this.postimages[p].src=this.theimages[p][0]
    }
     
    var fadewidth=fadewidth+this.imageborder*2
    var fadeheight=fadeheight+this.imageborder*2
     
    if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
    else
    document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
     
    if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    this.startit()
    else{
    this.curimageindex++
    setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
    }
    }
    
    function fadepic(obj){
    if (obj.degree<100){
    obj.degree+=10
    if (obj.tempobj.filters&&obj.tempobj.filters[0]){
    if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
    obj.tempobj.filters[0].opacity=obj.degree
    else //else if IE5.5-
    obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
    }
    else if (obj.tempobj.style.MozOpacity)
    obj.tempobj.style.MozOpacity=obj.degree/101
    else if (obj.tempobj.style.KhtmlOpacity)
    obj.tempobj.style.KhtmlOpacity=obj.degree/100
    else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
    obj.tempobj.style.opacity=obj.degree/101
    }
    else{
    clearInterval(fadeclear[obj.slideshowid])
    obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
    obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    obj.populateslide(obj.tempobj, obj.nextimageindex)
    obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
    setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
    }
    }
     
    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    slideHTML+='<img src="'+this.postimages[picindex].src+'" '+(this.theimages[picindex][3]? 'title="'+this.theimages[picindex][3]+'" ' : '')+'border="'+this.imageborder+'px">'
    if (this.theimages[picindex][3])
    slideHTML+='<div align="center">'+this.theimages[picindex][3]+'</div>'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
     
     
    fadeshow.prototype.rotateimage=function(){
    if (this.pausecheck==1) //if pause onMouseover enabled, cache object
    var cacheobj=this
    if (this.mouseovercheck==1)
    setTimeout(function(){cacheobj.rotateimage()}, 100)
    else if (iebrowser&&dom||dom){
    this.resetit()
    var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    crossobj.style.zIndex++
    fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
    this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
    }
    else{
    var ns4imgobj=document.images['defaultslide'+this.slideshowid]
    ns4imgobj.src=this.postimages[this.curimageindex].src
    }
    this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
    }
     
    fadeshow.prototype.resetit=function(){
    this.degree=10
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    if (crossobj.filters&&crossobj.filters[0]){
    if (typeof crossobj.filters[0].opacity=="number") //if IE6+
    crossobj.filters(0).opacity=this.degree
    else //else if IE5.5-
    crossobj.style.filter="alpha(opacity="+this.degree+")"
    }
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=this.degree/101
    else if (crossobj.style.KhtmlOpacity)
    crossobj.style.KhtmlOpacity=this.degree/100
    else if (crossobj.style.opacity&&!crossobj.filters)
    crossobj.style.opacity=this.degree/101
    }
     
     
    fadeshow.prototype.startit=function(){
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    this.populateslide(crossobj, this.curimageindex)
    if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    var cacheobj=this
    var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
    crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
    crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    }
    this.rotateimage()
    }
     
    </script>
    </head>
    <body>
    <script type="text/javascript">
    new fadeshow(fadeimages, 140, 245, 0, 3000, 1, "R")
    
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Awesome, thanks so much!

    Ok, just one more.

    Is there a way to randomize the slides, so the same slide isn't always appearing first when the page is loaded?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Um, it already does that too, as well as has the capability to create more than one show on a given page. The mod written out in my last post, though different to allow for captions and more cross browser compliance, is used in the same manner as the upgraded script featured in the DD library. A given show is called from the body:

    Code:
    <script type="text/javascript">
    new fadeshow(fadeimages, 140, 245, 0, 3000, 1, "R")
    
    </script>
    The red part makes it random per load. For a show that doesn't appear random per load (in case you are wondering), just leave off the red parts in your call. Also, I should mention that if using just one show, you do not need the second array:

    Code:
    var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for being so helpful. As I'm sure you've noticed, I'm new at this.

    Everything is working great, except for the new window thing. I want the new window to refresh with each click, instead of a separate window opening with each click. This works in IE, but I've noticed it varies depending on the browser.

    Thanks again.

  8. #8
    Join Date
    Jun 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is a great script, and I use it (the original) on a couple of pages. I am assuming that this new version will also support the changes I made to control the fade/transition speed as well as the time between slides?
    ======================================
    (line 56)obj.degree+=2 //changed from 10 on June2506 GS
    (line 95)fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",100) //last # changed from 50 GS
    ======================================


    I found that these changes gave it more of a "flash" look as opposed to a plain slideshow.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by cheryl View Post
    Thanks for being so helpful. As I'm sure you've noticed, I'm new at this.

    Everything is working great, except for the new window thing. I want the new window to refresh with each click, instead of a separate window opening with each click. This works in IE, but I've noticed it varies depending on the browser.

    Thanks again.
    That is the way that the target attribute works. If you want it to consistently open to the same window in all browsers, find this function:

    Code:
    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    slideHTML+='<img src="'+this.postimages[picindex].src+'" '+(this.theimages[picindex][3]? 'title="'+this.theimages[picindex][3]+'" ' : '')+'border="'+this.imageborder+'px">'
    if (this.theimages[picindex][3])
    slideHTML+='<div align="center">'+this.theimages[picindex][3]+'</div>'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
    Replace it with this one:

    Code:
    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" onclick="art'+this.slideshowid+'=window.open(this.href,\'bob'+this.slideshowid+'\');art'+this.slideshowid+'.focus();return false;">'
    slideHTML+='<img src="'+this.postimages[picindex].src+'" '+(this.theimages[picindex][3]? 'title="'+this.theimages[picindex][3]+'" ' : '')+'border="'+this.imageborder+'px">'
    if (this.theimages[picindex][3])
    slideHTML+='<div align="center">'+this.theimages[picindex][3]+'</div>'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
    This will cause all links to open in the same 'new' window. If you want this behavior to be optional, that can be worked out, so let me know.
    Last edited by jscheuer1; 12-01-2006 at 07:37 AM. Reason: Fix minor typo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Glen_S View Post
    This is a great script, and I use it (the original) on a couple of pages. I am assuming that this new version will also support the changes I made to control the fade/transition speed as well as the time between slides?
    ======================================
    (line 56)obj.degree+=2 //changed from 10 on June2506 GS
    (line 95)fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",100) //last # changed from 50 GS
    ======================================


    I found that these changes gave it more of a "flash" look as opposed to a plain slideshow.
    The line numbers will probably be different. However, both of your substitute values are withing the tolerances for what this script will support. Making the degree change smaller and the interval greater will serve to slow down the transition, most likely making it appear smoother. This will require that the:

    From the demo page:
    delay: Delay between image change, in milliseconds (ie: 3000 = 3 seconds)
    parameter used in the call:

    Code:
    new fadeshow(fadeimages, 140, 245, 0, 3000, 1, "R")
    be sufficiently high (long enough) to allow for the extended transition you are creating to have time to play out between slide changes. You're probably already aware of this and/or have a long enough delay in your show(s) anyway.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •