19 febbraio 2017

Creare una galleria dinamica per WebSite X5

WebSite X5 prevede un Oggetto Galleria con la possibilità di scegliere tra diverse tipologie: in presenza di numerose immagini, però, il progetto può diventare corposo e di difficile gestione.
In questo articolo presenteremo uno script PHP che ci permette di leggere dinamicamente le immagini direttamente da una cartella sul server e di visualizzarle come miniature con ingrandimento nello ShowBox di WebSite X5: in questo modo ci basterà aggiungere o rimuovere le immagini sul server per aggiornare automaticamente la pagina, senza bisogno di aprire il programma.
Di fatto abbiamo rimesso mano ad un codice PHP che avevamo descritto in questo post e lo abbiamo integrato con il codice JavaScript della Galleria Miniature del programma.

Ecco la nostra demo:

demo dynamic gallery
DEMO

Vediamo ora come procedere:

CREAZIONE CARTELLA E CARICAMENTO IMMAGINI


Creiamo sul server una cartella in cui esporteremo le nostre immagini. Possiamo utilizzare il pannello di controllo online che ogni web hosting offre, un programma FTP tipo FileZilla o possiamo utilizzare il programma stesso al Passo 5, Esporta i file su Internet e, a connessione avvenuta, cliccare nella barra degli strumenti sull'icona    per creare una nuova cartella e sull'icona  per caricare le immagini sul server.

Nota bene: lo script visualizzerà automaticamente nella descrizione dell'immagine ingrandita il nome del file immagine, sostituendo con uno spazio l'eventuale trattino (-) presente. Per quanto riguarda le estensioni, lo script riconosce file con estensione .jpg, .png e .gif, ma eventualmente è possibile anche modificare questi filtri.

INSERIMENTO SCRIPT


Scarichiamo da QUI il file image.php che servirà per la gestione delle miniature (Smart Image Resize, versione di luciorota). Questo script permette di creare automaticamente le miniature a partire dalle immagini originali: noi abbiamo scelto di impostare la creazione di miniature quadrate, ma lo script prevede anche altre opzioni, per le quali occorre documentarsi sul sito dell'autore. Per il suo funzionamento è necessario che sul server siano abilitate le librerie GD.

Nella pagina in cui vogliamo visualizzare la gallery impostiamo l'estensione .php da Proprietà Pagina, Esperto, Estensione del file generato. Inseriamo un Oggetto Codice HTML, impostiamo l'altezza a 0 ed alleghiamo il file image.php appena scaricato nella scheda Esperto, lasciando vuoto il campo Percorso relativo sul Server: in questo modo il file verrà caricato nella root del server.

Copiamo e incolliamo quindi nella scheda Codice HTML questo script:
<!-- ==================================================================
Dynamic Gallery
PHP code by quellidelcucuzzolo.blogspot.com 
JS code by Incomedia
Please do not remove credit
=================================================================== -->
<div id="ms-gallery">
   <script> 
      var showbox_MS_Gallery= {
      media: [ 
      <?php
         //DA PERSONALIZZARE:
         $folder = "ms-gallery"; //cartella sul server in cui sono contenute le immagini
         $effect = 2;            //numero corrispondente all'effetto di transizione scelto
         $sizethumbs = 150;      //larghezza delle miniature quadrate
         
         $effects = array(
         "none",
         "random",
         "fade",
         "horizontalSlide",
         "verticalSlide",
         "horizontalSlideSwing",
         "verticalSlideSwing",
         "zoom",
         "elasticFromTop",
         "elasticFromBottom",
         "elasticFromLeft",
         "elasticFromRight",
         "bounceFromTop",
         "bounceFromBottom",
         "bounceFromRight",
         "bounceFromLeft",
         "rotateLinear",
         "rotateZoom",
         "carousel",
         "verticalSlices",
         "scramble",
         "squares",
         "flip"
         );
         $imgdir  = glob($folder."/*.{jpg,png,gif}", GLOB_BRACE);
         foreach ($imgdir as $key => $filename) {
         $imgsize  = getimagesize($filename);
         $nomefile = pathinfo(basename($filename));
         echo '{type: "image", url: "' . $filename . '", width: ' . $imgsize[0] . ', height: ' . $imgsize[1] . ', description: "' . str_replace('-', ' ', $nomefile['filename']) . '", "effect": "' . $effects[$effect] . '"}';
         if ($key < sizeof($imgdir)-1)
         echo ',';
         }
         ?> 
      ]};
   </script> 
   <?php
      foreach ($imgdir as $key => $filename) {
          $nomefile = pathinfo(basename($filename));
          $urlfile  = dirname($_SERVER['PHP_SELF']);
          echo "<a href='$filename' onclick='return x5engine.imShowBox(showbox_MS_Gallery, $key, this);'><img class='ms-gallery' src='image.php?width=$sizethumbs&height=$sizethumbs&cropratio=1:1&image=$urlfile/$filename' alt='" . str_replace('-', ' ', $nomefile['filename']) . "' /></a>";
      }
      ?>
</div>
<!-- end Dynamic Gallery -->


