depi.sk – svet očami Erika Gyepesa

Vytvorte si fotoblog so sexy efektom v jQuery

Krátko po spustení nového designu v Januári som dostal niekoľko emailov v ktorých sa ma návštevníci pýtali, aký JavaScript plugin som použil na môj fotoblog. Keď som im odpísal, že som použil vlastné riešenie a žiadny voľne dostupný plugin, ľudia odišli zo sklamaním. Preto som sa rozhodol, že zverejním tento krátky návod aj s príkladom ako si fotoblog, či fotogalériu s podobným efektom môžete vytvoriť sami.

Ingrediencie

Prakticky ide naozaj o veľmi jednoduchý kód, ktorý skúsený kóder “naklepe” za pár minút. Nestrácajme preto čas a ukážme si rovno snippety potrebného kódu  (kompletný príklad si môžete stiahnuť na konci článku):

HTML

<ul class="photos">
    <li>
        <h3><a href="#">Fotografia #1</a></h3>
        <a href="#"><img src="images/1.jpg" alt="" /></a>
    </li>
</ul>

Základom je HTML kostra, ktorá nám bude držať fotografie pokope. Ja som zvolil jednoduchý neusporiadaný zoznam, kde každý prvok zoznamu obsahuje názov fotografie a samotný odkaz na fotografiu. V tomto príklade som odkazy na veľké náhľady obrázkov nahradil “#”, keďže samotné zobrazovanie fotografií nie je pointou tohto návodu.

CSS

/* =PHOTOS */
.photos { padding-left: 29px; }

