Penge galéria

Szerző: admin | CSS ,JQuery | 2010 november 1. 00:30

Egy külfldi blogon találtam a most bemutatásra kerülő galériát, ami egyszerű mégis magával ragadó effektet tartalmaz. Kis jQuery, kis css, kis php, minden ami kell.

Előszó

Nem áll szándékomban apró cafatokra szedni a kódot, mivel a legtöbb dologról már írtam, vagy kis angol tudással és tapasztalattal rá lehet jönni a funkciójukra. Hogy ne csak a levegőbe beszéljek, itt meg tudjátok nézni a példát.

PHP

Ebben semmi boszorkányság nincs, annak ellenére hogy mindenszentek van /össze is dobtam egy új fejlécet a koleszomnak/. Glob() függvény végigjár egy mappát amiben képek vannak, és le generálja az elemeket, amiket később CSS eligazít, jQuery pedig kicsit felturbóz.

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

<!-- nagy kép -->
<div class="mainframe">
	<div id="largephoto">
        <!-- töltő csík -->
		<div id="loader"></div>
 
		<div id="largecaption">
            <!-- penge fény -->
			<div class="captionShine"></div>
            <!-- kép aláírás -->
			<div class="captionContent"></div>
		</div>
 
		<div id="largetrans"></div>
	</div>
</div>

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

<!-- előnézeti képek -->
<div class="thumbnails">
	<br /><br /><br />
 
	<?php
    //bejárjuk a mappát amiben a képek vannak, és mindegyiknek létrehozunk egy elemet
	$files = glob( 'img/examples/galeria/thumbnails/*' ) ;
	foreach($files as $filename) : ?>
 
	<div class="thumbnailimage">
		<div class="thumb_container">
			<div class="large_thumb">
				<img src="/img/examples/galeria/thumbnails/<?php echo basename($filename); ?>" class="large_thumb_image" alt="thumb" />
				<img src="/img/examples/galeria/large/<?php echo basename($filename); ?>" class="large_image" rel="<?php echo basename($filename); ?>" />
				<div class="large_thumb_border"></div>
				<div class="large_thumb_shine"></div>
			</div>
		</div>
	</div>
 
	<?php endforeach; ?>
</div>

Az egyetlen dolog ami ismeretlen lehet az a basename() ami egy elérési útból visszaadja a fájlnevet. Erre azért van szükség, mivel a glob teljes elérési utat ad vissza.

CSS

Itt kezd a történet érdekessé válni. Ahhoz, hogy az egész együtt jó összképet adjon több dolog szükséges.

Előnézeti képek

A jobb oldali kis képek mögött van (a) egy sötét hátterű div, ebben egy rejtett kép, (b)egy fehér bordájú kép, és (c) egy olyan div aminek a háttere a kis előnézeti kép. A következő ábrából remélem jobban érthető lesz:

A forráskód tanulmányozása közben feltűnhet, hogy a nagy rejtett képet igazából nem használjuk semmire, azonban ez nem teljesen igaz. Ennek köszönhetően az oldal betöltődésekor minden kép bekerül a cache-be, és kattintáskor onnan veszi a css is, így nem kell várni a betöltésükre.

Amikor fölé visszük az egeret, a #larg_thumb div margin-jét balra és felfelé csökkentjük, így olyan hatást keltünk mintha kiemelkedne.

Penge fény

Egy ferde, fehér-átlátszó átmenetes képet használunk, amit a .large_thumb_shine és .captionShine háttereként állítunk be. A trükk ott van, hogy alapból a háttér pozíciója negatív, így bal oldalon van és nem látszik, majd jQuery segítségével animáljuk ezt a tulajdonságot, és folyamatosan növeljük addíg, míg át nem úszik a képen, és el nem tűnik a másik oldalon.

jQuery

Ami említésree méltó az az animate() függvény. Nézzük meg azt a részt amikor a kis előnézeti kép fölé visszük az egeret:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

$('.thumb_container').hover(function()
 {
     $(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
     $(this).find(".large_thumb_shine").stop();
     $(this).find(".large_thumb_shine").css("background-position","-99px 0");
     $(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
 
 }, function()
 {
    $(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
 });

A .hover() egy vagy két paramétert vár, jelen esetben kettőt adunk neki. Elsőben hogy mi történjen mouseover esetén, másodikban pedig mouseout-ra.

1.

$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);

Megkeressük a .large_thumb elemet, majd a stop() segítségével leállítunk minden animációt ami fut rajta. Erre azért van szükség, mert különben akinek a keze rá van állva az oda-vissza huzogatásra valami miatt, akkor felhalmozódnak a kérések és 1 percig csak azt látjuk, hogy ismétlődik az animáció.

Ha leállt minden, alkalmazzuk rajta a bal és felső margin csökkentését, 200-as gyorsasággal. Pontosabban lassúsággal, mivel minél nagyobb ez a szám, annál tovább tart az animáció, tehát annál lasabb.

A következő három sorban a penge fény animálását állítjuk le, a hátteret balra igazítjuk alaphelyzetbe, majd 700 időegység alatt átúsztatjuk a kép mellé jobb oldalra.

Végül ha az egeret elhúzzuk a kép fölül, a marginok visszaállnak alaphelyzetbe, rövid animációval. A nagy kép felirata ugyanez pepitában.

Összegzés

Ha nem akarunk várni a CSS3 által biztosított animációk elterjedésére, akkor ezt az animate() függvényt bátran használhatjuk, nagyon fel lehet vele dobni a dolgokat.

• Példa
• Letöltés