Dynamic Drive DHTML Scripts- Coverflow Image Gallery

FF2+ IE8+ Opr8+

Coverflow Image Gallery

Author: Dynamic Drive

Description: Coverflow Image Gallery uses the excellent Sly scrolling framework to quickly create a Coverflow-like image gallery that when clicked on displays a larger version of the image. A description can also be shown beneath the enlarged image. Both the small and enlarged images are automatically scaled to fit within the available real estate regardless of their native dimensions. Note that the 3D visuals of Coverflow isn't visible in IE due to its lack of CSS's perserve-3d value support. For those browsers a flat design is shown instead.

Demo:

Place Holder

Directions

Step 1: Add the following to the <head> section of your page:

The script references three files, which you should download below:

coverflow.css
coverflow.js (added to end of page)
sly.min.js (Sly scrolling framework v1.3 Project Page)

Step 2: Add the below sample HTML to your page where you want the gallery to be shown:

Customization

The first thing you should do is look at the bottom inside coverflow.js, which contains the initialization code for a single instance of Coverflow Gallery:

coverflowimages({
coverid: 'coverflow1',
images: [
['angelinasmall.jpg', 'angelina.jpg', 'Angelina Jolie, is an American actress ...'],
['millasmall.jpg', 'milla.jpg', 'Born and immigrated with her parents to the United States when she\'s five...'],
['josiesmall.jpg', 'josie.jpg'],
['haydensmall.jpg', 'hayden.jpg', 'Hayden Panettiere is a native of New York..'],
['ashleysmall.jpg', 'ashley.jpg', 'Ashley was born in California...'] // <-- no comma after last image
] // <-- no comma after last option
})

"coverid" is the ID of your Coverflow main container, and "images" is a two dimensional array containing a list of images, each in the following format:

['path_to_thumbnail_image', 'path_to_fullsize_image', 'optional_text_description']

For the text description, you should escape any apostrophes with a backslash, for example:

'Born and immigrated with her parents to the United States when she\'s five...'

Modifying Coverflow gallery dimensions

Inside coverflow.css, the line:

.wrap{
max-width: 700px; /* Width of coverflow gallery. Should be in px*/
}

controls the width of the gallery. Edit to the desired value, which must be in pixels unfortunately, though you can set breakpoints in your CSS via CSS media queries to make the gallery semi-responsive.

The dimensions of each "panel" that houses the images are set in the CSS following the above, highlighted in red:

.frame {
height: 250px; /* height of each item */
line-height: 250px; /* height of each item */
overflow: hidden;
}
"
.frame ul li {
float: left;
width: 227px; /* width of each item */
height: 100%;
"

When you modify these values, the images contained automatically scale to fit accordingly.

Using CSS media queries to alter Coverflow gallery width

The width of the Coverflow Gallery is set inside coverflow.css on the .wrap selector, which as mentioned must be in pixels unit. This means unfortunately that Coverflow gallery cannot be fluid in dimensions, a key part of a responsive layout. All is not lost, however. Using CSS media queries, you can still define specific breakpoints that would cause the gallery to change widths automatically, such as when the width of the window is 860px, modify the gallery's to 500px, and when the former is 480px, change the later to 460px (so it's full screen, discounting page margins/borders). Granted it's not as flexible and robust as a true fluid gallery, though it is sufficient to make the gallery mobile friendly. To do this, first, make sure at the HEAD of your page you have the following meta tag:

Then, inside coverflow.css at the bottom, add a code similar to the following:

/* #### CSS that's applied when the window/device width is 860px or less #### */
@media screen and (max-width: 860px){
.wrap{
max-width: 840px;
}
}

/* #### CSS that's applied when the window/device width is 480px or less #### */
@media screen and (max-width: 480px){
.wrap{
max-width: 460px;
}
}

Here I've set two CSS breakpoints, one at 860px, and the other at 480px. On a desktop where the browser window can be freely resized, this type of responsive approach shows its major shortcoming- when the user's browser is either at 850px or 600px, the gallery remains stiff at 840px wide, making it essentially unresponsive in all but the actual CSS breakpoint itself. However, on mobile devices where the user's screen dimensions are set in stone, such a responsive approach is enough. On all devices with screen dimension 480px wide for example, he/she can expect the gallery to be at 460px, without any potential unexpected changes to this equation.

Using `onselecteditemclick()` event handler to specify the action when users click on selected image

The default action when users click on the active image inside the gallery is to launch a larger version of it in front of an overlay. If you wish to replace that with your own custom action, you can make use of the onselecteditemclick()event handler, which is defined as part of the initialization code:

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post

Coverflow Image Gallery

Customization

Modifying Coverflow gallery dimensions

Using CSS media queries to alter Coverflow gallery width

Using onselecteditemclick() event handler to specify the action when users click on selected image

Using `onselecteditemclick()` event handler to specify the action when users click on selected image