Cut & Paste 3D Cube Slideshow v1.1
|
Aug 2nd, 15': Version 1.1, which adds pause onmouseover of slideshow in auto rotate mode, "desc" option to show a description beneath certain slides.
Description: This image slideshow rotates its images in eye popping 3D fashion, no special glasses required! It uses CSS3 transform to position two panels in 3D space side by side and perpendicular to each other, creating the illusion of a cube. The cube effect works in IE10+ and all modern versions of Firefox and Chrome, including on mobile. Browsers that don't support the cube effect will just get a regular effect-free slideshow.
The slideshow can be navigated either by manually creating "forward" and "back" buttons, or by swiping it on mobile devices. It can also be set to auto rotate, plus each slide can be optionally hyperlinked.
Example (movie posters used are copyright their respective sources, and used only for illustration):
 Back Forward  |
Back Forward |
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
Download the following external file and upload to same directory as where your webpage resides:
Step 2: Add the below container markup to the <BODY> where you want the slideshow to appear on the page:
And that's it for installation, though read on for more details on setting up/ customizing the script.
Setup Information
There are two parts to the script; first, the markup you should add to your page:
<div class="jkcubeslideshow" id="cubeshow1"> </div>
It's just an empty DIV with an unique but arbitrary ID value and
a CSS class of "jkcubeslideshow".
The initialization code
To transform the above markup into a cube slideshow, we need to call
new jkcubeslideshow() in the HEAD section of your page to
initialize it. The syntax is:
<script>
jQuery(function($){ // on DOM load
cubeshowvar1 = new jkcubeslideshow({
id: 'cubeshow1',
dimensions: [300, 375],
images: [
['food1.jpg'],
['food2.jpg'],
['food3.jpg'],
['food4.jpg'],
['food5.jpg'] // <-- no comma after last image
] // <-- no comma after last option
})
})
</script>
Where cubeshowvar1 in red should be an arbitrary but
unique name for each instance of Cube slideshow on the page. Inside
jkcubeslideshow()
is a list of settings for the slideshow, In the above we see three settings defined- the "id",
"dimensions[]", and "images[]". Here is a description of all of the
available settings:
| setting | Description |
|---|---|
| id Required |
The ID of the main slideshow container DIV. |
| dimensions: [] defaults to null |
The dimensions of the slideshow (width
and height, respectively), in pixels. For example:dimensions: [300, 500] If you do not define this setting, then the script will look to any stylesheet on your page that defines the main container's dimensions instead. Your slideshow must contain explicit dimensions and in pixels. |
| images: [] Required |
A two dimensional array specifying the
paths to the images within the slideshow, and for each image, an
optional URL to hyperlink it. The syntax is: images: [
['food1.jpg', 'http://cssdrive.com'],
['food2.jpg'],
['food3.jpg', 'http://www.dynamicdrive.com'],
['images/food4.jpg'],
['http://mysite.com/food5.jpg']
Here I've defined 5 images, with the first and 3rd ones hyperlinked. |
| desc: [] v1.1
feature defaults to null |
If defined, shows the desired
description beneath the image that shares the same array index. For
example: desc: [
['food1.jpg description here'],
['food2.jpg description here'],
['food3.jpg description here']
|
| pause defaults to 0 |
The pause between automatic image changes in milliseconds. If set to 0 (default value), then the slideshow becomes a manual slideshow. A value of 3000 for example causes the slideshow to auto rotate every 3 seconds until the user swipes or manually navigates the slideshow via manual buttons, for example. |
| fxduration defaults to 1000 |
The duration of the cube changing sides, in milliseconds. |
| swipethreshold defaults to [50, 300] |
The distance and allotted time frame the user has to swipe/drag the mouse inside the slideshow in order for it to be considered a swipe. The default is [50, 300], or 50 pixels within 300 milliseconds. Adjust if you feel the swipe behaviour is too sensitive or not enough. |
| linktarget defaults to "_new" |
The link target for any images that are hyperlinked. |
Separate each setting with a comma, except the very last one:
<script>
jQuery(function($){ // on DOM load
cubeshowvar1 = new jkcubeslideshow({
id: 'cubeshow1',
dimensions: [300, 375],
images: [
['food1.jpg'],
['food2.jpg'],
['food3.jpg'],
['food4.jpg'] // <-- no comma after last image
] // <-- no comma after last option
})
})
</script>
Defining manual controls for your slideshow
Once a slideshow is initialized, you can define manual controls for the user to navigate it using. Just call the the method:
slideshowvar.rotatecube(keyword)
Where slideshowvar is the unique but arbitrary
variable name you assigned your slideshow instance when initializing it, such as cubeshowvar1 in red above. Keyword
should either be the string "back" or "forward". So, the following
creates two links that navigate the slideshow cubeshowvar1
back and forward when clicked on:
<a href="#" onClick="cubeshowvar1.rotatecube('back'); return false">
<img src="blueleft.gif" style="border:none" /> Back
</a>
<a href="#" onClick="cubeshowvar1.rotatecube('forward'); return false" style="margin-left:160px">
Forward <img src="blueright.gif" style="border:none" />
</a>