Results 1 to 6 of 6

Thread: Help with Flexi Slideshow

  1. #1
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with Flexi Slideshow

    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>

  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

    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:

    Code:
    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.
    - John
    ________________________

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

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

    Default

    Perfect! Thanks so much John

  4. #4
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    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

    Find the rotateimages function and add the highlighted:

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

    Code:
     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']
    - John
    ________________________

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

  6. #6
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey John, thank you so much for helping me on this javascript!

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
  •