Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Anything Slider – removing pagination and seperating show/hide caption

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #36684
    mkultron
    Member

    Hi,

    I have an Anything Slider with the show/hide caption set up along with the pagination. I want to hide the pagination but retain the show/hide options, preferably using these within the caption (they won’t hide completely when they’re hidden so they can be expanded again easily. Right now when I hide the controls I hide everything. Also when the page first loads it seems to fade in again, any help woul dbe greatly appreciated!

    Here’s my fiddle:

    http://jsfiddle.net/mkultron/cfT5u/1/

    #96902
    Mottie
    Member

    Hi mkultron!

    Sorry it took me a bit to get the demo working since I found a bug in the plugin… so try this demo, but before you try to implement it, update AnythingSlider to the latest version.

    I added two options right at the top of the code:

    1. toggleTime which is the amount of time it takes to slide up and down.
    2. showCaptionInitially when set to true will automatically open the caption when a slide comes into view. When false, it stays hidden until clicked.

        // caption toggle animation time
    var toggleTime = 500,
    // always show caption when slide comes into view
    showCaptionInitially = true,

    updateCaption = function(slider, init){
    if (init && showCaptionInitially) {
    setTimeout(function(){
    slider.$targetPage.find('.caption').animate({
    bottom: 0
    }, toggleTime);
    }, slider.options.delayBeforeAnimate + toggleTime);
    } else if (!init) {
    var cap = slider.$lastPage.find('.caption');
    cap.css('bottom', -cap.innerHeight());
    }
    };

    $('#slider').anythingSlider({
    infiniteSlides : false,
    animationTime : 0,
    delayBeforeAnimate : 500,
    // buildNavigation : false,

    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
    slider.$items.each(function(){
    var cap = $(this).find('.caption');
    cap
    .css('bottom', -cap.innerHeight())
    .click(function(){
    cap.animate({
    bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
    }, toggleTime);
    });
    });
    updateCaption(slider, true);
    },

    // Callback before slide animates
    onSlideBegin: function(e, slider) {
    updateCaption(slider, true);
    },

    // Callback after slide animates
    onSlideComplete: function(slider) {
    updateCaption(slider, false);
    }

    });‚Äč
    #96996
    mkultron
    Member

    Perfect! Thank you so much for your help, though I seem to be having a bit of trouble replicating what’s in JsFiddle on my own site. Basically I copied the resources/js files over and linked these from my page (http://bit.ly/xUkQau). If you could take a minute just to see what I may be missing that’d be fantastic.

    #97016
    Mottie
    Member

    It looks like you are loading jQuery 1.2.6. The minimum jQuery required to run AnythingSlider is at least version 1.5.

    #97019
    mkultron
    Member

    Hmm OK, thanks! I upgraded to 1.7 and Jquery clearly works but the page is all messed up (http://bit.ly/xUkQau). Strange, I just copied it all across.

    #97035
    Mottie
    Member

    Hmm, now it looks like you’re missing the anythingslider.css file.

    #99613
    mkultron
    Member

    Thank you so much for all of your help. Only problem I’m having now is that I’m pulling over 100 rows from the database at once, so my page speed has gotten pretty big. I know little to nothing about AJAX but I’m assuming there’s some way I can draw only the current slide contents out of the database?

    EDIT

    Been trying something with the SQL LIMIT statement to limit the number of slides that load at once, but I’m having trouble editing the previous and next links so they load the next/prev slides on-the-fly.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.