Vista Gallery

Qui sotto puoi vedere un esempio di una ottima galleria fotografica fullscreen utilizzando la vista Gallery della componente TZ Portfolio.

Si ottiene creando una voce di menu di tipo TZ Portfolio>Portfolio Gallery che punta a una o più categorie di articoli, impostando nelle opzioni numero di colonne e loro larghezza ed altezza.

Negli articoli non ho messo altro che il titolo ed inserita una immagine, impostando images come parametro media. Ed ecco qui sotto il risultato che io trovo decisamente carino. Passando con il mouse sopra l'immagine c'è quel simpatico effetto di rotazione che invita al clic. Al clic l'immagine si ingrandisce con due movimenti e va ad occupare tutto lo schermo. Responsiva, qualsiasi sia la dimensione del monitor. La gallery diventa quindi navigabile fullscreen e la didascalia è il titolo dell'articolo. Quell'effetto di uscita e rientro dell'immagine nella sua casella è davvero fantastico!

Creato: Martedì, 30 Ottobre 2012 13:24 | Rate this article

( 17 Votes )

| Scritto da tonicopi | 28607 Hits | Categoria: Demo Templates | Comment count: 0

Come possiamo realizzare nel nostro sito web una slideshow carina, che si adatti a ogni dimensione e che funzioni con ogni browser?

Beh, la risposta è semplice. Ti basterà copiare il codice che troverai sotto la slideshow, incollarlo in un tuo articolo e cambiare i percorsi, i titoli e le descrizioni delle immagini.

Dovrai però usare il template di default Protostar, o altro che utilizzi lo stesso framework, il bootstrap, che è integrato in Joomla 3.

Io trovo davvero interessanti queste caratteristiche perchè ci permettono di realizzare un bel sito web senza bisogno di installare altre estesnioni, il che vuol dire maggior velocità e. soprattutto, maggior sicurezza.

Gustiamoci adesso queste belle immagini. Volutamente hanno altezza diversa perchè volevo testare il comportamento della slideshow. Esame passato, direi!

Fagiano

Descrizione prima immagine....

Farfalla

Descrizione seconda immagine...

Cigni

Descrizione terza immagine...

Ancora farfalle

Descrizione quarta immagine...

Pesce

Descrizione quinta immagine...

Farfalla e scorpione

Descrizione sesta immagine...

Pappagallo

Descrizione settima immagine...

‹ ›

Ecco qui il codice utilizzato per questa slideshow:


<div id="mySlide" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><img src="/joomla35/images/slide/01.jpg" />
<div class="carousel-caption">
<h4>Fagiano</h4>
<p>Descrizione prima immagine....</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/02.jpg" />
<div class="carousel-caption">
<h4>Farfalla</h4>
<p>Descrizione seconda immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/03.jpg" />
<div class="carousel-caption">
<h4>Cigni</h4>
<p>Descrizione terza immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/04.jpg" />
<div class="carousel-caption">
<h4>Ancora farfalle</h4>
<p>Descrizione quarta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/05.jpg" />
<div class="carousel-caption">
<h4>Pesce</h4>
<p>Descrizione quinta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/06.jpg" />
<div class="carousel-caption">
<h4>Farfalla e scorpione</h4>
<p>Descrizione sesta immagine...</p>
</div>
</div>
<div class="item"><img src="/joomla35/images/slide/07.jpg" />
<div class="carousel-caption">
<h4>Pappagallo</h4>
<p>Descrizione settima immagine...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#mySlide" data-slide="prev">‹</a> <a class="right carousel-control" href="#mySlide" data-slide="next">›</a></div>