Blog

Slicebox mod: automatically show info

Posted on by Joe Kendall

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 🙂

7 thoughts on “Slicebox mod: automatically show info”

  1. Hi Joe! Thanks for this very useful info. Nice tutorial. I would like the info to be shown in ALL the slides as soon as they appear (when It finishes each transition). How can it be made? Thank you in advance!
    Regards.
    Carlos

    1. Hi Carlos,
      Do you mean you don’t want it to slide up you just want it to display? if so, you probably want to change the animate() to css() around line 743 in the uncompressed jquery.slicebox.js.
      Thanks.

      1. Hi Joe!
        No, I mean I want the info to appear in every slide automatically, not only in very first one (like your mod) and of course with the slide up effect.
        I have been playing with the booleans in jquery.slicebox.js but with no success…
        Thank you again!
        Carlos

          1. Hi, I was trying your mod and was referring to your website but it seems that the one on the site is the minified version. and adding your mod only enables the script to show the first slide’s info.

            Is there something I’m missing here?

  2. Hi, how can we automatically start the slice box instead of clicking on “Play” button. is there any property in jquery function we need to set or we need to customise it?? 🙁

Comments are closed.