ThickBox 2.1

Biztos láttad már honlapokon azt a fajta megoldást, amikor a kis thumbnail képekre kattintva nem a lapba vagy új ablakba jelenik meg a kép, hanem "beszürkül" a honlap, elindul egy kis animáció és pár pillanattal később a lap felett, mintegy lebegve jelenik meg a nagyobb kép. Ezt egy javascript segítségével lehet elérni és több verziója is van, egyikük a címben is jelzett "ThickBox", de vannak mások is (pl. Lightbox JS v2.0) A ThickBox honlapját itt találod meg: http://jquery.com/demo/thickbox/Demo: http://www.tutorial.hu/demo/Linkfelhő galériaAmiért a ThickBox megoldást választottam a lapra, az az, hogy egyes képeken kívül képsorozatokat is képes kezelni, illetve nem csak képeket, hanem egyéb tartalmakat (html-eket, iframe-s cuccokat) és szépen lekezel. Nézzük, hogy tudod Te is beépíteni ezt a lapodba? 1.) Először is a honlapjáról töltsd le a szükséges fájlokat:

• ThickBox.js
• ThickBox.css
• animációs gif (loadingAnimation.gif)
• jquery-1.0.2.js (tömörítetlen verzió) vagy jquery-compressed.js (tömörített verzió)

A jquery javascript fájlból 2 van a listában, de elég csak egyiket letöltened és használnod. A különbség köztük mindössze annyi, hogy a nagyobb fájl (jquery-1.0.2.js) az eredeti, tömörítetlen verzió, míg a másik egy jelentősen kisebb fájlméretet produkáló, tömörített verzió (jquery-compressed.js). Én ez utóbbit használtam fel a laphoz. A könyvtárszerkezetet így építettem fel, persze ettől el lehet térni, csak akkor a leírásban szereplő útvonalakat is módosítanod kell majd:

http://www.tutorial.hu/demo/
http://www.tutorial.hu/demo/css/
http://www.tutorial.hu/demo/js/
http://www.tutorial.hu/demo/images/
http://www.tutorial.hu/demo/index.php

Ezek után a fájlokat a megfelelő helyükre kell pakolni (persze az index.php lehet akár HTML is), tehát a thickbox.css ment a "css" könyvtárba, a *js fájlok pedig a "js" könyvtárba, a "loadingAnimation.gif"-et pedig az "images/ könyvtárba töltöttem fel. az "index.php" fájlom HEAD részébe be kellett linkelni őket, az alábbi módon:

</head>
  <link href="css/thickbox.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery-compressed.js"></script>
  <script type="text/javascript" src="js/thickbox.js"></script>
</head>

Mindezek után már csak az maradt hátra, hogy a képeket feltöltsem a szerverre és a forráskódban hozzáadjak egy class="thickbox" -t a linkekhez. Példa:

  <a href="gal/linkfelho02/linkfelho-125730-felho12.jpg" title="linkfelho" class="thickbox"><img src="gal/linkfelho02/_thb_linkfelho-125730-felho12.jpg" alt="linkfelho" class="thumb" /></a>

A telepítése ennyi, mint láthatod pofonegyszerű. Működés közben itt tudod megnézni: Demo: http://www.tutorial.hu/demo/Linkfelhő galériaEgyéb hasonló megoldás: Lightbox JS v2.0