|
|
|
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 |
|
- 3D Cube effect of 5x1 tiles
used
- Custom navigational buttons defined, in this case, text controls |
Directions
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 nullcontroller-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. |
|
Image Slide shows