.photos li { border-bottom: 1px solid #CCC; border-top: 1px solid #CCC; float: left; height: 184px; margin: 0 20px 30px 0; padding-bottom: 5px; position: relative; width: 280px; }

.photos li h3 { background-color: #67980B; bottom: 10px; display: none; font-size: 11px; left: 0; line-height: 15px; position: absolute; text-transform: uppercase; text-align: right; width: 100%; z-index: 2; }

.photos li h3 a { color: #FFF; display: block; padding: 8px; text-decoration: none; }

.photos li h3 a:hover { color: #FFF; text-decoration: none; }

.photos img { position: absolute; padding: 5px 0; left: 5px; width: 270px; }

CSS kód je už o niečo dlhší, ale prakticky len naštýluje náš zoznam fotiek do požadovanej formy. Dôležite je hlavne skrytie nadpisu h3, ktoré neskôr budeme zobrazovať pomocou jQuery. Tu by som mal len malú poznámku k tomu, že tento príklad je mierne upravený oproti reálnemu fotoblogu, ktorý mi tu beží. Tam fotografie ešte navyše automaticky orezávam cez CSS  atribút clip. To som však pre jednoduchosť tohto príkladu vynechal. Navyše keďže je orezávanie automatické z hľadiska kompozície sa nie vždy hodí.

jQuery

// =PHOTOS
$('.photos h3').css('opacity', 0.8);
$('.photos li').hover(
    function(){
        $(this).find('h3').fadeIn(400);
        $(this).find('img').fadeTo(300, 0.8).fadeTo(300, 1);
    },
    function(){
        $(this).find('h3').fadeOut(10);
    }
);

Tu sa deje celá mágia a preto tento kúsok kódu popíšem trocha detailnejšie. Na druhom riadku pod komentárom sa nastaví priehľadnosť nadpisu (čo je v našom prípade celý zelený štítok) na 80%, tak získame efekt priehľadnosti. Niektorí sa možno pýtate, prečo som tak neurobil už v CSS kóde, dôvod je prostý. Kód by sa len zbytočne skomplikoval, kvôli (ne)podpore niektorých prehliadačov. jQuery nám zabezpečí funkčnosť naprieč všetkými prehliadačmi.

Na ďalšom riadku sa pri udalosti hover() vykonajú 2 funkcie: prvá sa vykoná pri postavení sa myšou nad položku zoznamu (tj. obrázok), druhá pri opustení zoznamu (obrázku) myšou.

V prvej funkcii po postavení sa nad obrázok zobrazíme zelený štítok s nadpisom s efektom fadeIn(), ktorý bude trvať 400 mikrosekúnd. Následne vykonáme na obrázku efekt, ktorým nastavíme priehľadnosť na 80% a v zápätí na to ju nastavíme naspäť na 100%. To všetko sa udeje spolu za 600 mikrosekúnd (300+300).

V druhej funkcii, teda po opustení obrázku myšou, už len schováme nadpis pomocou efektu fadeOut().

Príklad by mal bez problémov fungovať vo všetkých v súčasnosti používaných prehliadačoch, tj. IE6, IE7, IE8, Firefox, Opera, Safari, Chrome.

To je všetko! :o) Rád privítam vaše názory na tento návod v komentároch ako aj prípadné otázky ohľadom kódu.

Odkazy

Prihlás sa na odber zaujímavých informácií e-mailom

* povinné polia
  • http://infinite.sk Vojto

    Pocuj, ako robis tento source code v clanku? Pozeram, ze je to nejaky export z TextMate, ako sa to robi?

  • http://gluchman.sk Tomáš Gluchman

    Pekné, ale ešte si ošetri rušenie efektov (z fronty). Keď začneš behať myškou po stránke, začnú všetky obrázky blikať, ako šialené :-)

  • http://kusi.sk Kusi

    Pocuj Depi, mam k tomuto otazku: tie male nahlady musim sam vytvorit? totiz, pri stovkach fotiek je to velmi zdlhave a radsej pouzijem napr Picasa alebo nieco ine, aj ked tento efekt je velmi, velmi pekny.

  • http://tiso.wz.cz/ tiso

    Pekné riešenie, ak máš viaceré takéto šikovné veci, tak sem s nimi.

  • http://depi.sk Erik Gyepes

    @Vojto: Správne, TextMate má na to zabudovaný bundle: Bundles → TextMate → Create HTML From Document.

    @Tomáš Gluchman: mne sa to páči, ale nie. :) Máš tip na nejaký článok (okrem manuálu), kde sa dozviem o tomto riešení viac? Celkom by ma to zaujímalo.

    @Kusi: Áno musíš. Ono ten príklad je tak trocha vytrhnutý z kontextu. Ide o ukážku ako je to možné urobiť, implementácia s nejakým konkrétnym systémom je už na danom developerovi. U mňa to v pozadí všetko poháňa WordPress a plugin Nextgen Gallery, ktorý vlastne používa tento template.

    @tiso: vďaka, keď bude čas a chuť určite pridám aj ďalšie veci. A najmä – pokiaľ bude dopyt ponuka určite príde. :)

  • Tomáš Gluchman

    O článku ani nie, keď som sa s tým problémom stretol, stačil manuál a príklady čo sú tam :-)

    V podstate ide len o prepísanie “vrodených” funkcií fadeIn a fadeOut na jQuery animácie s doplnením stopiek všetkých efektov, ktoré už na elemente prebiehajú, resp. sú vo fronte. H3 ale potom musí mať display block a len zneviditeľnený. Nasledujúci kód sa ale zrejme asi trochu tuna rozbije :-)

    $(‘.photos h3′).show().css(‘opacity’, 0);
    $(‘.photos li’).hover(
    function(){
    $(this).find(‘h3′).stop().animate({‘opacity': 1},400);
    $(this).find(‘img’).stop().animate({‘opacity': 0.8}, 300, function() { $(this).animate({‘opacity': 1}, 300); });
    },
    function()
    $(this).find(‘h3′).animate({‘opacity':0}, 10);
    }
    );

  • http://depi.sk Erik Gyepes

    Aha, takto. Myslel som, že chceš použiť jQuery.queue() http://api.jquery.com/jQuery.queue/ alebo niečo také. Lebo o tom som zhodou okolností predchvílou čítal v dnešnom článku na nettuts http://net.tutsplus.com/tutorials/javascript-ajax/uncovering-jquerys-hidden-features/

    Nabudúce použi nejaký pastebin :)

  • http://ipremiere.eu/ blizzboz