fbpx

Slicebox mod: automatically show info

Slicebox is a great slideshow from the guys at codrops.

http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

It uses CSS3, HTML5 and jQuery to create the most stunning effects on a slideshow to date.

However, there are a couple of little details that have been missed, for example, I wanted to automatically display the description of each slide, negating the need for the user to click the info icon.

Here is how i did it:

This hinges on the function

_showInfo();

Open up jquery.slicebox.js found in the js folder.

1) We want to display the very first title info, so scroll down to line 235. Which is within

_initEvents

. add the following line:

instance._showInfo();

2) Under

_showInfo

(line 244 before you made any changes) comment out

this._stopSlideshow();

by using a double forward slash.

//this._stopSlideshow();

3) Under

navigate

, (line 327 before you made any changes), change from:

this._rotateBox( dir, options );

to

this._rotateBox( dir, options, function() {
instance._showInfo();
} );

Finally, compress your code, you could use http://jscompress.com/, and save the changes to jquery.slicebox.min.js

Hope that saves you a bit of time if you were fortunate enough to stumble across this little post 🙂