Anything Slider – removing pagination and seperating show/hide caption

[mkultron]

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/

[Mottie]

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);

}



});​

[mkultron]

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.

[Mottie]

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

[mkultron]

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.

[Mottie]

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

[mkultron]

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.

[Author]

Posts