Results 1 to 8 of 8

Thread: Ultimate Fade-in slideshow (v1.51)

  1. #1
    Join Date
    Jan 2005
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v1.51)

    1) Ultimate Fade-in slideshow (v1.51):

    2) http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) How to overlap two seperate slideshows:

    -- Many thanks for the updates. This has been a very useful script.

    However, is it possible to have two slideshows that completely overlap each other? I have the body code in a table (I know, I know!), and it simply puts one slideshow beneath the other.

    I haven't attempted it with CSS positioning.

    Also, would it know to complete one slideshow, before starting the next one (that sits over it)?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Something like that could probably be done the way that you are proposing. However, there may well be an easier way. What two slide shows do you want/have in mind? Anyways, it would probably be easier to have one slide show. If you want some of the images removed from it/ignored once those images have been shown once, that would be easier to code.

    So you could have for example (first time through):

    1,2,3,4,5,6,7,8

    Then, each time after 8 is shown, it goes back to 4 and continues from there.

    The script code changes would be minimal and there would be no complex layout gymnastics to go through. On the other hand, using layout would still also require script code changes, perhaps more involved ones at that.
    Last edited by jscheuer1; 07-26-2007 at 02:57 AM. Reason: spelling
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2005
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v1.51)

    John,

    Thanks for the reply. Actually, you're right... one constant slideshow with a multitude of banners would get the job done. On my site however, I run the slideshows to advertise various things (all different), so having them run together looks kinda weird.

    I think what I really wanted, was to have a 'rotating' slideshow. That is, seperate slideshows where one is activated at set moments -- like a traditional rotating banner script -- either on page refresh, or day of the week etc.

    I know that's an entire rewrite, which I'm not proposing!

    Of course, I can grab a rotating banner script and animate the banners, but the slideshow effect is more appealing

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ChasDevlin View Post
    I think what I really wanted, was to have a 'rotating' slideshow. That is, seperate slideshows where one is activated at set moments -- like a traditional rotating banner script -- either on page refresh, or day of the week etc.
    That seems easy enough. The script already allows for several arrays to be set (from the demo):

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //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
    After those, you could make a new array of the arrays:

    Code:
    var shows=[];
    shows[0]=fadeimages;
    shows[1]=fadeimages2;
    Add as many arrays of images to that array as you like, as long as they exist (are defined) above it in the code as in the above example.

    Next, say you want a random show, do (right after the above):

    Code:
    shows.sort(function() {return 0.5 - Math.random();})
    Now in the body part of the code, have:

    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(shows[0], 140, 225, 0, 3000, 1, "R")
     
    </script>
    A similar thing could be done to get a day of the week show, assuming you have 7 shows, skip the part:

    Code:
    shows.sort(function() {return 0.5 - Math.random();})
    and in the body:

    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(shows[new Date().getDay()], 140, 225, 0, 3000, 1, "R")
     
    </script>
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2005
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v1.51)

    Thanks John,

    I'm gonna play around with your suggestions and see what happens.

    Many thanks...

  6. #6
    Join Date
    Jan 2005
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Oddly enough... it all seemed to work when testing it locally, but once uploaded, I got an error: 'shows is undefined'.

    I meticulously stuck to the code, but something went awry!

    I had two slideshows -- the first with 2 images, the second with 4 (if that makes a difference).

    The .js code was:
    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["images/banner1.jpg", "http://link1", "_blank"] 
    fadeimages[1]=["images/banner2.jpg", "http://link2", "_blank"] 
    
    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]=["images/banner1.jpg", "http://link1", "_blank"] 
    fadeimages2[1]=["images/banner2.jpg", "http://link2", "_blank"] 
    fadeimages2[2]=["images/banner3.jpg", "http://link3", "_blank"] 
    fadeimages2[3]=["images/banner4.jpg", "http://link4", "_blank"] 
    
    
    var shows=[];
    shows[0]=fadeimages;
    shows[1]=fadeimages2;
    
    shows.sort(function() {return 0.5 - Math.random();})
    the Body code was:
    Code:
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(shows[0], 140, 225, 0, 3000, 1)
    Even after playing around with using 0 or 1 in the
    Code:
    new fadeshow(shows[1],
    bit, it still worked locally.

    Not a life + death situation... I'll play around with it again.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ChasDevlin View Post
    Oddly enough... it all seemed to work when testing it locally, but once uploaded, I got an error: 'shows is undefined'.
    That is odd. Unless something (like your editor) changed the code when it got uploaded, or your server added a conflicting script, that shouldn't have happened. It really doesn't matter (with the setup from your previous post) whether you use shows[1] or [0]. If you had more shows, you could use any of the valid shows numbers. It would still be a random show, as the entire shows array is being shuffled.

    If you keep having trouble with your live page, a link to it would help me spot the problem.
    - John
    ________________________

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

  8. #8
    Join Date
    Jan 2005
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The sweet smell of success!

    Even though I'm using the same exact previous code (as far as I can tell), it does now work

    Your help was much appreciated. Thanks!

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
  •