SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Maryland
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nivo Slider not loading all thumbnails?

    Hi all,

    I'm not sure if this is a Javascript or a CSS issue, but I'm running into trouble with the Nivo Slider, which uses the jQuery library: http://nivo.dev7studios.com/

    This is the page I'm having trouble with: http://www.kyleandtaiese.com/gettingready_gall.html

    If you click the right arrow, after about three clicks, it gets stuck and won't scroll to the right anymore. I widened the controlnav div, thinking that would help, but it doesn't do anything. Any thoughts as to what may be making it malfunction?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi CrimsonSky. Welcome to SitePoint.

    I'm not good with JS, but I notice in the last script in the head of you document, there is this:

    Code:
    afterChange: function(){
    if ($(".nivo-control[rel='0']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"0px"},250);}
    else if ($(".nivo-control[rel='1']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"0px"},250);}
    else if ($(".nivo-control[rel='2']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"0px"},250);}
    else if ($(".nivo-control[rel='3']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-160px"},250);}
    else if ($(".nivo-control[rel='4']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-320px"},250);}
    else if ($(".nivo-control[rel='5']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-480px"},250);}
    else if ($(".nivo-control[rel='6']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-640px"},250);}
    else if ($(".nivo-control[rel='7']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-800px"},250);}
    else if ($(".nivo-control[rel='8']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-960px"},250);}
    else if ($(".nivo-control[rel='9']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-1120px"},250);}
    else if ($(".nivo-control[rel='10']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-1120px"},250);}
    else if ($(".nivo-control[rel='11']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-1120px"},250);}
    },
    Notice those last two values in red. They perhaps should increment like all the previous ones. Actually, the first few are just zero too. However, once the script gets to the last image, it seems to get stuck there. So something more is needed here. But it's certainly a JS issue.

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Maryland
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph! I think you're on to something. I definitely noticed that the left shift stopped working after -1120, it no longer increases.

    If someone with more experience with Javascript could advise, that'd be great!

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Maryland
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also thinking that I need to increase the number of rel items. I took this Javascript code from one of the nivo slider posters who suggest people use his code for implementing the slider with thumbnails below and I think his slideshow only had 11 images. Mine has 31. I'll mess with it and see what happens.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Do you have a link to his example?

  6. #6
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Maryland
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph, thanks to your nudging me in the right direction, I've figured it out! I'm now able to control these elements in the slider. Now I just need to perfect it so that the thumbnails don't get cut but that has nothing to do with JS.

    Thanks so much!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Well, I'm glad to have helped ... even if just by 'being there'! Glad you got it sorted.

    PS: I don't see the thumbnails being 'cut'. Not sure what you mean by that.

  8. #8
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Maryland
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I meant, when you click on the right arrow, especially as you scroll through further along, the thumbnails get cut off. I just need to get the left adjustment right so that it doesn't do that.

    javascript_thumbnail.jpg

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    O, I see. Well, what you need to do is tell the script how far to slide each time you click an arrow. At the moment, it's set to move 160px each time the arrow is clicked:

    Code:
    $('.nivo-controlNav_right').click(function(){
        var pos=Number($('.nivo-controlNav a').css("left").replace("px",""));
    	if (pos>-2250) {$('.nivo-controlNav a').animate({left:"-=160px"},250, function(){$('.nivo-controlNav a').clearQueue();} );}
    });
    
    $('.nivo-controlNav_left').click(function(){
        var pos=Number($('.nivo-controlNav a').css("left").replace("px",""));
        if (pos<-10){$('.nivo-controlNav a').animate({left:"+=160px"},250, function(){$('.nivo-controlNav a').clearQueue();} );}
    });
    The images are 180x wide, but they have 17 px of right margin too, so you should change those values from 160px to, say, 177px, or perhaps 194px (see which works best).

    PS: that code is in the script.js file.


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
  •