Slideshow with lamellar effect

Bookmark and Share

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

Comments

andy
Nice, thanks for sharing :)do you have any plans to extend it to allow other transition type
andy at 09:28AM, 2011/06/20.
sathish
very nice
sathish at 04:46AM, 2011/07/28.
Prem
very interesting......thanks for inner most work
Prem at 06:21AM, 2011/09/24.
sameer
I unable to chnage the images link properly can you please help me in this thanks
sameer at 10:27AM, 2011/11/03.
Leo
Great gallery effect! But, have you noticed it doesn't work in Chrome when other javasctipt is running on the page? For instance check this page in Chrome...Any ideas how to solve it?Thanks!
Leo at 03:39PM, 2012/03/24.
venky
it is nice script
venky at 10:10AM, 2012/07/02.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com