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 🙂
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
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.
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
Hi Carlos,
Hmm, this mod does exactly that.
Check out http://weststreetdesign.co.uk which is the project I made the change for. The info slides up on every slice. Check the mark up, and go over the instructions again if you are still having problems. Thanks.
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?
Hi Radrad,
You can download slice box here; http://tympanus.net/Development/Slicebox/Slicebox.zip
The non minified version is in js alongside the minified version.
Thanks, Joe.
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?? 🙁