Prototype plugin: Showcase

Showcase

Am dezvoltat acest plugin ca pe o jucarie personala, asa ca il prezint aici in speranta ca ii va fi de folos cuiva.

Ca de obicei, inainte de detaliile tehnice, vizitati paginile cu exemple:

1. Cerinte

Pentru functionarea acestui plugin veti avea nevoie de:

Acestea vor trebui incarcate in pagina inaintea Showcase.js:

1
2
3

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

2. Markup

Minimul de markup si stilizare necesare pentru functionare este urmatorul:

1
2
3
4
5
6
7
8
9

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#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%;
}

Codul de mai sus corespunde unui Showcase orizontal de 700x170px. Orientarea (orizontala / verticala / diagonala) este selectata la initializare:

3. Initializare

Initializarea plugin-ului se face printr-o singura linie de cod:

1

new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {optiune: valoare, optiune: valoare, etc});

Orientarea este aleasa prin initializarea clasei respective din cele 3 disponibile:

1

new Showcase.Horizontal(slides, controls[, options]);
1

new Showcase.Vertical(slides, controls[, options]);
1

new Showcase.Diagonal(slides, controls[, options]);

4. Parametri optionali

Parametrii sunt selectati la initializare, in format JSON: {parametru: valoare, parametru: valoare}:

5. Download

Puteti descarca atat Showcase.js, cat si exemplele de mai sus:

Download Showcase.js (9.4 KB)
Download Showcase.js – Packed (3.5 KB)
Download Exemple

Lansez Showcase.js sub licenta MIT, care in principiu spune ca oricine poate face ce vrea cu codul :)

October 4, 2008 | Filed Under JavaScript | 20 Comments