PDA

View Full Version : Slideshow with captions



Dwarin
09-17-2005, 03:44 PM
I'm using this fade-in slideshow in my website:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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.

jscheuer1
09-18-2005, 04:48 AM
Hot off the presses, identical in function but uses captions (see in script comments for configuration):

<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>

cheryl
11-28-2006, 01:57 AM
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.

jscheuer1
11-29-2006, 05:11 PM
This script already has that option:



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/dynamicindex14/fadeinslideshow.htm

To add captions to that version, see here:

http://www.dynamicdrive.com/forums/showpost.php?p=23387&postcount=4

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


<!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>

cheryl
11-30-2006, 01:35 AM
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?

jscheuer1
11-30-2006, 06:51 AM
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:


<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:


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

cheryl
11-30-2006, 10:13 PM
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.

Glen_S
11-30-2006, 10:38 PM
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.

jscheuer1
12-01-2006, 03:16 AM
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:


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:


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.

jscheuer1
12-01-2006, 04:10 AM
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:


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.

bana
02-12-2007, 06:14 PM
Thank you for this great script...

But I am having problems adding this to my website. I am using your AnyLink Drop Down Menu and not sure if the 2 scripts conflict each other. Should I be renaming the type of script it is? As you can tell, I am just starting to learn about scripts.

Thanks.

jscheuer1
02-12-2007, 06:52 PM
Thank you for this great script...

But I am having problems adding this to my website. I am using your AnyLink Drop Down Menu and not sure if the 2 scripts conflict each other. Should I be renaming the type of script it is? As you can tell, I am just starting to learn about scripts.

Thanks.

Please provide a link to the Drop Down Menu script's demo page here on DD (there are several that could possibly fit that description). Also, a link to your problem page would be very helpful in diagnosing the cause(s) of this.

bana
02-12-2007, 10:04 PM
Hi John,

So, I was having these problems when I was in a Dreamweaver template. However, when created a test page for you to see the problems...it worked! Is that because scripts aren't viewable when in a template? Anyway, here is a link to my "problem page." =) and the link to your drop down menu demo page.

http://msengrol.seas.ucla.edu/test/test.html
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Thanks!

jscheuer1
02-12-2007, 10:34 PM
Yes, very often scripts do not function properly, or at all in preview or design mode of a WYSIWYG editor such as DW or FP, etc.