Ajnasz Blog

A hétvégén ráértem kicsit foglalkozni a saját dolgaimmal, így az ajnasz.hu-val is.

Eddig, ha véletlenül valami képet illesztettem be az oldalba, akkor annak erdeteiét mindenféle szépítés nélkül lehetett megnézni, tehát eddig nem lehetett ilyen szép galériaként, lapozva nézegetni őket. Gondoltam, nem méltó módja ez a képek megjelenítésének, így jobb lenne valamit csinálni kellene vele, így a tettek mezejére léptem.

A Lightboxhoz hasonló valamit képzeltem el. Azért nem tudtam egyből integrálni az oldalba, mert anno, amikor a sok másik képet feltöltöttem, akkor bizony mit sem törődtem azzal, hogy egyszer én Lightboxot akarok használni, így egyetlen linknek sem adtam be a bűvös rel="lightbox" attribútumot és semmi kedvem nem volt mindent megszerkeszteni. Másik apróság, hogy míg a Drupal jQuery-t használ, addig a Lightbox a Prototype javascript frameworköt. Mit mást lehet tenni, mint írni egy sajátot.

A hétvége éppen jónak bizonyult eme feladata megoldására, így egy drupal modul képében megszületett a rém egyszerű kis kép nézegető script jQuery alapon, Drupal 6-hoz.

Az oldalon a képeket általában a "attach-center" class-szal ellátott divbe tettem. A feladat tehát az volt, hogy kigyűjtsem az összes olyan linket, mely egy "attach-center" divben van. jQuery-ben ezt röviden így írnánk le: $('div.attach-center a') Mivel az oldalon a lényegi tartalom egy "main" nevű divben van, ezért ezt a mintát megspékeltem még ezzel is, remélvén, hogy valamivel gyorsabb lesz így a script: $('div#main div.attach-center a'). Ezzel gyakorlatilag szépen összegyűjtöttem az összes képhez tartozó linket. (Ezt a részt azért volt fontos leírnom, mert ezt a mintát változtatva lehet saját oldalra szabni a scriptet, akár a rel="lightbox" szerű megoldást is lehet így használni.)

Download Picture Viewer module for Drupal

A képeket általában úgy tettem az oldalba annak linkjén túl, gyakran egy kis magyarázó szöveg is került a alá. Ez mondjuk kiválóan alkalmas magyarázószövegként való használatra. Ha pedig ez megvan, akkor ennek a sávja tökéletes arra, hogy egy linket tegyünk bele, amely az eredeti képre mutat.

További, "jó ha van" dolog, ha lehet lapozni a képek között, így nem kell folyton odascrollozni, hanem csak helyben lehet váltogatni közülük. Végül ez is meg lett oldva, bár a legnehezebb és legunalmasabb feladatnak az bizonyult, hogy megfelelő gombokat is találjak hozzá, végül a Simplicio iconsetet választottam, melyre a Smashing Magazine-on bukkantam. Levettem a színeket valamit kiszedtem őket a karikából és így viszonylag tűrhető képet kaptam.

További szükséges dolog, hogy a nézegetőt be lehessen zárni. Első körben úgy gondoltam, hogy erre bőven elég, ha a képre kattintva történik meg, viszont ahogyan az "előző/következő" gombok felkerültek, jobban tűnt, ha plusz egy X-et is beteszek a sarokba, ami ugyancsak a fent említett iconsetből választottam.

A script maga viszonylag gyorsan elkészült, az apróbb finomítások, az ikonok kiválasztása azonban még a mai napom nagy részét elvette, de végülis minden megvan. Kezdetben a drupal sminkembe illesztettem be, viszont, hogy jobban hordozható legyen egy drupal modult csináltam belőle, melyet immáron letölthetővé is teszek. A script természetesen nem csak Drupalban használható, JavaScript és a CSS bármely oldalba beilleszthető, a modul csak azért készült, hogy könnyebben telepíthesse az, aki hozzám hasonlóan ezt a rendszert használja. A modul a Drupal 6.x verziójához készült, minden bizonnyal könnyen portolható régebbi és újabb verziókra is.

A script inicializálása a következő képpen néz ki:

$(document).ready(function(){ new Drupal.PictureViewer(null, true); });

Mint láthatjuk két attribútuma van: az elsőben egy stringet kell megadni vagy semmit. Ha definiálva van, akkor ez alapján a string alapján fog keresni linkek után az oldalban, ha értéke false vagy null, akkor a div#main div.attach-center a minta lesz használva. A mintát a jQueryben használatos módon kell megadni, további információ a jQuery dokumntációjában található.

A másik attribútum egy boolean érték, mellyel be és ki lehet kapcsolni, hogy a képeket tartalmazó doboz átméretezése animálva történjen-e.

Több albumot úgy lehet benne csinálni, hogy ha valamilyen más tulajdonság alapján próbáljuk meg beazonosítani az egyes albumok képei: pl, az egyik album képeit egy elso-album id-jű divbe, a másikat egy masodik-album id-jű divbe tesszük:

$(document).ready(function(){ new Drupal.PictureViewer('div#elso-album a', true); new Drupal.PictureViewer('div#masodik-album a', true); });

Ekkor lapozáskor csak az aktuális albumhoz tartozó képek jelennek meg. További részletekért nézd meg a forrást, de akár írhatsz is nekem.

Ugyan nem mondom, hogy tökéletes, valamint hozzáértők tudnak írni maguknak jobbat, ha úgy tetszik, de lustáknak és kezdőknek szerintem megteszi. :) Végülis, ez is csak még egy Lightbox szerű izé.

S legyen itt néhány példa is:

Cicó

Micó

Jó nagy Fa!