Grow your CSS skills. Land your dream job.

jQuery Help – Image Slider

  • # September 7, 2010 at 2:19 pm

    Hi Folks!

    I need some help tweaking a small piece of functionality on a site Im working on.

    You can access the site here: http://mybcferriesmemories.trapeze.ca
    username: test
    password: test

    You will be redirected to a gallery. Everything is working the way I want, except I would like to disable the previous button when on the first slide, and the next button while on the last. Ultimately, I just need a css class on the button when there isnt any more items so that I can remove the hover state.

    Now, I am using a modified version of jcarousel lite and this functionality is SUPPOSED to be built in, but for some reason it is not working. You can see the modified jcarousel code here: http://groups.google.com/group/jquery-en/browse_thread/thread/2c7c4a86d19cadf9?pli=1

    Any help is very much appreciated!

    – Amy

    # September 10, 2010 at 11:47 am

    I have to say, it’s incredibly slow to load! But then you seem to be loading all 200 images at once?

    I would suggest some sort of AJAX call to load new images when you click the previous/next buttons. I know this doesn’t exactly answer your questions, but it’s necessary because the site is so slow.

    With regards to your question, I’m guessing you want to hide the button? Because the code to disable it is there, and the left hand button does nothing on the first page, because you’re at the beginning.

    // Disable buttons when the carousel reaches the
    last/first, and enable when not
    if (!o.circular) {
    $(o.btnPrev + "," +
    o.btnNext).removeClass("disabled");
    //ADDED: This determines when to add the
    disabled class to the link when more than 1 row is viewable
    $((curr - o.scroll < 0 && o.btnPrev)
    ||
    (curr + o.scroll > ((itemLength - v) /
    o.rows) && o.btnNext)
    ||
    []
    ).addClass("disabled");
    }

    As it is adding the class .disabled, I would recommend you add a CSS style saying something like

    .disabled{display:none}
    # September 10, 2010 at 12:49 pm

    Hey Mark! Thanks for the reply :)

    I originally had it loading via ajax but I couldn’t get the slide animation going :/

    Am I missing something? Because I see no disabled class:

    # September 10, 2010 at 6:23 pm

    Oh…erm…that’s weird…was kind of hoping that would work! Unfortunately I’m not too good with JavaScript, so I’m not sure what to suggest.

    # September 11, 2010 at 3:05 am

    That’s a pretty complicated jQuery image slider lol. It’s pretty messy so I can’t really see what’s going on, also a plugin isn’t really necessary for something like this (I don’t think so at least). I’m about to do a tutorial on this, however I haven’t completed it yet.

    What I would do is say (in javascript of course):
    – When you click on previous
    – If the <ul>’s left value is greater or equal to 0, do nothing, otherwise slide like normal

    and

    – when you click on next
    – If the <ul>’s left value is less or equal to -7406px;, do nothing, otherwise slide like normal

    Here is a snippet of my example – Where #gal-prev is the prev-button and #gallery is the <ul>

    jQuery("#gal-prev").click(function(){
    if(jQuery("#gallery").position().left < 0){
    jQuery("#gallery").animate({left : "+=95px"});
    }
    return false;
    });

    I’ll post a link to the completed example once I’m done with it if you still need help.

    # September 13, 2010 at 12:34 pm

    Hi jamy_za!

    Thanks for the feedback… definitely post the link to your tutorial or send to me via twitter :)

    I know it’s really messy and complicated *hangs head in shame*. I have a lot to learn :P

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

You must be logged in to reply to this topic.

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