Prototype extension: Showcase

Examples
Requirements
Markup and styling
Initializing and available options
Download
About the author

Examples

Before going further, make sure you check out the examples for a quick view of the extension's functionality:

Other examples

Besides horizontal, there are 2 more layouts for the Showcase:

Requirements

Showcase.js needs the Prototype JavaScript framework (version 1.6) and the effects.js component of Script.aculo.us (version 1.8) in order to function.

Markup and styling

First of all, download showcase.js, then include the other required JavaScript files (prototype.js and effects.js must be included before showcase.js):

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="showcase.js"></script>

Then, the minimum markup / styling should be similar to:

<a href="#next" class="controls" rel="next">Next</a>
<a href="#previous" class="controls" rel="previous">Previous</a>	
<ul id="showcase">
	<li><img src="images/1.jpg" alt="1" /></li>
	<li><img src="images/2.jpg" alt="2" /></li>
	<li><img src="images/3.jpg" alt="3" /></li>		
	...
	<li><img src="images/n.jpg" alt="n" /></li>
</ul>

#showcase {
	position: relative;
	width: 700px;
	height: 170px;
	}
#showcase li {
	width: 170px;
	height: 170px;
	float: left;	
	list-style-type: none;	
}	

#showcase li img {
	width: 100%;
	height: 100%;
}

The above code is for a 700x170px Showcase with horizontal movement. Switching to vertical or diagonal movement is done at Initialization.

The elements that trigger the Showcase's movement fall into two categories: the actual slides (clicking on one causes the jump to it), and the ones that start a relative jump (previous / next).

Initializing and available options

Initializing and configuring the Showcase is done with just one line of code:

new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {[options]});

The available options / parameters are (all of them are optional):

direction: Choosing the orientation is done by initializing the respective class:

new Showcase.Horizontal([...]);

new Showcase.Vertical([...]);

new Showcase.Diagonal([...]);

ratio: This is the ratio between the center slide and the ones at the ends, and controls the step by which the slides are resized. For example, a ratio of 0.3 will make the first and last slides one third of the one in the middle (which is not resized). The ones between this one and the first / last will be incremented gradually in proportion to the ratio. Default value: 0.5 (50%)
size: The total number of slides visible at one time. Suppose you have 20 slides you want to showcase, but only want to display 7 at a time. You will set this parameter with the value 7, and Showcase will only display 7 slides at a time. The remaining slides will roll in and out of the Showcase when jumping. Default value: none, it starts out as the total number of slides. Attention: This must be an odd number.
duration: This is the duration of a full movement. Default value: 0.5 seconds.
initialDelay: This controls the amount of time that passes from the moment the Showcase is initialized to the moment the slides spread out, creating a nice start-up effect. Default value: 1 second.

Download

You can download Showcase.js with or without the examples:

Showcase.js is released under the MIT Licence. It basically implies that you can do anything you want with the code :).

Like the plugin?

If you find the extension useful, please consider making a donation:

About the author

My name is Victor Stanciu, and I am a web developer living in Bucharest, Romania. If you want to get in touch or suggest new features, e-mail me at contact@victorstanciu.ro.