CSS Codes
CSS Layouts

<!doctype html>

<head>

<style>
/* CSS for custom nav controls of Cube Slider 2. Remove if desired */

ul.cubeslider2-navarea{
list-style: none;
overflow: hidden;
}

ul.cubeslider2-navarea li{
display: block;
float: left;
cursor: pointer;
padding: 7px;
margin:right: 5px;
}

ul.cubeslider2-navarea li:hover{
background: lightyellow;
}

</style>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='js/modernizr.custom.13303.js'></script>
<script type='text/javascript' src='js/jquery.shockwave.js'>

/***********************************************
* Shockwave 3D slideshow script- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>
<script type='text/javascript' src='js/jquery.shockwave.effects.js'></script>


<script>

var imagesDataArray = [ //For demos, define a single set of images to be used in all of the demos below
{
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.'
},
{
src: 'images/3.jpg',
url: 'http://en.wikipedia.org/wiki/Red_telephone_box',
description: 'The red telephone box is a familiar sight on the streets of the United Kingdom.'
},
{
src: 'images/forrest.jpg',
description: '',
},
{
src: 'images/leaves.jpg',
url: 'http://en.wikipedia.org/wiki/Autumn',
description: 'Autumn marks the transition from summer into winter, in September (Northern Hemisphere) or March (Southern Hemisphere).'
},
{
src: 'images/village.jpg',
description: '',
}
];


jQuery(function(){

$('#unhookshow').shockwave(imagesDataArray, {
'slider-type': 'UnhookedSlider',
'random-time-to-unhook': 1500, // in ms
'free-fall-time': 150, // ms
'autostart-slideshow': true,
'maximum-slideshow-cycles': 2,
'slideshow-delay': 2000,
'duration': 100,
'tiles-in-x': 5,
'tiles-in-y': 5,
'show-permanent-description': false,
'standard-control-buttons-area': $('#unhookbuttons'),
'viewport-dimension': {width: 350, height: 262}
});



$('#flipedge').shockwave(imagesDataArray, {
'slider-type': 'FlipEdgeSlider',
'tiles-in-x': 7,
'tiles-in-y': 1,
'fixed-rotation-axis': [1, 0, 0],
'controller-default-wave-origin': ['50%', '50%'],
'autostart-slideshow': true
});

$('#cubeslider').shockwave(imagesDataArray, {
'slider-type': 'CubeSlider',
'rotation-duration': 600, // in ms
'tiles-in-x': 1,
'tiles-in-y': 1,
'rotation-axis': 'x',
'show-description-onimage': false,
'autostart-slideshow': true
});

$('#cubeslider2').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': $('#cubeslider2next'),
'previous-slide-button': $('#cubeslider2prev'),
'play-pause-slideshow-buttons': $('#cubeslider2playpause')
});

})

</script>

</head>

<body>


<h3>UnhookedSlider</h3>
<div id='unhookshow'></div>
<div id='unhookbuttons'></div>



<h3>FlipEdgeSlider</h3>
<div id='flipedge'></div>


<br />

<h3>CubeSlider</h3>
<div id='cubeslider'></div>

<br />

<h3>CubeSlider 2</h3>
<div id='cubeslider2'></div>
<ul class="cubeslider2-navarea">
<li id="cubeslider2prev">previous</li>
<li id="cubeslider2playpause"><span class="play">play</span><span class="pause">pause</span></li>
<li id="cubeslider2next">next</li>
</ul>

</body>