Shockwave 3D slideshow v1.0
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.
|
- 3D Cube effect of 1x1 tile used |
|
- FlipEdgeSlider effect of 7x1 tiles used |
- 3D Cube effect of 5x1 tiles
used |
Simply download the below .zip file, and refer to "demo.htm" for the code to add to your page:
-
shockwaveshow.zip (which contains the following):
- demo.htm
- js/jquery.shockwave.js
- js/jquery.shockwave.effects.js
- js/modernizr.custom.13303.js
- icons/ (directory containing the default navigational buttons used. This path to it is assumed to be relative to the script page).
- Some other miscellaneous files
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.
|
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.
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, { Markup: <div id='slideshow6'></div> Notice the markup for the two separate controls within the Play/Pause
container- the "play" control should get a class of " |