CSS/JS galerija

[iMa_NeKo_PljUgU]

Nešto sam se smorio danas (prehlađen sam) pa sam se malo zezao sa JS-om

Napravih neku kvazi galeriju za slike pa rekoh da postavim ako treba nekom :)

Features: :D
- 0% PHP, ASP itd.
- 100% CSS/JS/HTML
- Fade In/Out
- Ne koristi nikakve JS biblioteke
- SlideShow (Play | Pause | Stop)

Testirano u:
- Opera 9.6x
- Firefox 3.0.11
- Google Chrome
- Safari 4 Beta
- IE 7

Demo:
Linak (http://www.eynsoft.com/myGallery/)

Download:
Linak (http://www.eynsoft.com/myGallery/myGallery.rar)

[Remedy]

Radi i u:
- firefox 2.0.0.20
- safari 4(530.17)
- ie 6 (fade nije najsrecniji)

[iMa_NeKo_PljUgU]

Mali update :)

Dodao sam slide show/player kontrole, kao i označavanje trenutno aktivnog thumbnaila :D

P.S. Namerno sam postavio menjanje slika da ide brže :)

[holodoc]

Ne izgleda loše a uz to još i radi ;)

Dva predloga.

1) Zapakuj kod u literalnu JS notaciju. Kompletna stvar će biti mnogo lepša kada se vidi jasna hijerarhija promenjljivih i metoda. Ja recimo kodujem JS sada gotovo isključivo u literarnoj notaciji.

2) Pobrini se da ti JS bude unobtrusive tipa i da event handlere za onclick kačiš van HTML-a ;)

3) Ovo je samo preporuka naravno ali ja obično izbegavam da koristim document.getElementById u kodu za referenciranje objekata već napravim jednu helper funkciju (ili metod ako koristim literalnu notaciju) koju nazovem recimo _get() (nemoj da koristiš $, $$ i slično jer ćeš definitivno naleteti na konflikte ako ikada ovaj kod ubaciš na stranice koje koriste JS biblioteke) i onda nju koristim za referenciranje. Recimo ovako:
_get(idName){
return document.getElementById(idName);
}

Hint za stavku #2: nemoj da koristiš rel atribut slika za prenos bilo kakvih parametara zato što sam ja skoro imao posla sa SEO agencijom za jedan strani sajt gde sam morao da modifikujem Lightbox da ne koristi rel atribut da inicira event handlere za Lightbox jer je navodno to loša rabota za SEO. Ako te interesuje kako sam rešio problem reci i objasniću ovde u najkraćim mogućim crtama ;)

[iMa_NeKo_PljUgU]

...
1) Zapakuj kod u literalnu JS notaciju. Kompletna stvar će biti mnogo lepša kada se vidi jasna hijerarhija promenjljivih i metoda. Ja recimo kodujem JS sada gotovo isključivo u literarnoj notaciji.
2) Pobrini se da ti JS bude unobtrusive tipa i da event handlere za onclick kačiš van HTML-a ;)

Ovo drugo me veoma zanima... Moraću to da proučim (već sam našao par linkova) :)

3)...Recimo ovako:
_get(idName){
return document.getElementById(idName);
}

Korisna stvar moram da priznam :D

Hint za stavku #2: n...
Našao sam ovaj tutorial (http://labs.adobe.com/technologies/spry/articles/best_practices/separating_behavior.html) i čini mi se da ne koristi "rel" :)