L'effetto Galleriffic per gallerie di immagini e slideshow da inserire in pagine statiche di Blogger.

Ho ricevuto per email la segnalazione dell'effetto Galleriffic che confesso non conoscevo. Il messaggio mi invitava a fare un articolo sull'argomento nel caso fosse possibile applicarlo a Blogger. Non ho fatto un lavoro di fino ma comunque ho elaborato il codice necessario al suo inserimento in una pagina statica.

Contrariamente agli altri effetti che ho presentato (Lightbox, Lytebox e Expando) in questo caso lascerò al lettore eventuali personalizzazioni che comunque non sono semplicissime e sono consigliabili solo ai più esperti. Una dimostrazione dell'effetto la potete trovare in questa Galleria di Galleriffic

 

Sulla parte sinistra ci sono le miniature delle immagini che si sono inserite nella galleria, mentre sulla destra è visualizzata a grandezza naturale quella che si è selezionata. Vengono visualizzate 15 miniature per pagina, quindi se sono in numero superiore ci saranno dei pulsanti di navigazione per aprire le altre pagine.

Accanto ai pulsanti di navigazione c'è il link "Play Slideshow" per iniziare lo scorrimento automatico delle immagini che può essere interrotto cliccando su Pause.

Sotto alla immagine grande c'è il link "Scarica Originale" per accedere al link della foto. Si possono anche utilizzare i pulsanti "Previous Photo" e "Next Photo" per passare all'immagine seguente o successiva. Si trovano sopra all'immagine selezionata.

INSTALLAZIONE DELL'EFFETTO GALLERIFFIC 

Andare su Layout > Modifica HTML e cercare la riga </head>. Immediatamente sopra incollare il seguente codice

<!--GALLERIFFIC INIZIO ALTO-->
<b:if cond='data:blog.url == "URL_della_Pagina_statica"'>
<link href='http://sites.google.com/site/ideepercomputeredinternet/galleriffic/galleriffic-basic.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ideepercomputeredinternet/galleriffic/galleriffic-2.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/galleriffic/jquery-1.3.2.js' type='text/javascript'/>
        <script src='http://sites.google.com/site/ideepercomputeredinternet/galleriffic/jquery.galleriffic.js' type='text/javascript'/>
        <script src='http://sites.google.com/site/ideepercomputeredinternet/galleriffic/jquery.opacityrollover.js' type='text/javascript'/>
    <!-- Per mostrare le miniature quando il javascript è disabilitato -->
        <script type='text/javascript'>
            document.write(&#39;<style>.noscript { display: none; }</style>&#39;);
        </script>
</b:if>
<!--GALLERIFFIC FINE ALTO - http://parsifal32.blogspot.com-->

dove occorre inserire l'URL della pagina statica in cui si inserisce la galleria;quindi cercare in fondo al modello la riga </body> e, immediatamente sopra, incollare quest'altro codice

<!--GALLERIFFIC BASSO INIZIO-->
<script type='text/javascript'>
            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $(&#39;div.navigation&#39;).css({&#39;width&#39; : &#39;300px&#39;, &#39;float&#39; : &#39;left&#39;});
                $(&#39;div.content&#39;).css(&#39;display&#39;, &#39;block&#39;);
                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $(&#39;#thumbs ul.thumbs li&#39;).opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity:  1.0,
                    fadeSpeed:         &#39;fast&#39;,
                    exemptionSelector: &#39;.selected&#39;
                });
                // Initialize Advanced Galleriffic Gallery
                var gallery = $(&#39;#thumbs&#39;).galleriffic({
                    delay:                     2500,
                    numThumbs:                 15,
                    preloadAhead:              10,
                    enableTopPager:            true,
                    enableBottomPager:         true,
                    maxPagesToShow:            7,
                    imageContainerSel:         &#39;#slideshow&#39;,
                    controlsContainerSel:      &#39;#controls&#39;,
                    captionContainerSel:       &#39;#caption&#39;,
                    loadingContainerSel:       &#39;#loading&#39;,
                    renderSSControls:          true,
                    renderNavControls:         true,
                    playLinkText:              &#39;Play Slideshow&#39;,
                    pauseLinkText:             &#39;Pause Slideshow&#39;,
                    prevLinkText:              &#39; Previous Photo&#39;,
                    nextLinkText:              &#39;Next Photo &#39;,
                    nextPageLinkText:          &#39;Next &#39;,
                    prevPageLinkText:          &#39; Prev&#39;,
                    enableHistory:             false,
                    autoStart:                 false,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // &#39;this&#39; refers to the gallery, which is an extension of $(&#39;#thumbs&#39;)
                        this.find(&#39;ul.thumbs&#39;).children()
                            .eq(prevIndex).fadeTo(&#39;fast&#39;, onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo(&#39;fast&#39;, 1.0);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo(&#39;fast&#39;, 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        this.fadeTo(&#39;fast&#39;, 1.0);
                    }
                });
            });
        </script>
<!--GALLERIFFIC BASSO FINE - http://parsifal32.blogspot.com-->

Salvare il modello. Le parole che ho evidenziato di rosso possono anche essere sostituite da espressioni in italiano come "Inizio Slideshow", "Pausa Slideshow", "Foto Precedente", "Foto Successiva", "Pre" e "Suc".

La creazione della galleria vera e propria non è semplicissima ma può essere fatta seguendo le indicazioni contenute nel sito di Galleriffic.

Coloro che non vogliono perdersi troppo con codici o roba simile possono seguire questo procedimento alternativo. Creare una pagina statica e passare alla modalità HTML. Incollare il codice che troverete in Galleriffic Demo e che dovrà essere personalizzato. Dovrete cioè cambiare

1. Il titolo della galleria, in questo caso "Galleriffic" che si trova all'inizio del codice
2. I titoli delle immagini che vengono indicati come Titolo #1, Titolo#2, ecc
3. Gli URL delle immagini che sono del tipo http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg e che devono essere incollati anche nel collegamento. In sostanza dopo il tag href=" e dopo quello src="
4. Inserire eventuali descrizioni al posto di "Descrizione"
5. E' possibile anche inserire del codice HTML per collegamenti aggiuntivi o altri abbellimenti

Le immagini dovranno essere caricate su hosting tipo Skydrive o Picasa. Non resta che pubblicare la pagina dopo che si è passati alla modalità Scrivi.

E' possibile che questo effetto non abbia lo stesso impatto a seconda dei modelli in cui si inserisce. Si può sempre cambiare lo stile aprendo, modificando e ricaricando online i due file CSS presenti nella prima parte del codice.

Sono possibili delle interferenze tra gli stili della galleria e quelli del blog. A breve scriverò un altro post per creare una pagina con l'Effetto Galleriffic non in una pagina statica ma in un intero blog.

Fonte | Twospy Galleriffic -