Instal·lació de la JonDesign’s SmoothGallery amb miniatures automàtiques

Nov 3, 2007

A petició de l’Arnau, escric aquí algunes anotacions sobre com activar la creació automàtica de miniatures en la JonDesign’s SmoothGallery.

Resum: La JonDesign’s SmoothGallery és una galeria d’imatges en feta en AJAX, el JavaScript de la qual no supera els 24kb. A més, permet que el codi XHTML o HTML associat sigui accessible i estàndard, i no interfereix en la feina dels motors dels cercadors. És programari lliure sota llicència GPL de GNU.

El que perseguim és poder mostrar una galeria d’imatges en una pàgina web sense els problemes d’accessibilitat i d’altra índole que presenta la tecnologia Flash. Volem també que les miniatures es generin automàticament per no haver d’usar un programa d’imatges extern i volem que la interfície de la galeria estigui localitzada al català.

Primers passos

El primer és descarregar el paquet de programari, la qual cosa es pot fer des de JonDesign’s (Javascript) SmoothGallery 2.0: Improved Mootools Mojo for Images | Download.

La documentació ofical que tenim a la nostra disposició és una breu guia per saber per on començar i un document amb les preguntes més freqüents.

Creació del document HTML

Hem de crear un document HTML en el qual farem una crida a l’arxiu JavaScript amb què funciona la galeria. El més útil és usar com a exemple qualsevol dels arxius .html que s’adjunten a l’arxiu comprimit que hem descarregat. Qualsevol d’ells serveix, l’únic que els diferencia és que cadascun té unes opcions per defecte diferents, com ara la possibilitat de separar les fotos en àlbums o efectes de transició en canviar la imatge, per exemple.

Breu resum dels diferents passos:

Adjuntar els arxius JavaScript i CSS de la galeria

Cal fer una crida als arxius CSS i JavaScript que hi ha a l’arxiu comprimit que hem descarregat. El codi, que ha d’anar al header del document HTML, és el següent:

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script> <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

Cal també introduir la crida següent:

<script src="scripts/jd.gallery.set.js" type="text/javascript"></script>

Crida a iniciar la galeria

La crida a iniciar la galeria és el punt on se’ns permet indicar si volem que les miniatures es generin automàticament. Cal que el servidor tingui suport per a PHP. Un exemple de codi, que s’ha d’incloure dins la secció body del document HTML, és el següent:
<script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, delay: 10000, useThumbGenerator: true, defaultTransition: "fadeslideleft" }); } window.onDomReady(startGallery); </script>

Amb aquest codi es fa una crida a una galeria que canviarà automàticament les imatges cada 10 segons (timed: true i delay: 10000) un efecte de transició determinat entre imatge i imatge (defaultTransition: "fadeslideleft") i amb les miniatures generades automàticament: useThumbGenerator: true.

Imatges a mostrar

Per acabar de construir la galeria, cal indicar quines son les imatges a ser mostrades. Això es fa mitjançant codi (X)HTML.

S’obre un div de la manera següent:

<div id="myGallerySet">

Aquest div ha de contenir dintre seu un div per a cada imatge, així:

<div id="gallery1" class="galleryElement"> <div class="imageElement"> <h3>Títol de la imatge</h3> <p>Descripció de la imatge</p> <a href="#" title="open image" class="open"></a> <img src="carpeta-on-hi-ha-les-imatges/subcarpeta/1.jpg" class="full" /> <img src="carpeta-on-hi-ha-les-imatges/subcarpeta/1-mini.jpg" class="thumbnail" /> </div>

La línia <img src="carpeta-on-hi-ha-les-imatges/subcarpeta/1-mini.jpg" class="thumbnail" /> és innecessària si hem activat la generació automàtica de miniatures, i en aquest cas ho hem fet.

Així, per posar un exemple complet, aquesta part del codi per a una galeria amb una sola imatge seria:

<div id="myGallerySet">

</div>

Traducció de la interfície al català

El programari només té dues cadenes de text, “Loading” i “Pictures”, en anglès. Si volem que es mostrin en català “S’està carregant” i “Imatges” respectivament, hem d’editar jd.gallery.js que hi ha dins la carpeta scripts en els arxius inclosos en l’arxiu comprimit que hem descarregat.

Cap a la linia 66 hi ha això:

textShowCarousel: ‘Pictures’,

Cal canviar-ho per això altra:

textShowCarousel: ‘Imatges’,

I cap a la línia 76 trobem això:

textPreloadingCarousel: ‘Loading…’,

Cal canviar-ho per això altra:

textPreloadingCarousel: ‘S’està carregant…’,

D’aquesta manera quedaran traduïdes les dues cadenes de text que inclou la interfície. Hi ha una altra manera de traduir el text “Pictures” que és incloent la línia textShowCarousel: 'My new text', entre useThumbGenerator: true, i defaultTransition: "fadeslideleft" però l’he descartat perquè no permet traduir l’altra cadena, la que mostra “Loading…” en versió original.

Altres notes sobre la generació de miniatures

Les miniatures només es generaran si el servidor en què s’allotja la galeria d’imatges té suport per a PHP. Si per falta d’aquest suport o qualsevol altre motiu les miniatures no es generen, la galeria seguirà funcionant però en fer clic sobre la pestanya “Imatge” (“Pictures” en l’original) es mostraran quadres en blanc en lloc de les miniatures.

Podem activar la memòria cau de les miniatures de manera que el programari no les hagi de generar cada vegada que un usuari entra en la pàgina. Per fer-ho, cal crear una carpeta anomenada cache en el directori arrel de la galeria i donar-li permisos universals d’escriptura.

Si no activem la memòria cau la galeria seguirà funcionant però el consum de CPU es dispararà i la pàgina trigarà molt més en carregar-se.

Provem-la!

Amb això ha finalitzat la instal·lació i configuració de la galeria d’imatges. Ja només falta provar-la i comprovar que tot funciona.