Prototype plugin: Carousel

ATENTIE:

Aceasta versiune nu mai este de actualitate, iar link-urile de download nu mai functioneaza. Detalii legate de noua versiune sunt aici.

Inspirat de Glider.js creat de Bruno Bornsztein.

Va prezint si ofer un plugin de tip Carousel pentru framework-ul JavaScript Prototype pe care l-am dezvoltat acum ceva timp si care sper ca va va fi de folos. Pentru a nu pierde timpul, inainte de a trece la modul de folosire si download, va invit sa testati cele 3 exemple:

Carousel – exemple

In speranta ca am reusit sa va captez atentia, o sa continuu cu descrierea modului de utilizare:

1. Cerinte

Pentru functionarea acestui plugin veti avea nevoie de:

Alternativ, puteti folosi versiunile comprimate disponibile pe grupul de discutii Prototype: Core, ce reduc considerabil dimensiunea ambelor librarii.

1
2
3

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

2. Markup

Structura minima a documentului si stilizarea corespunzatoare vor trebui sa fie asemanatoare cu urmatoarele:

<div id="scroller">
    <div id="content">
        <div class="slide" id="slide-1"></div>
	<div class="slide" id="slide-2"></div>
        ...
	<div class="slide" id="slide-5"></div>
    </div>
</div>

#scroller {
    width: 500px;
    height: 500px;
    overflow: hidden;
    }
#content {
    width: 2500px;
    }
.slide {
    float: left;
    width: 500px;
    height: 500px;
    }

Codul de mai sus este pentru un Carousel orizontal cu latimea si inaltimea egale cu 500px. Pentru miscare verticala nu trebuie decat sa setati latimea div-ului #content la 500px, adica latimea unui singur slide.

Voi referi in continuare elementele ce controleaza miscarea slide-urilor ca declansatoare. Acestea sunt de doua feluri: cele care controleaza miscarea directa catre un slide anume, si cele care declanseaza miscarea relativa (de tipul anterior / urmator / primul / ultimul):

<a href="#" rel="slide-1" class="carousel-jumper">Slide 1</a>
<a href="#" rel="slide-2" class="carousel-jumper">Slide 2</a>
...
<a href="#" rel="slide-5" class="carousel-jumper">Slide 5</a>

<a href="#" rel="first" class="carousel-control">Prima</a>
<a href="#" rel="prev" class="carousel-control">Anterioara</a>
<a href="#" rel="next" class="carousel-control">Urmatoarea</a>
<a href="#" rel="last" class="carousel-control">Ultima</a>
<a href="#" rel="toggle" class="carousel-control">Toggle</a>

Legatura intre context si actiune este reprezentata de cea dintre atributele class si rel ale declansatoarelor. Un element cu clasa carousel-control si rel slide-x va efectua saltul la slide-ul cu id-ul slide-x, in vreme ce unul cu clasa carousel-jumper si rel next va declansa miscarea la slide-ul urmator celui selectat curent.

Toggle este o actiune speciala in sensul ca retine slide-ul vizitat anterior si permite intoarcerea rapida la acesta fara a mai fi necesara localizarea acestuia de catre utilizator.

3. Initializare si optiuni suplimentare

Initializarea plugin-ului se face prin urmatoarea constructie JS:

1	var carousel = new Carousel($('scroller'), $$('.slide'), $$('a.carousel-jumper', 'a.carousel-control'), {optiune:valoare, optiune:valoare, etc});

Versatilitatea acestui Carousel sta in optiunile ce ii pot fi specificate. Lista tuturor optiunilor disponibile este urmatoarea:

duration: durata unui salt. Implicit este setata la o secunda.
auto: setarea valorii true acestei optiuni va face ca miscarea sa se faca automat, echivalentul declansarii repetate a actiunii next.
frequency: durata intre miscarile automate, in secunde, in cazul in care optiunea anterioara este setata true. Valoarea implicita este de 3 secunde.
jumperClassName: clasa declansatoarelor de primul doilea tip (salt direct). Implicit carousel-jumper.
controlClassName: clasa declansatoarelor de al doilea tip (salt relativ). Implicit carousel-control.
selectedClassName: clasa ce se va adauga declansatorului corespunzator slide-ului curent. Folositor in cazurile asemanatoare celor din exemple pentru realizarea efectului de tab selectat.
beforeMove / afterMove: spre deosebire de celelalte optiuni, acestea sunt doua functii utilizator ce vor fi executate inainte respectiv dupa efectuarea saltului. De exemplu, beforeMove ar putea fi o functie care mareste transparenta slide-urilor inaintea miscarii, pentru a le opaciza la sfarsitul acesteia prin afterMove.

4. Download

Va pun la dispozitie pentru download atat fisierul carousel.js, cat si exemplele intregi:

Download carousel.js

