Stefan Hayden

Alt + Ctrl + X

jQuery Backstretch Slideshow

Backstretch is a pretty great slideshow library both because of it’s features as well as the small amount of code it is all done in. But when implementing a code light library you will always run in to the problem of needing the library to do things that it does not have features for. And for that reason I’m going to highlight some of the features I built in to my own fork of Backstretch, all of wich are also documented on github.

Options:

Pause: By default the slideshow just starts to play but for us we wanted to start out with it just sitting on one slide.

lazyload: By default all of the images you pass in are loaded. This is not great for page speed and so this option only loads image when the slideshow goes to show the image or specifically requested though a call.

start: The array of images you pass in will always be shown in that order. But if you pass in an index then the slideshow will start at that point.

default_height & default_width: These are actually in the original library but were undocumented. This just speeds up getting the slideshow to draw it self correctly if you know the height and width in advance.

API:

cacheNext() & cachePrev(): With lazyload turned on the next image will not start to load until that slide is requested. With this call you can choose when is best to preload that next or previous image. I always keep the next image in the slideshow cashed and ready to show.

You can find all these features on my own fork of Backstetch where I will also attempt to keep it up to date with the main repo.

2 Comments
Gravatar

Hello,

Could you please show me how to use the cacheNext() prev functions. I’m not sure where to place them to get them to work. I have lazyloading working but get errors when I try to add the cache feature. Thank you for your time.

Gravatar

great question! here is how I am using it.

First when the slideshow first loads it will only load the 1st slide. On page load is the first place I call cacheNext:


$('.homepage_body').data('backstretch').cacheNext();

Now the next image is cached so when we call for the next slide it will be loaded. Then when that next slide becomes the current slide you can call to cache the next slide in the series:


$(".homepage_body .arrow_right").click(function(){
   &nbsp$('.homepage_body').data('backstretch').next();
    $('.homepage_body').data('backstretch').cacheNext();
});

It’s a bit of a manual process but it lets you only load the image into the cache when you really need it.

Feed Icon Comment Feed

Post a Comment