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 :)

Related posts:

  1. Prototype plugin: Carousel
  2. Prototype plugin: Scroller
  3. Prototype: Hotkeys
  4. Prototype: Carousel – Update
  5. Sizzle si Prototype
October 4, 2008 | Filed Under JavaScript 

Comments

19 Responses to “Prototype plugin: Showcase”

  1. Gabriel Agu
    on October 4th, 2008 13:55

    Cute :)
    Daca faci si o versiune care sa suporte in loc de imagini div-uri cu text/linkuri/butoane, dau o bere la urmatorul Gay Hering.

    Keep up the good work.

  2. misterjinx
    on October 4th, 2008 14:07

    eu ţi-am mai zis deja, e excelent ;)

  3. Razvan Pavel
    on October 4th, 2008 14:11

    foarte frumos :)

  4. Filip
    on October 4th, 2008 14:25

    Good job!
    Adauga-i si suport de mousewheel (http://www.ogonek.net/mousewheel/demo.html) pentru navigatie & it’s perfect!

    De fapt, nu mi se pare foarte smooth animatia… ai incercat si cu alte efecte? Ar merge ceva cu acceleratie…
    Pentru jQuery, eu am adaptat versiunea de la http://imageflow.finnrudolph.de/ :)

  5. alecs
    on October 4th, 2008 14:30

    Mane cred ca merit o mentionare la credits :)
    Felicitari a iesit super bine … dar get ready pentru ca o sa facem multe chestii misto impreuna … eu te-am mai avertizat :)

  6. gabi solomon
    on October 4th, 2008 17:37

    super tare,
    mi se pare foarte utila la galeriile de imagini un astfel de plugin, pentru a mai scoate monotonia de la lightbox.

  7. Victor Stanciu
    on October 4th, 2008 17:53

    Multumesc baieti, ma bucur ca place :)

    @Filip: foarte buna ideea cu rotita de la mouse! Am mai controlat miscarile din rotita la un proiect mai demult, nu m-am gandit sa ma folosesc de el si aici :)
    Nu sunt de acord in schimb cu animatia. Am testat pe 5 browsere si pe calculatoare diferite, mi se pare chiar cursiv. Exemplul dat de tine in schimb mie mi se misca foarte foarte prost.

  8. Ovidiu Boc
    on October 6th, 2008 10:45

    Da domne da… place jucaria :)
    Congrats !

    Te-ai gandit si la o pagina dedicata unui toolkit based on prototype & scriptaculous care sa cuprinda scroller-ul, carousel-ul, showcase-ul, etc. ? :P Just a thought…

  9. Victor
    on October 7th, 2008 20:27

    foarte tare

    pt wheel recomand metoda asta: http://andrewdupont.net/2007/11/07/pseudo-custom-events-in-prototype-16/

  10. Filippo Buratti
    on October 23rd, 2008 01:29

    compliments for code and the beautiful effects,
    I am using your script and I noticed a little tiny bug: the next button don’t works on google chrome.
    Instead it works perfectly in safari. I do not know

  11. Victor Stanciu
    on October 23rd, 2008 10:49

    Hello Filippo,

    I am aware of the bug Showcase has on Chrome, and i plan to fix it as soon as possible.

    To be honest, i am not looking at this version of Chrome as a worthwile browser. It is my personal oppinion that it was released way too early, and that we will have to wait until Google releases a stable version (when it comes to JS and Flash).

    Thank you,
    Victor.

  12. max
    on January 21st, 2009 11:50

    Nice code! thanks.
    I have only 1 problem, maybe you can help me: how can I associate a link to the front image?
    Example: i’d lile to link the first (and other following imgs) to an url, but changing the # in the code doesn’t work…

    Any tip about it?

    Thanks man!

  13. dev21
    on January 28th, 2009 18:48

    same question , how activate href link ? thanks

  14. liliwol
    on January 30th, 2009 17:02

    Very nice code!

    To activate links, i added an onclick=”function()” call on img section.

    I have a problem to find how sections are placed. How could we configure sections to not appear behind, but just side by side others?

    Thanks a lot!

  15. Victor Stanciu
    on January 30th, 2009 20:59

    Hello liliwol,

    You can control the distance between sections simply by making the width of the container large enough to fit them all (#showcase).

  16. dario
    on February 2nd, 2009 04:09

    great work!

    i can’t activate href attribute, someone may help me?

    thank you

  17. hemmat
    on March 6th, 2009 15:49

    liliwol said:
    “To activate links, i added an onclick=”function()” call on img section.”

    Please, any body can explain how i do that .. i’m not good with JS .. and to be specific i want to know the exact code and where i should put it.. this will be very nice help ..

    but really i cant deny how good this script is.. really good job. :)

  18. b33z
    on July 27th, 2009 04:49

    come on guys….how about an answer to that “onclick” question.. considering how good this little gem is, im sure lots of people would like to know!

  19. Tobias Hartung
    on May 24th, 2010 18:39

    It’s a long time since ppl asked this, but to make an onclick link just put:

    onclick=”location.href=’http://www.prinfolinderoths.se’;”

    Anyhow, I got a problem when having an even number of images, 2, 4, 6, 8, 10 etc. the script won’t load.
    Same when setting size to an even number it fails to load.

    I tested with the example files to check so i hadn’t messed up the code, but same problem there.

    I’ll get back if I sort it out, just thought i should let you know :)

    Great work!

Leave a Reply