jQuery lightbox plugin

A Lightbox JS indulása óta ez az effekt fogalommá nőtte ki magát, a képek, sőt egyéb beágyazott tartalmak megjelenítésének kedvelt technikája. Természetesen létezik jQuery Javascript könyvtárra épülő megoldás is. Ha az oldaladon más célokra már jQuery-t használsz, akkor célszerűtlen emiatt más script könyvtárat is betölteni, de a mérete miatt sem rossz választás, a jQery 1.2.6.min js, és a jquery.lightbox-0.5 js együtt csak 74,1Kb.

Az egyik megoldás a jQuery hivatalos oldalán leírt Balupton Edition, az Insic Designs blogon pedig egész kis gyűjtemény található. Most Leandro Vieira Pinho által írt lightbox plugint mutatom be részletesebben.

A lightbox plugin használata:

Az oldal head részébe az alábbi kódot kell beilleszteni:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Szükség van még egy css fájlra is:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Ennek tartalmát természetesen az oldal eredeti stíluslapjába is bemásolhatod.

A html:

A plugin használatához nem kell átírnod a kódod, a jQuery rugalmas selectorával bármilyen képhalmazt - akár többet is - kijelölhetsz. Lényeg hogy a kódod „váza” ilyesféle legyen:

<a href="image1.jpg" title="képfelirat"><img src="thumb_image1.jpg" alt="" /></a>

A script a képfeliratokat az 'a' tag title attributumának tartalmából veszi át, fotóalbum esetén pedig azt is kiírja, hány kép található az adott válogatásban.

A jQuery lightBox plugin aktiválása:

Ezek után hívd meg jQuery lightBox függvényt, válaszd ki a hivatkozásokat, amelyre alkalmazni szeretnéd. Mutatok néhány példát:

<script type="text/javascript">
$(function() {
	// Első példa...
	$('a[@rel*=lightbox]').lightBox(); // Minden link, amely rel="lightbox" attribútummal rendelkezik
	// Vagy ez...
	$('#gallery a').lightBox(); // Minden link, amely gallery ID-jű elemben van.
	// Itt egy másik...
	$('a.lightbox').lightBox(); // Minden link, amely lightbox class-al rendelkezik
	// Esetleg ez...
	$('a').lightBox(); // Minden link az oldalon
	// ... A lehetőség száma rengeteg. Használd kreatívitásod vagy a fenti példák bármelyikét.
});
</script>

Az elérhető konfigurációs beállítások:

A plugin néhány beállítási lehetősége a meghíváskor testreszabható, a konfigurációs értékeket a függvény paramétereként egy hash-ben adhatod át, az alábbiak szerint:

* overlayBgColor - A színátfedés (overlay) színe, alapértelmezetten #000 fekete.
* overlayOpacity - A színátfedés átlátszóságának mértéke, alapból 0.8.
* imageLoading - Animáció a betöltődés alatt. images/lightbox-ico-loading.gif az alapértelmezett.
* imageBtnClose - Bezárás gomb. images/lightbox-btn-close.gif az alapértelmezett.
* imageBtnPrev - "Előző" gomb. images/lightbox-btn-prev.gif az alapértelmezett.
* imageBtnNext - "Következő" gomb. images/lightbox-btn-next.gif az alapértelmezett.
* containerBorderSize - A képet tartalmazó box padding értéke, 10 az alapértelmezett.
* containerResizeSpeed - A képet tartalmazó box átméretezésének időtartama, 400 az alapértelmezett.
* txtImage - Az "Image" felirat.
* txtOf - Az "of" felirat.
* imageBlank - A blank image, amely az Internet Explorer hover hack-hez kell, images/lightbox-blank.gif az alapértelmezett.
* keyToClose - Bezárás gyorsbillentyű, a c (close) az alapértelmezett.
* keyToPrev - Előző kép gyorsbillentyű, p (previous) az alapértelmezett.
* keyToNext - Következő kép gyorsbillentyű, az n (next) az alapértelmezett.

Példa a jQuery lightbox plugin konfigurálására:

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Imagem',
	txtOf: 'de'
   });
});
</script>

Mire vársz? Töltsd le vagy nézd meg a demót !

Több jQuery plugin kombinálása:

Csoxa kérésére megmutatom, hogy lehet az előbb bemutatott lightbox, és az animált hoover plugint együtt használni:

A header-be a szokásos módon helyezd el a scripteket:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />

Aktiváld egymás után a két funkciót:

<script type="text/javascript">
		$(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
		});
		</script>
 
		 <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox({fixedNavigation:true});
    });
    </script>

A html kódban a korábbi hivatkozásokat kell annyiban átalakítani, hogy a nagy méretű képre linkelsz, illetve ha szeretnél feliratot, akkor feltétlenül szükség lesz a title elemre.

<ul class="hover_block" id="gallery">
 <li><a href="01_big.jpg" title="Ez a kép felirata">
  <img src="01.jpg" alt="bluedesign blog" /> Ez a szöveg a kép mögötti tartalom,  kattintható hivatkozással.</a>
 </li>
</ul>

Ennyi, a jQuery megoldásokat könnyen lehet kombinálni. A megjelenést a stíluslappal rugalmasan tudod variálni, sok sikert hozzá.

Mire vársz? Töltsd le vagy nézd meg a demót !