Categories:

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste 3D Cube Slideshow

Credit: JavaScript Kit

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.

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>

Load carouselcontent2.htm


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.