Solved

add text to javascript image slideshow

Posted on 2008-06-23
8
611 Views
Last Modified: 2013-11-19
I have found a third party code to a javascript fade in slideshow that I need to use but the only issue with it is that I need to display text dynamically along with the image fading in and out. I have attached the code below and also provided the link to the online location. Any help will be appreciated.

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
var fadeimages=new Array() //1st array set example. Remove or add more sets as needed.

//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]=["/images/f_njpac_soc.gif", "/featuredevents", ""] 

fadeimages[1]=["/images/f_njpac_broadwayclosetohome.jpg", "/featuredevents", ""] 

 

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"

if (typeof displayorder!="undefined")

theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)

this.theimages=theimages

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=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:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;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:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;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+'" border="'+this.imageborder+'px">'

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

}

Open in new window

0
Comment
Question by:sulentho
8 Comments
 
LVL 15

Expert Comment

by:dosth
Comment Utility
you need to hack the current to code

fadeimages[0]=["/images/f_njpac_soc.gif", "/featuredevents", "","TEXT GOES HERE"]

and get this last values some way in a div
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
can you show a working version of the slideshow?
I cannot get the one you linked to to work in FF3 or IE6
0
 

Author Comment

by:sulentho
Comment Utility
The working version can be found at the following url http://insidetoday.com/newhome.php. I am not very strong at javascript so I am not sure on how to use html text code as part of the array. Is it possible for you to modify the code and show me how. The code does not need to work on IE6. Thanks in advance
0
 
LVL 16

Accepted Solution

by:
Lolly-Ink earned 500 total points
Comment Utility
The third party code (from http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) has been modified below to display a caption below each image, based on the solution given by dosth.
<html>

<script type="text/javascript">

      

/***********************************************

* Ultimate Fade-In Slideshow (v1.51): © 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.

***********************************************/

 

var fadeimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]=["http://www.dynamicdrive.com/dynamicindex14/photo1.jpg", "", "", "Kissing Bandit"] //plain image syntax

fadeimages[1]=["http://www.dynamicdrive.com/dynamicindex14/photo2.jpg", "http://www.cssdrive.com", "", "Posing Lady"] //image with link syntax

fadeimages[2]=["http://www.dynamicdrive.com/dynamicindex14/photo3.jpg", "http://www.javascriptkit.com", "_new", "Sunbrella"] //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]=["http://www.dynamicdrive.com/dynamicindex14/photo1.jpg", "", "", "Kissing Bandit"] //plain image syntax

fadeimages2[1]=["http://www.dynamicdrive.com/dynamicindex14/photo2.jpg", "http://www.cssdrive.com", "", "Posing Lady"] //image with link syntax

fadeimages2[2]=["http://www.dynamicdrive.com/dynamicindex14/photo3.jpg", "http://www.javascriptkit.com", "_new", "Sunbrella"] //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.fadewidth=fadewidth;

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"

if (typeof displayorder!="undefined")

theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)

this.theimages=theimages

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=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:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;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:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;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+'" border="'+this.imageborder+'px">'

if (this.theimages[picindex][1]!="") //if associated link exists for image

slideHTML+='</a>'

slideHTML+='<br><span style="width:' + this.fadewidth + ';text-align:center;">' + this.theimages[picindex][3] + '</span>'

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>

<body>

<script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)

new fadeshow(fadeimages, 140, 225 + 25, 0, 3000, 1, "R")

new fadeshow(fadeimages2, 140, 225 + 25, 0, 3000, 0)

</script>  

</body>

</html>

Open in new window

0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:sulentho
Comment Utility
Thank you very much, I do have one question can we add html tags and css inline styling to the text we are adding to the array or will it break the array. Once again thank you very much for your help.
0
 

Author Comment

by:sulentho
Comment Utility
Thank you very much I figured it out.
0
 

Author Closing Comment

by:sulentho
Comment Utility
Thank you very much for the help.
0
 

Author Comment

by:sulentho
Comment Utility
LordofPorts I am trying to make the slideshopw content dynamic from the database and this is what I have at the moment but it does not work. Let me know if this is the right way to do this or how exactly should I do it.


var fadeimages=new Array() //1st array set example. Remove or add more sets as needed.

'<?PHP

$sql = "SELECT * FROM featuredevents ORDER BY title ASC LIMIT 0,10";

$result = mysql_query($sql);

$count = 0;

while($event = mysql_fetch_assoc($result)) {

echo "fadeimages[" . $count . "]=['<? echo $events[img]; ?>','/featuredevents_detail.php?fid=<? echo $events[fid]; ?>','','<? echo stripslashes($event[description]); ?>'];

    $count++;

}

?>'

 

var fadebgcolor="white"

Open in new window

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to count occurrences of each item in an array.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now