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:

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

Kapcsolódó bejegyzések:
  • Hasonló megoldás mint a LightBox (http://www.huddletogether.com/projects/lightbox2/), de gyorsabb.ThickBox

  • Az előző cikkemben mindenféle galéria scriptet mutattam nektek. A mostani cikkben csak kimondottan lightbox szerű scriptek, pluginok lesznek természetesen jQuery …

  • A JavaScript gallériak és diavetítések rendkívül gyakoriak a portfóliós oldalakon és egyéb oldalakon kepék tartalmak megjelenítésere. Ezek közül is a legnépszer …

  • Egy listát készítettem egy pár jQuery tooltip plugin -ról. Leírást ne keressetek, hisz hiszem és vallom: a legjobb leírás, ha a készítő oldaláron elolvassuk a do …

  • A Youtube videókat default fix mérettel beilleszteni az oldalakba, legalábbis az oldalon ugye az alábbi opciókat fogod megtalálni, ha az “embed” gombra kattintas …

A cikket beküldte: Harder (http://blog.harder.hu)

3 hozzászólás

  1. Turbina says:

    Hali HARDER. Az lenne a kérdésem, hogy hozzákezdtem egy galériához a Lightbox-al és azt szeretném csinálni, hogy a képek jobb alsó sarkában az oldal címe legyen és jobb click-re le lehessen tölteni a képet! Ezekre kellene valamien megoldást találni!

    köcce.

  2. hydroclorid says:

    Hali!

    Lehet, hogy én vagyok vagy vagy nagyon láma, de én nem látom itt, hogy az alábbi sor után minek kellene lennie a HEAD-ban.

    “az “index.php” fájlom HEAD részébe be kellett linkelni őket, az alábbi módon:”

    ITT MINEK KELLENE LENNIE?

    Köszi a segítséget

  3. Feriman says:

    Kösz, hasznos volt!

Szólj hozzá
a ThickBox 2.1 c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>