Pubblicato il 05/05/10 - aggiornato il  | 13 commenti :

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

galleriffic-effetto-1 

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 -



13 commenti :

  1. Fantastico!!!
    Non dimenticherò mai di ripeterlo, sei sempre molto disponibile!!!
    Penso proprio che in questi giorni avrò molto da lavorare con questi codici. Mi metto subito al lavoro ...
    Ti farò sapere...
    Grazie mille
    Ciao,CS

    RispondiElimina
  2. @CS
    E' un peccato che si siano allungati i box delle immagini. Non è semplice conciliare gli stili dell'effetto con quelli pre-esistenti nel modello

    RispondiElimina
  3. Hai proprio ragione!
    Facendo già una prova ho riscontrato lo stesso effetto, non sono ordinate e in più i titoli delle varie sezioni (post e sidebar) mi si sono ingranditi e, strano ma vero, cliccando su una foto, Galleriffic mi fà visionare la foto precedente.
    E' proprio un peccato, avendo tante foto, ritenevo Galleriffic la soluzione più ottimale, anche se Galleria e Javascript Slideshow non sono da scartare.
    ...proverò ancora
    Ciao, CS

    RispondiElimina
  4. Salve,
    vorrei inserire la gallegia che si trova qui (http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm ) nel mio sito ma non ci riesco.
    Ce ne sono molte altre ma forse loro si spiegano male e non si capisce bene la procedura.
    Sapresti aiutarmi?

    RispondiElimina
  5. @Antonio
    E' un lavoro che richiede molto tempo. Se ne ho posso dare un'occhiata ma senza impegno.
    Ciao

    RispondiElimina
  6. Grazie aspetterò la pubblicazione di un nuovo post a riguardo perchè io non riesco proprio farlo funzionare.

    RispondiElimina
  7. Caro Parsi, visto che grazie a te le idee nascono spontanee, ti volevo chiedere se era possibile mettere un'immagine al posto del titolo in una pagina statica? Grazie e ciao

    RispondiElimina
  8. @Stefano
    Ho spiegato come fare per mettere un elemento HTML al posto dell'header
    http://www.ideepercomputeredinternet.com/2011/02/come-inserire-un-widget-html-al-posto.html
    Poi si deve mettere la condizione che sia visto solo in un determinato URL della pagina statica

    RispondiElimina
  9. Scusa mi sono spiegato male. Ti faccio l'esempio pratico così mi riesco a spiegare meglio. Io ho 6 pagine statiche con i relativi titoli (che poi corrispondono ai nomi delle persone).
    Domande:
    1) al posto del nome è possibile mettere, per ogni pagina, un'immagine?
    2) sarebbe possibile mettere insieme una miniatura e un nome?

    RispondiElimina
  10. @Stefano
    Una miniatura diversa per ogni pasgina la puoi mettere mediante inserimento di widget HTML, modificando il modello è complicato

    RispondiElimina
  11. Come si fa? Nel creare la pagina non mi sembra che si possa inserire, nel titolo, una miniatura o un widget html (almeno per le mie scarse conoscenze) Grazie e ciao

    RispondiElimina
  12. Grazie per la cortesia e diponibilità e scusa per i miei voli onirici

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy