Az általam nagyon sokszor használt jQuery framework-öt nem hiába szeretem alkalmazni a fejlesztések során.

• kézre áll, bár tudom ez szubjektív
• nagyon jó dokumentáció van hozzá
• rengeteg jól használható és "divatos" plugin nyugszik jQuery alapokon

Egy weboldalon szinte biztos, hogy találkozunk képekkel, képgalériával. Az egyik legjobban elterjedt megoldás a képek megmutatására a LightBox nevezetű JavaScript alkalmazás, amely már a 2. verziónál jár. Nagyon jó kis cucc, viszont prototype kell hozzá, de mivel jQuery-t használunk, ezért más megoldáshoz folyamodunk. Keresünk egy jQuery LightBox plugint. Kis gúglizás után rá is akadunk: jQuery lightBox plugin.

Nézzük a lépéseket, hogyan tudjuk beépíteni az oldalunkba a plugint:

• Letöltjük a weboldalról a legutolsó plugint, kicsomagoljuk, és bemásoljuk a projektünk js könyvtárába a file-okat.
• Az oldalunk forráskódjába a megfelelő helyre berakjuk a js file-ok behúzását:

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

• Belinkeljük a lightbox plugin CSS file-ját is, miután bemásoltuk a projektünk css könyvtárába (figyelembe kell venni, hogy a css file-okban a design elemek képeinek elérését lehet, hogy át kell írnunk, a projekt struktúránknak megfelelően):

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

• A HTML forrásba billesztjük a következő sort:

<div id="gallery">
	<ul>
		<li>
			<a href="photos/IMG_001.jpg" title="Virágos tornác">

				<img src="photos/thumb_IMG_001.jpg" alt="" />
			</a>
		</li>
		<li>
			<a href="photos/IMG_002.jpg" title="Kacsaúsztató">
				<img src="photos/thumb_IMG_002.jpg" alt="" />

			</a>
		</li>
		<li>
			<a href="photos/IMG_003.jpg" title="Kemény mint a szikla, na meg a kőrózsa">
				<img src="photos/thumb_IMG_003.jpg" alt="" />
			</a>

		</li>
		<li>
			<a href="photos/IMG_004.jpg" title="Videokártya a helyén">
				<img src="photos/thumb_IMG_004.jpg" alt="" />
			</a>
		</li>

		<li>
			<a href="photos/IMG_005.jpg" title="Jön vihar">
				<img src="photos/thumb_IMG_005.jpg" alt="" />
			</a>
		</li>
	</ul>

</div>
	

• A JavaScript file-unkba pedig a következőt:

Mivel magyarok vagyunk, ezért szeretnénk ha magyarul jelenne meg a kép alatti információ!

	  $('#gallery a').lightBox({
		  txtImage: 'Kép',
		  txtOf: ' / '
	  });
	

* A CLOSE gomb, kép formátum, annak a magyarítása egy képszerkesztő programmal megvalósítható.

Működő demó ide kattintva!