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

• HTML
• CSS
• jQuery

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

• DEMO
• DOWNLOAD