Brainleaf
Web Resources

In molti lavori accade di dover realizzare una galleria fotografica e spesso vorremmo anche che questa fosse facile da amministrare ed aggiornare. Per venire incontro a queste esigenze abbiamo sviluppato un tool che permette di generare e gestire gallerie dinamiche in Ajax e PHP con caricamento asincrono.

Il tool in questione si chiama donkeyGallery - demo - (http://factory.brainleaf.eu/donkeyGallery) ed è composto da una sorta di webservice in PHP che si occupa di monitorare le gallerie installate, generare i thumbnails e restituirci un listato completo dei contenuti delle gallerie e un plugin jquery per la configurazione e la gestione delle gallerie generate. Il plugin jquery permettere di caricare le gallerie in modo completamente asincrono, di gestire la paginazione delle gallerie e l'apertura dei fancybox associati alle immagini e alle gallerie. Vediamo insieme come installare ed usare donkeyGallery all'interno di un vostro progetto.

Come vedrete l'installazione del tool di gestione sarà semplice e velocissima.

Download Donkey Gallery


Per installare donkeyGallery, seguite alla lettera i punti seguenti:

  1. scaricate (cliccando su uno dei pulsanti di download presenti in questa pagina) l'ultima versione di donkeyGallery e decomprimete il pacchetto sul vostro disco locale.
    All'interno del pacchetto scaricato troverete una directory "dnk-gallery" e un file gallery-demo.html ;
  2. caricare via FTP la dir dnk-gallery sul vostro server.
    ATTENZIONE: per quanto sia prevista la possibilità di installazione in directory diverse, per semplicità di lavoro è bene che la directory dnk-dir si trovi allo stesso livello del file php/html nel quale intendete caricare le gallerie.
  3. includete della vostra pagina html (per convenzione chiameremo questa pagina galleria.html) il file css della galleria: dnk-gallery/css/jquery.donkeyGallery.packed.css
    (si consiglia di caricare sempre la versione minimizzata) ;
  4. includete della vostra pagina html, se non lo avete già, la libreria jQuery
  5. includete inoltre il plugin jquery della galleria: dnk-gallery/css/jquery.donkeyGallery.packed.js
    (si consiglia di caricare sempre la versione minimizzata);
  6. inserite all'interno della vostra i div necessari alle gallerie (ne dovete inserire uno per ogni galleria che intendete installare) e assgnategli delle id univoche. Lasciate vuoti questi div;
  7. caricate le immagini suddividendole per gallerie creando una directory per ogni galleria che si intende caricare e uplodate via FTP queste directory sul vostro server seguendo il percorso dnk-gallery/images/ ;
  8. inizzializzare e configurare le gallerie attraverso qualche riga di javascript. Seguite gli esempi mostrati appena sotto.

Configurazione delle gallerie

Le seguenti linee di javascript rappresentano la configurazione completa del plugin con tutte le opzioni settate ai valori di default. Ogni riga è commentata per illustrare l'uso e la funzionalità di ogni parametro.

$("#your-gallery-id").donkeyGallery({

      webservice : "dnk-gallery/php/gallery.webservice.php", // link file php 
      galleryPath : "dnk-gallery/images/your-gallery-dir/", // path della galleria. questa opzione deve terminare con una slash
      subdomain: "", // questa opzione è necessaria per installazioni in sub-directory
      style: "default", // stile css della galleria
      color: "default", // colore associato allo stile

      // thumbnails settings
      thumbs: {
          thumbW: 150, // thumb width
          thumbH: 150, // thumb height
          thumbsGen: false // se settato su true questo parametro forza la galleria a generare ogni volta i thumbnails e non solo quando questo è necessario(come a seguito di un update delle immagini)
      },
      // fancybox settings
      fancybox : {
          active: true, // attivazione del plugin fancybox
          galleryGroup: "donkeyGallery", // gruppo per la fancybox gallery view
          linkClass: "dnk-gallery-link" // classe associata al link di apertura chiusura del fancybox
      },
      // pagination settings
      pagination: {
          active: true, // attivazione easy paginate
          pageItems: 4 // numero di immagini per ogni pagina della galleria
      }

  });

Esempio pratico di configurazione

Nelle righe seguenti proponiamo un esempio pratico di configurazione eseguito su un dominio di fantasia http://miodominio.com e più specificamente in una sottodirectory di questo.
Per comodità chiameremo "gallery-test" la sottodirectory di installazione di donkeyGallery e gallery.html il file di fantasia all'interno del quale caricheremo le gallerie. La pagina così creata sarebbe dunque raggiungibile all'url http://miodominio.com/gallery-test/gallery.html

Supponiamo inoltre di aver caricato le immagini di due diverse gallerie all'interno della directory dnk-gallery/images/ chiamando le due directory  "gallery-1" e "gallery-2"

A questo punto nel file gallery.html dovremmo creare i due div per le due gallerie ai quali assegneremmo rispettivamente le id #gallery-1 e #gallery-2

In questo scenario una possibile configurazione potrebbe essere la seguente

$(document).on('ready', function(){
  $("#gallery-1").donkeyGallery({

      galleryPath : "dnk-gallery/images/gallery-1/",
      subdomain: "gallery-test/", // potrebbe anche essere "/gallery-test/" a seconda delle configurazioni del server
      style: "squared",
      color: "gray",
      fancybox : {
          active: true,
          galleryGroup: "gallery-1",
      }
  });
   $("#gallery-2").donkeyGallery({

      galleryPath : "dnk-gallery/images/gallery-2/",
      subdomain: "gallery-test/",
      style: "circle",
      color: "gray",
      fancybox : {
          active: true,
          galleryGroup: "gallery-2",
      }
  });
});


Mi auguro che quanto appena proposto possa risultare chiaro e che donkeyGallery possa soddisfare le vostre esigenze.

{phocadownload view=file|id=28|text=download donkeyGallery (latest)|target=s}

Demo e Documentazione
Per vedere la galleria in azione e leggere una documentazione più dettagliata potete visitare la pagina ufficiale all'url: http://factory.brainleaf.eu/donkeyGallery/

Help e Bug Reporting
Per bug reporting e richieste d'aiuto, potete usare la pagina Github di donkeyGallery (sentitevi liberi di scrivere anche in Italiano) che trovate all'url https://github.com/Gix075/donkeyGallery

UTILIZZO DI DONKEY GALLERY SU ALTERVISTA.ORG

Grazie alle segnalazioni di alcuni utenti, abbiamo riscontrato un malfunzionamento della galleria sui server di Altervista.org

Per risolvere il problema, almeno fino a quando troveremo una soluzione alternativa (probabilmente nelle prossime versioni), si deve sostituire, nel file gallery.webservice.php contenuto in dnk-gallery/php, il valore

$root = $_SERVER['DOCUMENT_ROOT'];

con

$root = "/membri/nomeutente/";

dove nomeutente è il vostro username su Altervista.
E' importante inoltre che i permessi della directory dnk-gallery (comprese le sottodirectory) siano impostati almeno a 775.
Per controllare o impostare i permessi è sufficiente utilizzare un client ftp (con FileZilla è possibile cliccando a destra sulla directory e scegliendo l'opzione "Permessi file" che aprirà un popup attraverso il quale sarà possibile impostare i permessi).

Da ricordare inoltre che in questa versione la galleria funziona solo con file di tipo .jpg

Download Donkey Gallery

Joomla SEF URLs by Artio