Itt vagy: Tippek és trükkök » Thickbox effect használata album nélkül
Oldal nyomtatása Oldal nyomtatása

Thickbox effect használata album nélkül

Nem tudom, hogy ki hogy van vele, de nekem az album megoldása nem tetszik. Persze van, ahol megfelel. Például itt van az én Képgalériám is. Ha van több albumunk, akkor ez az összefoglaló nézet meg is felel.

De mi van akkor, ha (mint ahogy itt a honlapon is) csak a szövegbe illesztett képek vannak, nem akarunk albumot használni, de az effekt az jó megoldás lenne. áttekinthetőbbé tenné az oldalt és nem igényelné, hogy nagy képeket kicsinyítsünk és szúrjunk be az oldalra?

A megoldás az Album modul, de másképpen!

A modul telepítését nem hagyhatjuk ki, hiszen ez biztosítja a megfelelő szkripteket az effekthez!

Ha már fent van, nézzünk bele a default sablonba - ez az alap, azaz thickbox effekt (nekem ez tetszik).

/ Tartalom / Fotóalbumok / Telepített sablonok / default

Ennek az elején rögtön ott van az, ami minket érdekel:

{* Include JS files. You can move this to the head of your page template if you want *}
<!--Thickbox ThickBoxWithPrev-Next stuff-->
<script type="text/javascript" src="modules/Album/templates/db/js/jquery.js"></script>
<script type="text/javascript" src="modules/Album/templates/db/js/thickbox.js"></script>

Itt döntenünk kell. Ha nem akarunk külön képeknél is effektet, akkor hagyjuk így (ez majd az albumoknál behívja a szkriptet). Ha viszont különálló képekhez is szeretnénk alkalmazni, akkor vágjuk ki innen és ahogy a kommentes részben írja, másoljuk be a <head></head> részbe.

(Figyelem! Ha nem vágjuk innen ki, de a head-be bemásoljuk, akkor egyes esetekben hibát okozhat, azaz az effekt nem fog működni, mert dupla behívás esete forog fent)

Ezzel a lényeg meg is van. Most már csak a képeknél kell ezt beállítani.

A képek beillesztése során a thumbnail - nagy kép megoldás kissé nyűgösnek tetszik, de nem olyan vészes. A különböző lightbox megoldások esetén is kell rel="lightbox" hivatkozást hozzátenni a képekhez. Ez egyébként kissé idegesít egy ideje. Hogy miért nem tudnak a fejlesztők valami egyszerű megoldást a thumbnail, nagy kép, effekt megvalósításához?

Szóval, kép beszúrása a hagyományos módon, csak a kép url-nél tegyünk a kép neve elé egy thumb_ előtagot! Javítva! Az új 1.5.3-ban lévő TinyMCE 2.4.13 már tujda ezt is. Csak az admin felületen be kell jelölni ezt: Show thumbnail-files in lists:

A képek feltöltését a Képkezelő-vel végezzük, az alapból generálja a thumbnail-t is! (ne keressük, nem látszik mert rejtett, de a Fájlkezelő, vagy az FTP megmutatja, hogy tényleg ott van)

A továbbiakat a képek elmondják:



Link beszúrása:



Fontos! A Class-ok részbe írjuk be a thickbox-ot.

Kiegészítés:

Azt is meglehet csinálni, hogy bár egyenként illesztjük be a képeket, mégis albumként viselkedjenek, azaz lehessen lépegetni a kép nézetben és ne kelljen bezárni és újra megnyitni egy másik kép megtekintése érdekében.

Ha belenézünk a html kódba, akkor egy kép beillesztésekor ezt látjuk:

<a class="thickbox" href="uploads/images/thickbox/thickbox_06.png"><img src="uploads/images/thickbox/thumb_thickbox_06.png" alt="" width="150" height="71" /></a>

Ha egy csoportba akarjuk foglalni őket, akkor egészítsük ki a kódot a rel="csoportnév" részlettel:

<a class="thickbox" rel="csoportnév" href="uploads/images/thickbox/thickbox_06.png"><img src="uploads/images/thickbox/thumb_thickbox_06.png" alt="" width="150" height="71" /></a>

Ennyi.


4 comments
  • October 25, 2009, 11:07 pm - SPétör

    Pontosítsunk: Van egy oldalad, ahova külön-külön illesztettél be képeket, de szeretnéd, hogy ha az egyiket megnyitottad lehessen tovább lépni a képek között? Vagy van albumod is hozzá? Pontosan hogyan illesztetted be a képeket az oldalba? A fórumunkra eljöhetnél, ott többen is látjuk és talán gyorsabban lesz megoldás is. Meg mások is tanulhatnak belőle.

  • October 25, 2009, 6:01 pm - Zoltán

    Szia!
    Olyan klasz ez a thickbox de nekem nem müködik csoportosan, csak egyessével, miért? itt a html kód:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="thickbox.js"></script>

    <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
    <style type="text/css" media="all">@import "thickbox.css";</style>

    <meta content="hu" http-equiv="Content-Language" />
    <title>Example below</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <style type="text/css">
    .style1 {
    text-align: center;
    }

    </style>
    </head>

    <body>

    <div id="masthead" class="style1">
    Képek</div>
    <div id="top_nav">
    </div>
    <div id="page_content">
    </div>
    <div id="footer">
    </div>

    <a href="en0.jpg" title="en0" class="thickbox" rel="gallery-plants" */ ><img src="en0_s.jpg" alt="plant 1" /></a>
    <a href="en1.jpg" title="en1" class="thickbox" rel="gallery-plants" */ ><img src="en1_s.jpg" alt="plant 2" /></a>
    <a href="en2.jpg" title="en2" class="thickbox" rel="gallery-plants" */ ><img src="en2_s.jpg" alt="plant 3" /></a>
    <a href="en3.jpg" title="en3" class="thickbox" rel="gallery-plants" */ ><img src="en3_s.jpg" alt="plant 4" /></a>

    </body>

    </html>

    Csak a töltő csík jön be, gondolom a rel= -utasítással van a gond de nem tudom hogy mi. Előre is köszönöm a segítséget.
    :-)

  • October 12, 2009, 1:18 pm - SPétör

    Szívesen! ;-)

  • October 12, 2009, 12:23 pm - tom (http://quadrocom.net)

    Most értem ide, hogy pont ere volt szükségem. Köszönöm az információt és a segítséget!

Hozzászólás hozzáadása

Kód a képben:
Az Ön neve(*):
Email:
Website:
Hozzászólás(*):
 

^ Az oldal tetejére