In questo articolo vedremo come creare una galleria fotografica che verrà aggiornata dinamicamente dall'utente. Le features della gallery sono: generazione automatica delle thumbnails e zoom delle foto tramite l'utilizzo di un lightbox in jQuery.
Per iniziare, scarichiamo il materiale necessario per far partire il lightbox (in questo caso andremo ad utilizzare un popolare lightbox JQuery, colorbox):
1. Inserire il css
Estraiamo i file appena scaricati su assets/templates/tutbook/, poi apriamo il file che si trova su assets/templates/tutbook/css/style.css ed aggiungiamo le seguenti regole css:
/* Gallery */
#gallery {
margin: 0;
width: 600px;
}
.gallery {
background: url(../img/bg-gallery.jpg) no-repeat center top;
float: left;
margin-bottom: 6px;
padding: 4px 4px 4px 0;
text-align: center;
width: 146px;
}
.gallery:hover {
opacity: 0.9;
}
.gallery span {
position: relative;
top: 6px;
}
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../img/colorbox/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(../img/colorbox/controls.png) no-repeat -100px 0;}
#cboxTopRight{width:21px; height:21px; background:url(../img/colorbox/controls.png) no-repeat -129px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(../img/colorbox/controls.png) no-repeat -100px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(../img/colorbox/controls.png) no-repeat -129px -29px;}
#cboxMiddleLeft{width:21px; background:url(../img/colorbox/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(../img/colorbox/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(../img/colorbox/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(../img/colorbox/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(../img/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious.hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext.hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(../img/colorbox/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(../img/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose.hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to IE9.
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The following provides PNG transparency support for IE6
*/
.cboxIE6 #cboxTopLeft{background:url(../img/colorbox/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(../img/colorbox/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(../img/colorbox/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(../img/colorbox/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(../img/colorbox/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(../img/colorbox/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(../img/colorbox/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(../img/colorbox/ie6/borderMiddleRight.png);}
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
Le righe 1-20 servono per creare la grafica della gallery, le righe 22-103 servono per il lightbox in jQuery.
2. Inserire gli script
Inseriamo nel Chunk "header" del sito il codice che ci permetterà di implementare il lightbox in jQuery: andiamo su Elements > Manage Elements > Chunks > Header, e modifichiamo il Chunk in questo modo (vedi codice evidenziato):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[*pagetitle*] | [(site_name)]</title>
<base href="[(site_url)]"></base>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<meta name="description" content="[*description*]" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" type="text/css" href="assets/templates/tutbook/css/style.css"/>
<link rel="stylesheet" type="text/css" href="assets/templates/tutbook/css/slideshow.css"/>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="assets/templates/tutbook/css/ie7.css"/><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="assets/templates/tutbook/css/ie6.css"/><![endif]-->
<!-- JavaScript Slideshow -->
<script type="text/javascript" src="assets/templates/tutbook/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/templates/tutbook/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/templates/tutbook/js/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript" src="assets/templates/tutbook/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-5').codaSlider({
autoSlide: true,
autoSlideInterval: 4000,
autoSlideStopWhenClicked: true,
dynamicArrows: false,
dynamicTabs: false
});
$("a[rel='colorbox']").colorbox();
});
</script>
</head>
3. Installare Advthumbs
Advthumbs è uno snippet che permette il ridimensionamento "on the fly" delle immagini. Per scaricare ed installare lo snippet, seguiamo il tutorial di questo articolo.
4. Creare le Template Variables
Ora dobbiamo creare un pò di Template Variables per inserire dinamicamente le immagini ed i titoli delle immagini in ogni pagina. Andiamo su Elements > Manage Elements > Template Variables > New Template Variable, ed inseriamo 20 Template Variables con numero progressivo (gallery-title-1, gallery-title-2, gallery-title-3 etc) con i seguenti dati:
Template Variable Name: gallery-title-1
Description: Titolo
Input Type: Text
Template Access: Tutbook Default
Existing Category: Tutbook
Inseriamo altre 20 Template Variables sempre con numero progressivo (gallery-img-1, gallery-img-2, gallery-img-3 etc) e con i seguenti dati:
Template Variable Name: gallery-img-1
Description: Immagine
Input Type: Image
Template Access: Tutbook Default
Existing Category: Tutbook
Ecco il risultato ottenuto:
5. Inserire l'html
Adesso dobbiamo solo inserire l'html necessario per generare la gallery. Andiamo su Elements > Manage Elements > Templates > Tutbook Default, inseriamo il chunk "gallery" nel Template e salviamo il Template (vedi codice evidenziato):
{{header}}
<body>
{{topmenu}}
<div id="container">
<!-- Content -->
<div id="content">
<h1>[*longtitle*]</h1>
[*content*]
{{gallery}}
</div><!-- End Content -->
{{sidebar}}
</div><!-- End Container -->
{{footer}}
Andiamo su Elements > Manage Elements > Chunks > New Chunk, inseriamo i seguenti dati e salviamo il chunk:
Chunk Name: gallery
Description: Gallery Tutbook
Existing Category: Tutbook
Chunk code (html):
[+phx:if=`[*gallery-img-1*]`:is=``:then=``:else=` <div id="gallery"> [+phx:if=`[*gallery-img-1*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-1*]"> <img src="[[advthumbs? &filename=`[*gallery-img-1*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-1*]" /> <span>[*gallery-title-1*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-2*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-2*]"> <img src="[[advthumbs? &filename=`[*gallery-img-2*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-2*]" /> <span>[*gallery-title-2*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-3*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-3*]"> <img src="[[advthumbs? &filename=`[*gallery-img-3*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-3*]" /> <span>[*gallery-title-3*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-4*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-4*]"> <img src="[[advthumbs? &filename=`[*gallery-img-4*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-4*]" /> <span>[*gallery-title-4*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-5*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-5*]"> <img src="[[advthumbs? &filename=`[*gallery-img-5*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-5*]" /> <span>[*gallery-title-5*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-6*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-6*]"> <img src="[[advthumbs? &filename=`[*gallery-img-6*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-6*]" /> <span>[*gallery-title-6*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-7*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-7*]"> <img src="[[advthumbs? &filename=`[*gallery-img-7*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-7*]" /> <span>[*gallery-title-7*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-8*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-8*]"> <img src="[[advthumbs? &filename=`[*gallery-img-8*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-8*]" /> <span>[*gallery-title-8*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-9*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-9*]"> <img src="[[advthumbs? &filename=`[*gallery-img-9*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-9*]" /> <span>[*gallery-title-9*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-10*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-10*]"> <img src="[[advthumbs? &filename=`[*gallery-img-10*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-10*]" /> <span>[*gallery-title-10*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-11*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-11*]"> <img src="[[advthumbs? &filename=`[*gallery-img-11*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-11*]" /> <span>[*gallery-title-11*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-12*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-12*]"> <img src="[[advthumbs? &filename=`[*gallery-img-12*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-12*]" /> <span>[*gallery-title-12*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-13*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-13*]"> <img src="[[advthumbs? &filename=`[*gallery-img-13*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-13*]" /> <span>[*gallery-title-13*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-14*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-14*]"> <img src="[[advthumbs? &filename=`[*gallery-img-14*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-14*]" /> <span>[*gallery-title-14*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-15*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-15*]"> <img src="[[advthumbs? &filename=`[*gallery-img-15*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-15*]" /> <span>[*gallery-title-15*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-16*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-16*]"> <img src="[[advthumbs? &filename=`[*gallery-img-16*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-16*]" /> <span>[*gallery-title-16*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-17*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-17*]"> <img src="[[advthumbs? &filename=`[*gallery-img-17*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-17*]" /> <span>[*gallery-title-17*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-18*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-18*]"> <img src="[[advthumbs? &filename=`[*gallery-img-18*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-18*]" /> <span>[*gallery-title-18*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-19*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-19*]"> <img src="[[advthumbs? &filename=`[*gallery-img-19*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-19*]" /> <span>[*gallery-title-19*]</span> </a> </div> `+] [+phx:if=`[*gallery-img-20*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-20*]"> <img src="[[advthumbs? &filename=`[*gallery-img-20*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-20*]" /> <span>[*gallery-title-20*]</span> </a> </div> `+] </div> `+]
Vediamo di analizzare il codice appena inserito:
La regola PHx inserita nella riga 1 e che termina nella riga 5 (qui sotto) permette alla gallery di sparire se non viene inserita la prima immagine della gallery. Questo per evitare di inserire un div vuoto del tipo <div id="gallery"></div> in caso che la gallery non contenga alcuna immagine.
[+phx:if=`[*gallery-img-1*]`:is=``:then=``:else=`
<div id="gallery">
Immagini qui....
</div>
`+]
Analizziamo il codice che genera ogni singola immagine: le righe 1,8 (qui sotto) nascondono, sempre tramite PHx, l'html in caso che non sia stata inserita l'immagine.
Nella riga 3, rel="colorbox" serve per aprire colorbox quando viene cliccata la miniatura dell'immagine. Nella riga 4 invece è presente lo snippet Advthumbs, il quale ridimensiona le immagini a 134x135 pixels, mentre nella riga 5 c'è semplicemente la Template Variable che restituisce il titolo dell'immagine.
[+phx:if=`[*gallery-img-1*]`:is=``:then=``:else=` <div class="gallery"> <a rel="colorbox" href="[*gallery-img-1*]"> <img src="[[advthumbs? &filename=`[*gallery-img-1*]` &newxsize=`134` &newysize=`135` &method=`resizecrop`]]" alt="[*gallery-title-1*]"> <span>[*gallery-title-1*]</span> </a> </div> `+]
6. Inserire MM Rules
Prima di provare la gallery, andiamo su Elements > Manage Elements > Chunks > mm_demo_rules, ed inseriamo il seguente codice (attenzione, verifica qual'è l'ID del tuo Template "Tutbook Default". Nel mio caso tale Template ha ID 6, se il tuo ha ID diverso, ricordati di modificarlo nel codice sottostante):
mm_createTab('Gallery', 'mygallery', '', '6', '<p><strong>Istruzioni:</strong> inserisci titolo ed immagine per ciascuna foto della gallery. <br /><strong>Attenzione:</strong> rimuovendo la prima immagine sparisce tutta la gallery. </p><div class="split"></div><br />', '700');
// Crea un nuovo tab con nome "Gallery" e lo assegna al template con ID 6, che in questo caso corrisponde a "Tutbook Default".
mm_moveFieldsToTab('tvgallery-title-1,tvgallery-img-1,tvgallery-title-2,tvgallery-img-2,tvgallery-title-3,tvgallery-img-3,tvgallery-title-4,tvgallery-img-4,tvgallery-title-5,tvgallery-img-5,tvgallery-title-6,tvgallery-img-6,tvgallery-title-7,tvgallery-img-7,tvgallery-title-8,tvgallery-img-8,tvgallery-title-9,tvgallery-img-9,tvgallery-title-10,tvgallery-img-10,tvgallery-title-11,tvgallery-img-11,tvgallery-title-12,tvgallery-img-12,tvgallery-title-13,tvgallery-img-13,tvgallery-title-14,tvgallery-img-14,tvgallery-title-15,tvgallery-img-15,tvgallery-title-16,tvgallery-img-16,tvgallery-title-17,tvgallery-img-17,tvgallery-title-18,tvgallery-img-18,tvgallery-title-19,tvgallery-img-19,tvgallery-title-20,tvgallery-img-20', 'mygallery');
// Sposta i TVs della Gallery nel Tab "Gallery"
Il codice appena inserito ci permette di creare un tab chiamato Gallery nella quale sono elencate in modo ordinato tutte le Template Variables che generano la gallery.
7. Risultato finale
Ora non ci resta che aprire una qualunque Risorsa che ha come Template "Tutbook Default" ed inserire un pò di immagini e titoli nel tab "Gallery". Ecco come appare una gallery che ho appena creato:
Ed ecco un link per vedere la gallery in azione.
8. Conclusione
In questo articolo abbiamo visto come creare una gallery tramite l'utilizzo di Advthumbs, Colorbox e PHx.
I lati positivi di questo sistema per creare gallery sta nel fatto che abbiamo totale controllo nella realizzazione grafica della gallery, e nella relativa semplicità di implementazione della stessa.
Il lato negativo più evidente è che il numero massimo di immagini è preimpostato, perciò se l'utente necessita di inserirne di più, l'unica soluzione è creare altre Template Variables (gallery-img-21, gallery-img-22 etc). Per ovviare a questo problema si può creare la gallery utilizzando uno dei numerosi plugin/snippet presenti nella sezione extras di www.modxcms.com
Se avete sistemi migliori per creare le gallery, o se ci sono errori nel tutorial, fatemi sapere nei commenti.
