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

Un nou inceput

Odata cu inceputul de an, impreuna cu Ovidiu Boc si Catalin Preda, am decis sa parasim F5 Solutions. Imi rezerv dreptul de a nu comenta prea mult asupra motivelor (obiective de altfel) care au stat la baza acestei decizii, insa bilantul este unul cat se poate de imbucurator: suntem mandri de realizarile noastre in cadrul F5 Solutions iar proiectele realizate in ultimii doi ani, precum si oamenii cu care am lucrat si am interactionat in aceasta perioada, ne vor ramane mereu in suflet.

De ce am facut acest pas ? Pentru ca putem oferi mai mult, mult mai mult si pentru ca astfel am considerat ca putem ajuta intr-un fel la dezvoltarea acestei industrii.

Asadar, astazi a marcat prima zi a unui nou inceput: HyperActive. Suntem optimisti cu privire la viitor si pornim la drum cu promisiunea ca vom incerca sa facem tot posibilul pentru a ne atinge obiectivele propuse.

Voi reveni cu mai multe detalii intr-un viitor apropiat.

February 20, 2008 | Filed Under Personal | 14 Comments 

Despre PFA – Partea 1 – Autorizare

Atentie

Incepand cu data publicarii ordonantei numarul 44 din 16.04.2008 in Monitorul Oficial, acest articol nu mai este 100% corect si conform realitatii. Va rog sa luati in considerare respectiva ordonanta:

Ordonanta de urgenta nr. 44 din 16.04.2008

Cu multumiri Daliei Teodorescu si Mirelei Dabu pentru sfaturile fiscale, financiare si legislative, si lui Filip Chereches-Tosa si Aurelian Oancea pentru cele din proprie experienta.

De ce aceasta serie de articole ?

Dupa cum bine stim cu totii, birocratia din Romania pune bete in roate oricarei incercari de a legaliza o activitate. Printre marile probleme de care ne lovim toti se numara:

Trecut recent prin toate procedurile de obtinere a autorizatiei (PFA), vreau sa concentrez aici informatiile legate de aceste proceduri pe care le-am adunat pe parcurs. Acest prim articol este legat strict de procedura dobandirii autorizatiei de PF, urmand ca in viitoarele sa ating si restul aspectelor, cum ar fi impozitarea, asigurarile sau contabilitatea. Completarile sunt desigur binevenite.

Read more

February 17, 2008 | Filed Under PFA | 31 Comments 

Cuvant inainte

Va salut!

Dupa foarte multa vreme petrecuta in asteptarea timpului liber necesar, am gasit un moment de respiro in care sa ma pot ocupa de personalizarea acestei teme de WordPress si urcarea site-ului.

Simteam de mult timp nevoia unui loc in care sa pot impartasi lucrurile pe care le consider de folos si a unui mod mai rapid de a comunica cu mediul online. Mi se intampla prea des sa vreau sa public o idee / articol / snippet etc, iar pana acum eram prea limitat in optiuni. Asa ca am decis ca incepand de azi sa scriu aici despre variate teme: de la dezvoltare, la lifehacks, la GTD, la mici incursiuni pe taramul legislatiei Romaniei, totul presarat cu note si experiente personale.

O sa incep prin publicarea catorva draft-uri pe care le-am scris inca dinainte de a folosi o platforma speciala, deoarece mi s-au parut prea interesante si cu potential de a folosi si altora ca sa le pierd din minte.

La treaba deci!

February 17, 2008 | Filed Under Personal | 6 Comments 

  • Arhiva