Grow your CSS skills. Land your dream job.

Fade-in Slideshow help

  • # July 13, 2009 at 6:29 pm

    Hello all!

    I’m trying to use this script http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm to have three different sets of photos across my header fade in and out.

    The site I’m trying to do this on is here: http://www.erindevers.net/wordpresstest/

    I’ve got one of them to work, but the other two don’t want to show up.

    I know basically nothing about javascript…enough to edit the script I found, and that’s about it. And apparently not even that well!

    Here is the editable code I used (sorry for the long URLs – the photos wouldn’t load otherwise):

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/1.jpg", "1", ""] //plain image syntax
    fadeimages[1]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/2.jpg", "2", ""] //plain image syntax
    fadeimages[2]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/3.jpg", "3", ""] //plain image syntax
    fadeimages[3]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/4.jpg", "4", ""] //plain image syntax
    fadeimages[4]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/5.jpg", "5", ""] //plain image syntax
    fadeimages[5]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/16.jpg", "16", ""] //plain image syntax
    fadeimages[6]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/17.jpg", "17", ""] //plain image syntax
    fadeimages[7]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/18.jpg", "18", ""] //plain image syntax
    fadeimages[8]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/25.jpg", "25", ""] //plain image syntax

    var fadeimages2=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/6.jpg", "6", ""] //plain image syntax
    fadeimages[1]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/7.jpg", "7", ""] //plain image syntax
    fadeimages[2]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/8.jpg", "8", ""] //plain image syntax
    fadeimages[3]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/9.jpg", "9", ""] //plain image syntax
    fadeimages[4]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/10.jpg", "10", ""] //plain image syntax
    fadeimages[5]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/19.jpg", "19", ""] //plain image syntax
    fadeimages[6]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/20.jpg", "20", ""] //plain image syntax
    fadeimages[7]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/21.jpg", "21", ""] //plain image syntax

    var fadeimages3=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/11.jpg", "11", ""] //plain image syntax
    fadeimages[1]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/12.jpg", "12", ""] //plain image syntax
    fadeimages[2]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/13.jpg", "13", ""] //plain image syntax
    fadeimages[3]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/14.jpg", "14", ""] //plain image syntax
    fadeimages[4]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/15.jpg", "15", ""] //plain image syntax
    fadeimages[5]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/22.jpg", "22", ""] //plain image syntax
    fadeimages[6]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/23.jpg", "23", ""] //plain image syntax
    fadeimages[7]=["http://www.erindevers.net/wordpresstest/wp-content/themes/starkers/style/images/24.jpg", "24", ""] //plain image syntax

    var fadebgcolor=”white”

    and

    Code:

    Can anyone help? I appreciate it!

    # July 13, 2009 at 6:31 pm

    Quick addition that I just noticed:

    The one that is working is pulling photos from the different arrays. It doesn’t matter that it’s doing that…but why? And it’s only pulling specific ones?

    I’m so lost.

    # July 20, 2009 at 10:43 pm

    It’s been about a week, and I’m still stuck.

    Any ideas from anyone?

    # July 21, 2009 at 4:41 am

    I would just use a jQuery plugin http://malsup.com/jquery/cycle/lite/

    # July 21, 2009 at 2:06 pm

    I really agree, the jquery cycle plugin can be much easier to use than the script you are using now.

    Also, I show all 3 slideshows working, oddly enough.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".