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éria

Amié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:

1
2
3
4
5

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:

1
2
3
4
5

</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:

1

  <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éria

Egyéb hasonló megoldás:
Lightbox JS v2.0