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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

3 HOZZÁSZÓLÁS

  1. 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. 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

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét