CSS Codes
CSS Layouts
FF1+ IE7+ Opr9+

Shockwave 3D slideshow v1.0

Author: Dynamic Drive

Description: Shockwave 3D slideshow taps into the power of CSS3 to bring some 3D freshness to the transition between images. It supports a handful of unique effects, from 3D cube, 3D blinds, to the more linear dropping tiles. Lets see the full list of features of this mind bending slideshow:

  • Distinct 3D and linear transitional effects to better grab your users' attention. Supported in browsers that support CSS3's 3D effects, with basic effect fallback for other browsers.
  • Slideshow can either auto start or be put in manual mode.
  • In automatic mode, slideshow can be set to stop rotating after x cycles.
  • In manual mode, script can either auto generate play/pause buttons for it, or you can define your own and link it to the slideshow to control it.
  • Each slide consists of an image, optional URL and description.
  • Each description if defined is shown inside the slideshow, either on demand when the mouse rolls over it, and always visible.
  • Slideshow automatically pauses onMouseover and persists the last viewed slide, so reloading the page recalls that slide within a browser session.

Demos:

- Unhooked effect used.
- Slideshow auto starts, stops after 2 cycles
- Default navigational buttons shown
-Explicit dimensions for slideshow defined

 

  

- 3D Cube effect of 1x1 tile used
- Descriptions disabled
- Slideshow auto starts, no nav buttons defined

- FlipEdgeSlider effect of 7x1 tiles used
- Slideshow auto starts, no nav buttons defined

  
  • previous
  • playpause
  • next

- 3D Cube effect of 5x1 tiles used
- Custom navigational buttons defined, in this case, text controls

Directions Developer's View

Simply download the below .zip file, and refer to "demo.htm" for the code to add to your page:

Setting up Shockwave 3D Slideshow

Inside demo.htm of the .zip file you downloaded above contains the script references and HTML markup for the slideshow. Each instance of a ShockWave Slideshow is created by calling new jquery.shockwave() in the HEAD section of your page:

jQuery("#slideshowid").shockwave(imagesDataArray, options)

Where "#slideshowid" should be the ID of the empty DIV on your page that will show the slideshow, imagesDataArray a JS Array containing the images (and related info) to be shown, and finally, options a JS object toggling various features of the script.

Firstly, for imagesDataArray, the syntax should be a JS Array in the following format:

var myimages=[
 {
 src: 'images/bonsai.jpg',
 url: 'http://en.wikipedia.org/wiki/Bonsai',
 target: '_blank', // default is _self, which opens in the same window (_blank in new window)
 description: 'Bonsai is a Japanese art form using miniature trees grown in containers.'
 },
 {
  //second image, same deal
 },
 {
  //third image, same deal
 }
]

Each "image" in your slideshow is represented by a JS object carrying up to four attributes to define various aspects of it: src, url, target, and description. All but the "src" attribute is optional.

For options, it should be a JS object that carries one or more of the below options, each separated by a comma (,):

options Description
slider-type The type of the shockwave slider. The current supported types are: "UnhookedSlider", "FlipEdgeSlider", or "CubeSlider".
autostart-slideshow

Defaults to false

 Boolean variable on whether the slideshow should automatically start playing when the page loads.
slideshow-delay

Defaults to 4000

 Sets the pause between each image change in milliseconds, such as 2000 for 2 seconds.
duration Sets the duration of the 3D effect in milliseconds.
viewport-dimension

defaults to null

 Sets the dimensions of the slideshow in the form of:

{width: 350, height: 262}

Images that do not conform to the specified dimensions natively are automatically resized and scaled to fit within this viewport. If this option is NOT defined, the script will use the first image's dimensions to dictate that of the entire slideshow's.
show-description-onimage

Defaults to true

 Boolean on whether to display the description of a slide (if defined) when the mouse rolls over the slideshow.
maximum-slideshow-cycles

Defaults to infinity

 The number of rotation cycles when the slideshow is in auto start mode before it automatically stops.
standard-control-buttons-area
defaults to null

controller-use-icon-buttons

 These options specify whether to display a set of default navigational controls for a slideshow, where to display it on the page, and whether to use image or text link based controls.
  • standard-control-buttons-area: The ID of the arbitrary DIV on your page that will house the default navigational controls for this slideshow. If set to null (or not defined), then no default navigational buttons will be shown.
     
  • controller-use-icon-buttons: Boolean on whether to use the default image buttons as predefined inside the script as the navigational controls, or standard text buttons instead. The path to the images are assumed to be inside icons and with the following file names: 'icons/arrow_left.png', 'icons/button_play.png', 'icons/button_pause.png', and 'icons/arrow_right.png'. relative to the page displaying the slideshow. To change that, edit the paths inside jquery.shockwave.js.

 

next-slide-button

previous-slide-button

play-pause-slideshow-buttons

 These three options allow you to override the default navigational controls (see options above) with your own instead. In order for them to work, first, set the 'standard-control-buttons-area' option above to null first.
  • next-slide-button: The ID of the element (ie: IMG, SPAN) on the page that will act as the "next slide" button.
     
  • previous-slide-button: The ID of the element (ie: IMG, SPAN) on the page that will act as the "previous slide" button.
     
  • play-pause-slideshow-buttons: The ID of the element (ie: IMG, SPAN) on the page that will act as the "play/ pause" button.

For example, the below initialization code plus HTML markup on the page adds custom navigational controls to the given slideshow:

Initialization code:

$('#slideshow6').shockwave(imagesDataArray, {
 'slider-type': 'CubeSlider',
 'rotation-duration': 600, // in ms
 'tiles-in-x': 5,
 'tiles-in-y': 1,
 'wave-fixed-origin': [0, 0],
 'standard-control-buttons-area': null,
 'next-slide-button': $('#nextcontrol'),
 'previous-slide-button': $('#prevcontrol'),
 'play-pause-slideshow-buttons': $('#playpausecontrol')
});

Markup:

<div id='slideshow6'></div>
<ul id='buttons6'>
<li id="nextcontrol">next</li>
<li id="playpausecontrol"><span class="play">play</span><span class="pause">pause</span></li>
<li id="prevcontrol">previous</li>
</ul>

Notice the markup for the two separate controls within the Play/Pause container- the "play" control should get a class of "play", and the other, "pause". The script will then automatically hide one or the other depending on the state of the slideshow.
Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post