PDA

View Full Version : Help with Flexi Slideshow



darthvadersmum
01-06-2006, 06:23 PM
I'm trying to add this feature to my homepage. The only thing you see is the Dynamic Drive link. I'm sure its something so simple. Could someone explain what I can do to make it work. Thanks! Amberlii

<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[1]=["http://www.bowwowbeds.com/gallery1.jpg", "http://www.bowwowbeds.com", "Our newest size XXL!"]
variableslide[2]=["http://www.bowwowbeds.com/gallery2.jpg", "http://www.bowwowbeds.com/contact.html", "Unique"]
variableslide[3]=["http://www.bowwowbeds.com/gallery3.jpg", "http://www.bowwowbeds.com/contact.html", "Practical"]
variableslide[4]=["http://www.bowwowbeds.com/gallery4.jpg", "http://www.bowwowbeds.com/contact.html", "Washable"]
variableslide[5]=["http://www.bowwowbeds.com/gallery5.jpg", "http://www.bowwowbeds.com/contact.html", "No Zipper"]
variableslide[6]=["http://www.bowwowbeds.com/gallery6.jpg", "http://www.bowwowbeds.com/contact.html", "Choose your Color"]
variableslide[7]=["http://www.bowwowbeds.com/gallery7.jpg", "http://www.bowwowbeds.com/contact.html", "Choose your Fabric"]
variableslide[8]=["http://www.bowwowbeds.com/cratecover.jpg", "http://www.bowwowbeds.com/new.html", "Colossal Crate Covers"]
variableslide[9]=["http://www.bowwowbeds.com/gifts.jpg", "http://www.bowwowbeds.com/products.html", "Array of Pet Products"]


//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='200px' //set to width of LARGEST image in your slideshow
var slideheight='149px' //set to height of LARGEST image in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

jscheuer1
01-06-2006, 06:54 PM
Your array of images, links and descriptions is missing an entry for zero. The way this script is written, it needs entries numbered from 0 to whatever, with no missed numbers, so, you can use:


var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=["http://www.bowwowbeds.com/gallery1.jpg", "http://www.bowwowbeds.com", "Our newest size XXL!"]
variableslide[1]=["http://www.bowwowbeds.com/gallery2.jpg", "http://www.bowwowbeds.com/contact.html", "Unique"]
variableslide[2]=["http://www.bowwowbeds.com/gallery3.jpg", "http://www.bowwowbeds.com/contact.html", "Practical"]
variableslide[3]=["http://www.bowwowbeds.com/gallery4.jpg", "http://www.bowwowbeds.com/contact.html", "Washable"]
variableslide[4]=["http://www.bowwowbeds.com/gallery5.jpg", "http://www.bowwowbeds.com/contact.html", "No Zipper"]
variableslide[5]=["http://www.bowwowbeds.com/gallery6.jpg", "http://www.bowwowbeds.com/contact.html", "Choose your Color"]
variableslide[6]=["http://www.bowwowbeds.com/gallery7.jpg", "http://www.bowwowbeds.com/contact.html", "Choose your Fabric"]
variableslide[7]=["http://www.bowwowbeds.com/cratecover.jpg", "http://www.bowwowbeds.com/new.html", "Colossal Crate Covers"]
variableslide[8]=["http://www.bowwowbeds.com/gifts.jpg", "http://www.bowwowbeds.com/products.html", "Array of Pet Products"]

in place of your array and it will work.

darthvadersmum
01-06-2006, 06:59 PM
Perfect! Thanks so much John :)

SamerA82
05-18-2011, 10:20 PM
Hello everyone, I am new with this discussion forum. I am having trouble understanding how JavaScript work. I have Javascript something like this:

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['StoreImages/1.png"', 'YourURLaddressgoeshere target=_blank', '']
variableslide[1]=['StoreImages/2.png"', 'YourURLaddressgoeshere target=_blank', '']
variableslide[2]=['StoreImages/3.png"', 'YourURLaddressgoeshere target=_blank', '']
variableslide[3]=['StoreImages/4.png"', 'YourURLaddressgoeshere target=_blank', '']
variableslide[4]=['StoreImages/5.png"', 'YourURLaddressgoeshere target=_blank', '']
variableslide[5]=['StoreImages/6.png"', 'YourURLaddressgoeshere target=_blank', '']
variableslide[6]=['StoreImages/7.png"', 'YourURLaddressgoeshere target=_blank', '']

It doesn't seems to work right "target=_blank" on JavaScript. You guys know a better way or fix this? I want to click on the slideshow pictures (links) into new window.

jscheuer1
05-18-2011, 11:54 PM
Find the rotateimages function and add the highlighted:


function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'" target="' + (variableslide[currentslide][3] || '_self') + '">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

Now in your variableslide array you can add the target at the end, like so:


variableslide[0]=['StoreImages/1.png"', 'YourURLaddressgoeshere', '', '_blank']
variableslide[1]=['StoreImages/2.png"', 'YourURLaddressgoeshere', '', '_blank']
variableslide[2]=['StoreImages/3.png"', 'YourURLaddressgoeshere', '', '_blank']
variableslide[3]=['StoreImages/4.png"', 'YourURLaddressgoeshere', '', '_blank']
variableslide[4]=['StoreImages/5.png"', 'YourURLaddressgoeshere', '', '_blank']
variableslide[5]=['StoreImages/6.png"', 'YourURLaddressgoeshere', '', '_blank']
variableslide[6]=['StoreImages/7.png"', 'YourURLaddressgoeshere', '', '_blank']

SamerA82
05-19-2011, 04:14 PM
Hey John, thank you so much for helping me on this javascript!