Le variabili da personalizzare sono:
  • $folder = "ms-gallery";
    inserire il nome della cartella in cui sono state caricate le immagini
  • $effect = 2;
    il numero (da 0 a 22) indicato in questa variabile definisce il tipo di transizione che avranno le immagini ingrandite nello ShowBox. Per avere un'idea degli effetti disponibili basta inserire temporaneamente nel progetto un Oggetto Galleria, Tipo Miniature, inserire un'immagine nella Scheda Elenco e visualizzare nelle Opzioni le varie possibilità ed il numero ad esse associato


  • $sizethumbs = 150;
    il valore inserito in questa variabile definisce la larghezza delle miniature quadrate che il file image.php creerà automaticamente. 

DEFINIZIONE STILI


Possiamo definire da programma lo stile grafico dello ShowBox al Passo 2, Personalizzazione, ShowBox, Tooltip e E-mail.
Per quanto riguarda le miniature dobbiamo aggiungere qualche riga di CSS: nel nostro esempio abbiamo definito un semplice bordo grigio e abbiamo distanziato tra loro le miniature impostando padding e margin, ma il codice è completamente personalizzabile.
Inserire quindi questa regola nella scheda Esperto, Codice CSS sempre dello stesso Oggetto HTML:
img.ms-gallery{
    padding: 20px;
    border: 1px solid gray;
    margin: 4px;
 }

Ovviamente in Anteprima la gallery non sarà visibile. Se vogliamo tenere "pulita" la pagina, evitando di visualizzare parti di codice, possiamo inserire questo script in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD:
<script>
$(document).ready(function() {
  // funzionalità offline
  if (location.host == "127.0.0.1:8080")
    $("#ms-gallery").html("La gallery si visualizzerà solo quando il sito verrà esportato su Internet");
});
</script>




8 gennaio 2017

Come creare un semplice sfondo animato con i CSS3

La proprietà animation dei CSS3 permette di creare animazioni efficaci senza l'uso di JavaScript o dell'ormai obsoleto Flash. Abbiamo voluto provare anche noi a lavorare con questa proprietà con l'intento di creare un semplice sfondo animato con un effetto tipo parallax orizzontale.
Anche se in rete si trovano già diversi esempi al riguardo, questo è quello che noi abbiamo ottenuto:

demo sfondo animato css3
DEMO

Ma vediamo passo passo il procedimento seguito:
1. Abbiamo scelto le immagini da sovrapporre, in formato .png, cercando tra le innumerevoli risorse gratuite che fornisce Pixabay.
Questa è l'immagine che abbiamo usato in primo piano:


Questa l'immagine inserita come secondo livello:

I lati sinistro e destro delle due immagini sono stati modificati in modo da renderli contigui, così che le immagini possano essere ripetute in orizzontale senza che vengano visualizzati stacchi.
Ed infine questa immagine, posta come terzo livello, che rappresenta delle stelle stilizzate:



2. Abbiamo definito il codice HTML per posizionare le tre immagini come immagini di sfondo di tre diversi div inseriti all'interno di un div contenitore:
<div id="parallax-hor">
  <div id="sky3"></div>
  <div id="sky2"></div>
  <div id="sky1"></div>
</div>

Con i CSS abbiamo posizionato in modo assoluto i tre div in modo che le relative immagini di sfondo, ripetute in orizzontale, si sovrappongano una sopra l'altra.
Ecco il risultato parziale ottenuto: STEP 1

3. Occupiamoci ora dell'animazione del colore di sfondo del div contenitore:
#parallax-hor {
  animation: sfondocol 20s linear infinite alternate;
}
@keyframes sfondocol {
  from {
    background-color: #f1aa32;
  }
  to {
    background-color: #003300;
  }
}
Nel codice utilizzato la proprietà animation è la scrittura contratta delle seguenti proprietà/valore:
Esistono altre proprietà utilizzabili, ad esempio animation-delay con cui si può applicare  all'animazione un ritardo, che, se non dichiarate nella sintassi abbreviata, assumono il valore di default.

L'animazione (nel nostro caso sfondocol) è definita dalla regola @keyframes che contiene le proprietà CSS da animare, nel nostro caso il colore di sfondo che passa dal valore iniziale definito in from al valore finale definito in to. In alternativa a from e to si possono usare le percentuali per indicare i vari step dell'animazione.
Ecco il risultato parziale ottenuto: STEP 2

4. Infine diamo movimento alle tre immagini di sfondo:
#sky1 {
  animation: moto 40s linear infinite;
}
#sky2 {
  animation: moto 60s linear infinite;
}
#sky3 {
  animation: moto 180s linear infinite;
}
@keyframes moto {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2560px 0;
  }
}
L'animazione cambia la posizione delle tre immagini di sfondo dal valore iniziale (0 0) al valore finale (2560px 0).
Il valore di 2560 non è casuale ma deve essere un multiplo della larghezza delle immagini per evitare di visualizzare lo scatto nel momento in cui l'immagine torna alla sua posizione iniziale.
Le tre animazioni si differenziano solo nella durata, ottenendo così movimenti a velocità diverse simulando l'effetto parallasse.

Per assicurare una maggiore compatibilità con i vari browser/dispositivi è opportuno utilizzare anche i prefissi proprietari per la proprietà animation e la regola @keyframes

QUI potete scaricare il CSS completo.