SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nivo slider issue

    Hi,

    please take a look at this webpage.

    Everytime you load a new page, all of the images in the slideshow are visible. How can I fix this? Is this a jquery or CSS problem?

    Any advice is appreciated. Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It's a CSS issue. The height of #slider is being set by the JavaScript, but that takes a while to load.

    What I would do is add that height here:

    Code:
    #slider {
      display: block;
      overflow: hidden;
      width: 1000px;
      height: 288px;
    }
    However, that will mean that, if JS is off, the only the first pic will be viewable, so in that case I would add in overflow: scroll only for when JS is off, but that's up to you.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh right, thanks a lot

    And what if I want the slider to start at a random image and not the first image in the folder? I know Nivo has an option for this:

    Code:
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            startSlide:0, // Set starting Slide (0 index)
        });
    });
    </script>
    How do I change that?

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    jQuery(window).load(function() {
    	jQuery('#slider').nivoSlider({ 
    		
    	});
    	
    });
    </script>
    I should replace the above code with the following code:

    Code:
    <script type="text/javascript">
    $(window).load(function() {
    var total = $('#slider img').length;
    var rand = Math.floor(Math.random()*total);
    $('#slider').nivoSlider({
    	effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    	slices:15,
    	animSpeed:1000,
    	pauseTime:10000,
    	startSlide:rand
    	});
    });
    </script>
    But the slider starts with 1 and stopped working.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    On the Nivo site they suggest this:

    Code:
    var total = $('#slider img').length;
    var rand = Math.floor(Math.random()*total);
    $('#slider').nivoSlider({
         startSlide:rand
    });

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes but that's the same as the one I posted right? That doesn't work for me.
    I think it's because the images aren't wrapped into links.

  7. #7
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jammmy View Post
    Yes but that's the same as the one I posted right? That doesn't work for me.
    I think it's because the images aren't wrapped into links.
    That random code shouldn't behave differently without links. Do you have a link to the page so we can see exactly what's happening?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by FFCus View Post
    Do you have a link to the page so we can see exactly what's happening?
    See the first post.

  9. #9
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    See the first post.
    Haha...how did I miss that?! Thank you!!!


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
  •