Orice completare / adaugire este binevenita. M-ar bucura in cazul in care il implementati online daca ati pastra comentariile de la inceputul fisierului carousel.js.

February 25, 2008 | Filed Under JavaScript

Comments

22 Responses to “Prototype plugin: Carousel”

Filip
on February 26th, 2008 06:48

Foarte fain si la obiect! Good job :).
Alex
on February 26th, 2008 06:54

super tare…
adi Pintilie
on February 26th, 2008 13:36

Foarte tare ! thanks for sharing :)
Takeshy
on February 26th, 2008 18:21

Bun, bun, si mersi inca o data pentru el :P
Carousel pe Scripteka : Victor Stanciu
on February 27th, 2008 08:29

[...] o discutie cu Juriy Zaytsev (aka kangax) si cateva mici ajustari, am trimis plugin-ul Carousel pe Scripteka. Acesta a fost acceptat si este acum disponibil si in [...]
pixel
on April 7th, 2008 16:16

Super Tare! l-am bagat la bookmarks presit ca o sa am nevoie de el :D Mersi mult!
Victor Stanciu
on April 7th, 2008 16:17

Ma bucur ca iti place, si ma bucura si mai mult sa stiu ca este de folos, multumesc :).
kleampa
on April 18th, 2008 16:48

pauza sau stop/play se poate in vreun fel?
Arnaud
on April 23rd, 2008 17:06

Hi

Nice work on your scripts :) As I am a newbee in Prototype and Scriptaculous, how would you code a switch auto on / auto off button on your carousel for it to become a sort of automatic slideshow ?

Regards
Victor Stanciu
on May 5th, 2008 10:05

Hello Arnaud,

As soon as i will find some time i will post the updated version that includes pause / play capabilities.

Thank you :)
NoNo
on May 5th, 2008 14:54

Thank you Victor :)
NoNo
on June 2nd, 2008 09:21

Here is my attempt at making an “auto button”

auto: function () {
if (this.options.auto) {
this.stop();
this.controls.each(
function(elm) {
if(elm.hasClassName(‘auto-trigger’)){
elm.removeClassName(‘auto-enabled’);
elm.addClassName(‘auto-disabled’);
} else {
elm.setStyle({marginTop:’0px’});
}
});
this.options.auto = false;
} else {
this.start();
this.controls.each(
function(elm) {
if(elm.hasClassName(‘auto-trigger’)){
elm.removeClassName(‘auto-disabled’);
elm.addClassName(‘auto-enabled’);
} else {
elm.setStyle({marginTop:’-1000px’});
}
});
this.options.auto = true;
}
},

Don’t know if it’s your way of coding stuff, but it’s a start :)

What I would like to see is an auto button and a kind of pager.

Regards
Update Carousel : Victor Stanciu
on June 5th, 2008 23:48

[...] am primit mai multe mail-uri care solicitau acest lucru, pun online ultima versiune a plugin-ului Carousel, ce include, printre mici optimizari, si functionalitate pause / resume, in cazul in care se [...]
Mahesh
on October 25th, 2008 12:43

Hi! Very nice script. How can I add Effect.Fade into the script?
Thanks in advance.
Product Slider Function - DesignersTalk
on November 27th, 2008 01:52

[...] Prototype plugin: Carousel | Victor Stanciu Miedlar.com: Prototype Carousel: Version 2 iCarousel – An open source (free) javascript tool for creating carousel like widgets. __________________ http://www.benshu.ch // Evolving with Style [...]
Tripleseat Marketing Site Rebranded | BrightMix
on January 12th, 2009 07:41

[...] the site. To get around that, we cut down the overall number of words, and we also implemented this blingy scroller control by Victor Stanciu, as seen in our customer quotes [...]
Liviu
on February 9th, 2009 16:43

Salut Victor,

Foarte util scriptul.

Vreau doar sa te informez ca il folosesc cu succes aici: https://cheltuiala.noastra.ro
Ibrahim
on August 15th, 2009 01:24

thanks for the script, but where can i find the older version of the script, as i have issues with this version?
bizoi
on November 11th, 2009 11:54

nu merg link-urile de download. multumesc.
Victor Stanciu
on November 11th, 2009 12:49

@bizoi: imi cer scuze, versiunea asta este veche. Detaliile despre versiune actuala si imbunatatita sunt aici.

Numai bine.
fernando Aureliano
on November 1st, 2010 16:49

Hi!

Good job!

I try to use this js and work fine! But I have one problem: The link do not work. How I do for activate link in this carousel? When I delete the line 57 on script, the link works, but the carousel stop of work.

Thanks!
How To Build A Website in 8 Steps, Software Programs Required, Download Carousel Image Script, CSS, Javascript, Meta Tags, Border Radius – Never DC
on January 26th, 2012 02:16

[...] radius. An interesting free javascript that will animate the website with an image slideshow is carousel. Download the script from carousel, the HTML implementation, the javascript files and the CSS file. [...]