New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Slideshow with lamellar effect
Credits
This script has been submitted by Peter Gehrig at www.fabulant.com
Script url: http://www.fabulant.com/downloadcenter/imglamellar3/imglamellar3.html
Download script
You can download the entire script from this Zip file.
Demo
Configuration
Picture array
To use this script, you have to create an array containing the image source, caption and urls for your pictures.
Example:
var pictures = [
{ src : 'images/image1_big.jpg',
msg : 'Picture from a Norwegian island',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image2_big.jpg',
msg : 'Gokart is fun',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image3_big.jpg',
msg : 'Gokart is fun',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image4_big.jpg',
msg : 'Me at the keyboard',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image5_big.jpg',
msg : 'Somewhere in Europe',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image6_big.jpg',
msg : 'My chess set',
url : '#'
}
];
Configuration options
These are the available configuration options for this script:
- target_url: Which window to open when someone clicks on a picture ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
- x_slices: Number of lamellas
- slideshow_width: Width of slideshow - notice that all pictures should be of the same dimension in the slideshow
- slideshow_height: Total height of slideshow
- message_height : Height of caption below the pictures.
- pause: pause beween the pictures in seconds
Example:
// target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"
// number of lamellas.
var x_slices=8
// width of slideshow
var slideshow_width=400
// height of slideshow
var slideshow_height=320
// height of messagebox
var message_height=17
// pause beween the pictures (seconds)
var pause=1
CSS
The layout of the caption below the picture can be configured with CSS
Example:
<style type="text/css">
.messagestyle{
font-family:Arial;
font-size:11px;
color:white;
background-color:#888888;
text-align:center;
position:absolute;
bottom:0px;
vertical-align:middle;
margin:0px;
}
Include slideshow-lamellar.js file
After you have specified pictures and configuration options, you should include the slideshow-lamellar.js file
Example:
<script src="/submitted-scripts/slideshow-lamellar/js/slideshow-lamellar.js"></script>
For more help, download the zip file and see how the script has been implemented in demo.html
No one has commented this - be first!
Post your comment
Comment preview: