SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question fadeIn/Out question

    I'm fairly new to javascript and I needed help with a simple slideshow on a project I'm working on. My javascript code is as follows:

    Code JavaScript:
    first = 1;
    last = 5;
    current = 1;
     
    function slideshow() {
        // Hide current picture
        object = document.getElementById('slide' + current);
        object.style.display = 'none';
     
        // Show next picture, if last, loop back to front
        if (current == last) { current = 1; }
        else { current++ }
        object = document.getElementById('slide' + current);
        object.style.display = 'block';
        setTimeout(slideshow, 10000);
    }

    And the HTML is

    Code HTML4Strict:
    <div class="slideShow">
               <div id="slide1" class="slides">
                   <img src="/images/slides/1.jpg" width="440" border="0" />
               </div>
               <div id="slide2" class="slides">
                   <img src="/images/slides/2.jpg" width="440" border="0" />
               </div>
               <div id="slide3" class="slides">
                   <img src="/images/slides/3.jpg" width="440" border="0" />
               </div>
               <div id="slide4" class="slides">
                   <img src="/images/slides/4.jpg" width="440" border="0" />
               </div>
               <div id="slide5" class="slides">
                   <img src="/images/slides/5.jpg" width="440" border="0" />
               </div>
            </div>

    The technique involving the CSS display property works great and now I'd like to make the transition between the pictures a fade out/fade in. How would I do this and would I need to use a library such as jQuery for this effect?

  2. #2
    Non-Member
    Join Date
    Mar 2005
    Location
    Bangkok
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a quick look at the slideshow on the home page of http://www.ancient-beadart.com

    Creating fades in IE is easy: just use the MS fade filter.

    For other browsers, the setTimeout method seems to work fine in the likes of Safari and Chrome, but gives unpredictable results in Firefox. So I chose the setInterval method instead.

    What you basically need, then, is a browser detection routine that separates IE from non-IE, and then a couple of quite simple fade routines.

    You are welcome to check my source code for the above site.

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not search some existing libraries around google and use them instead of reinventing the wheel again for the same? I would really recommend you to search some and use them because there are lots of image slide show libraries available which are well tested too.
    http://www.google.com/search?q=javascript+image+slider
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot guys. It's great to have a community to back up your learning with real life solutions. Take care


Tags for this Thread

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
  •