Prototype plugin: Scroller

Va ofer un nou plugin pentru Prototype, numit simplu Scroller. Ca de obicei, inainte de detaliile tehnice, testati exemplul urmator:

Scroller – exemplu

1. Cerinte

Plugin-ul necesita Prototype 1.6 pentru a functiona.

1
2

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

2. Markup

Cu toate ca existenta urmatoarelor elemente este obligatorie, pozitia si stilizarea lor este in mare parte la discretia voastra:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="wrapper">
    <a href="#" class="scroll vertical" id="scroll-up" rel="up">&nbsp;</a>
    <a href="#" class="scroll vertical" id="scroll-down" rel="down">&nbsp;</a>
    <a href="#" class="scroll horizontal" id="scroll-left" rel="left">&nbsp;</a>
    <a href="#" class="scroll horizontal" id="scroll-right" rel="right">&nbsp;</a>
 
    <a href="#" class="scroll diagonal" id="scroll-nw" rel="nw">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-ne" rel="ne">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-se" rel="se">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-sw" rel="sw">&nbsp;</a>
 
    <div id="scroller">
        <div id="inner"></div>
    </div>
</div>

Elementele cu clasa scroll vor fi cele care vor declansa miscarea (interactiunea cu ele se face prin hover si click), directia acesteia fiind data de atributul rel al fiecarui declansator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* ---------------------------------------- CONTAINERS */
#wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 10px auto 0 auto;
    padding: 50px;
    }
#scroller {
    width: 500px;
    height: 500px;
    overflow: hidden;
    }
#inner {
    width: 5000px;
    height: 5000px;
    }
.scroll {
    position: absolute;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* ----------------------------------- SCROLL CONTROLS */
.horizontal {
    width: 40px;
    height: 500px;
    top: 50px;
    bottom: 0;
    }
.vertical {
    width: 500px;
    height: 40px;
    left: 50px;
    right: 50px;
    }
.diagonal {
    width: 40px;
    height: 40px;
    }
#scroll-left {
    left: 0;
    }
#scroll-right {
    right: 0;
    }
#scroll-up {
    top: 0;
    }
#scroll-down {
    bottom: 0;
    }
#scroll-nw {
    top: 0;
    left: 0;
    }
#scroll-ne {
    top: 0;
    right: 0;
    }
#scroll-se {
    bottom: 0;
    right: 0;
    }
#scroll-sw {
    bottom: 0;
    left: 0;
    }

Acest markup asigura minimul necesar pentru pozitionare si dimensionare. Pentru o configurare mai detaliata cercetati codul din exemplul de la inceput.

3. Initializare si optiuni suplimentare

Initializarea plugin-ului se face prin urmatoarea constructie JS:

1

var scroller = new Scroller($('scroller'), $$('.scroll'), {optiune:valoare, optiune:valoare, etc});

Optiunile disponibile sunt:

4. Download

Puteti descarca atat fisierul scroller.js, cat si exemplul:

Download scroller.js
Download exemplu

Ca de obicei, completarile si adaugirile sunt binevenite.

March 21, 2008 | Filed Under JavaScript | 6 Comments 

Carousel pe Scripteka

Dupa o discutie cu Juriy Zaytsev (aka kangax) si cateva mici ajustari, am trimis plugin-ul Carousel pe Scripteka. Acesta a fost acceptat si este deci acum disponibil si in engleza.

Scripteka este o colectie de extensii pentru Prototype oferite gratuit de catre autorii acestora, si o buna metoda de a face publice si de a raspandi asemenea scripturi.

February 27, 2008 | Filed Under JavaScript | 4 Comments 

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:

1
2
3
4
5
6
7
8

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

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

1
2
3
4

<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>
1
2
3
4
5

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

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 | 22 Comments