2 marzo 2011

Galleria di immagini Coin Slider con effetti di transizione per Blogger.

Questa galleria di immagini, chiamata Coin Slider dal suo autore, è veramente interessante perché coniuga effetti suggestivi con una certa semplicità di installazione. E' compatibile con tutti i browser, anche con i più datati. Per avere una idea del funzionamento, date uno sguardo alla

Demo della Galleria Coin Slider



Ricorda un po' l'effetto Piecemaker anche se è più semplice e meno pesante da caricare. Anche in questo caso vengono visualizzate delle immagini che si susseguono automaticamente con effetti di transizione. Sotto le foto sono visibili i bottoni di navigazione per aprire ciascuna di essa

galleria coin slider
Se si punta l'immagine con il mouse, si vedono anche le scritte Precedente e Successiva per passare alle foto adiacenti. Per l'installazione bisogna andare su Design > Modifica HTML e cercare la riga </head>. Immediatamente sopra si incolla il seguente codice
<!--Galleria Coin Slider Inizio-->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/scriptperilblog/javascript-2/coin-slider.min.js' type='text/javascript'/>
<link href='https://sites.google.com/site/scriptperilblog/javascript-2/coin-slider-styles.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#coin-slider&#39;).coinslider();
});
</script>
<noscript><a href='http://goo.gl/l4eBf' target='_blank'>Coin Slider Gallery</a></noscript>
<!--Galleria Coin Slider Fine - http://www.ideepercomputeredinternet.com-->
Salvate il modello. Il codice della galleria deve essere incollato in un elemento HTML. Si può anche inserire in delle pagine statiche ma si deve sempre andare su Design > Aggiungi un gadget > HTML/Javascript. Poi eventualmente si può inserire una condizione per mostrare questa galleria solo in quella determinata pagina attraverso i tag condizionali. Il codice da inserire nell'elemento HTML può essere simile a questo
<div align="center"><div id='coin-slider'>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="https://lh5.googleusercontent.com/-j1wcivHs0no/T6eJTNtBd5I/AAAAAAAAYBo/caV3hJc6W94/s900/piecemaker7.jpg" />
<span>
Albero spoglio
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Nuvole tempestose
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Conchiglie sulla sabbia
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Prato fiorito
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Scoglio sul mare
</span>
</a>
<a href="http://www.ideepercomputeredinternet.com" target="_blank">
<img style="width: 900px; height: 360px;" src="URL_IMMAGINE" />
<span>
Foglie in Autunno
</span>
</a>
</div></div>
La sintassi di ciascuna foto inserita è la seguente
<a href="URL COLLEGAMENTO" target="_blank">
<img style="width: 900px; height: 360px;" src="URL IMMAGINE" />
<span>
TITOLO IMMAGINE O POST COLLEGATO
</span>
</a>

dove si sostituiscono le parti in rosso con l'indirizzo della pagina collegata a ciascuna foto e il suo URL. Si mette anche il titolo della immagine o del post collegato che sarà visibile nella parte bassa. La riga iniziale <div align="center"> e quella finale </div> possono essere tolte se si vogliono visualizzare i titoli sulla sinistra delle immagini e non al centro. Dopo aver cliccato su Salva si va su Design > Elementi pagina e, con il drag and drop del mouse, si posiziona la galleria Coin Slider.
Aggiornamento: i più esperti possono modificare le dimensioni di default delle immagini aprendo con Notepad++ il file coin-slider.min.js e il CSS coin-slider-styles.css. Nel primo si possono modificare i parametri di default
  defaults=width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})


riguardo a dimensioni delle immagini, velocità, opacità e effetti. I parametri possono essere configurati secondo le istruzioni della pagina dell'autore nella sezione  List of all options. Nel file CSS si può modificare la lunghezza del titolo width: 545px; oltre ad altri parametri quali il padding, il colore di background e il colore del titolo. Dopo aver modificato questi file vanno caricati su servizi tipo Google Sites in modalità Schedario o DropBox. Ringrazio asd teamlenox per aver sollevato il problema di una maggiore personalizzazione.
Fonte | Coin Slider JQuery -


40 commenti:

  1. mi piace! Se risulta più veloce di piecemaker quasi quasi lo sostituisco... anche se la particolarità del mio blog sta in quello... però potrei metterlo nella pagina dove ho tutte le miniature come presentazione iniziale :) grazie :*

    RispondiElimina
  2. @Soffio di Dea
    Finalmente una cosa che ti piace senza riserve ahahah

    RispondiElimina
  3. colpa tua... mi hai "viziata" con proposte sempre più sofisticate ! :D kiss ancora merci.

    RispondiElimina
  4. Ciao, ho provato tutto ma mi compaiono le immagini statiche una di seguito all'altra.
    Il blog dove ho provato è questo;

    http://alessandroguiotto.blogspot.com/.

    Ho provato altre cose tue e mi hanno funzionato (come ad es. il megamenu).
    Ho controllato e messo il codice corretto sopra /head in ubn modello simple.
    Grazie e complimenti per i suggerimenti

    RispondiElimina
  5. Ti chiedo scusa.
    Il commento precedente non lo considerare
    Ho provato con un altro account e modello e funziona benissimo.
    Probabilmente (penso) è perchè questo è un account di un modello vecchio che ho riportato sui nuovi modelli di Blogger e sul codice HTML deve essere rimasto qualcosa di sporco
    Grazie, scusami ancora e rinnovo i complimenti. Sei un vero FARO!!!.

    RispondiElimina
  6. @Alessandro
    Prova adesso che ho cambiato hosting per gli script. Se non funziona ci deve essere qualche incompatibilità con il modello Simple.

    RispondiElimina
  7. ti do una bella notizia... funziona anche all'interno di una pagina statica... basta copiare il codice html nella pagina :) (ari-grazie)

    RispondiElimina
  8. l'unica cosa è che nn si vedono i titoli e appaiono più piccole

    RispondiElimina
  9. Ciao, a me funziona tuttavia, se cambi le dimensioni delle immagini, non si ridimensiona.
    Ho provato anche con le tue e ho dimezzato le misure di tutte e 6 le immagini (mettendo width: 450px; height: 180px) ma l'immagine rimane della stessa grandezza di prima. Se puoi fare una prova per capire se sbaglio io ti ringrazio.

    RispondiElimina
  10. Sono ancora io, per darti un'idea di cosa intendo, puoi vedere la prova che ho fatto qui:
    http://guiottoprova.blogspot.com/
    Tutte le immagini inserite sono con queste dimensioni (width: 168px; height: 240px). Come vedi le sdoppia e le ripartisce sulla stessa grandeszza dell'immagine precedente (credo 900x360). Grazie ancora.
    Ciao!

    RispondiElimina
  11. @Soffio di Dea
    E' evidente che se non si usa un elemento HTML è un po' un terno al lotto :)

    @asd teamlenox
    Funziona con qualsiasi dimensione di immagine. L'unica cosa che non ho scritto nel post perché mi sembrava ovvia è che tutte le immagini devono avere le stesse dimensioni. Non ne puoi mettere una 900x360 e un'altra 400x200. O tutte 900x360 o tutte di un'altra misura a scelta.

    RispondiElimina
  12. Scusami Parsifal, non intendo insistere, ma le immagini che trovi sono tutte e tre con queste dimensioni [width: 173px; height: 243px] e sono pure salvate con queste dimensioni.
    Se puoi, per favore, ti chiedo per l'ultima volta, di dare un'occhiata a
    http://guiottoprova.blogspot.com/
    Grazie infinite!

    RispondiElimina
  13. @asd
    Dal tuo codice sorgente mi pare che tu abbia inserito le dimensioni delle immagini ma non sono corrispondenti a quelli reali. Se metti 400x300 anche le immagini devono essere ridimensionate. Nel tuo caso poi le proporzioni sono tutte sfalsate: larghezza molto minore dell'altezza. Devi quindi avere una serie di immagini che abbiano la stessa proporzione altezza/larghezza tipo televisione 4:3 o 16:9 e poi le devi ridimensionare.

    RispondiElimina
  14. @asd
    Forse non mi sono spiegato bene. Non importa che le dimensioni siano le stesse, devono corrispondere ai dati del codice. Nel codice che hai postato hai inserito questi dati
    width: 450px; height: 180px;
    che sono diversi da
    width: 173px; height: 243px
    dimensioni reali delle foto.

    RispondiElimina
  15. Forse mi spiego male io.
    Rimaniamo sull'esempio tuo. Se guardi la tua immagine completa denominata "Albero Fiorito" caricata da te su:

    http://dl.dropbox.com/u/2574553/piecemaker%202/piecemaker7.jpg

    e la guardi come viene rappresentata nello slideshow, vedrai che l'immagine E' TAGLIATA. Si vede solo la parte sinistra dell'albero cioè solo i rami mentre, in realtà, nell'immagine completa si vede tutto l'albero compresa la parte alta del busto. Significa che la foto viene TAGLIATA per adattarsi alla finestra con dimensioni preimpostate e diverse da quella della foto.
    Ciao, grazie, e scusami se ti tormento.

    RispondiElimina
  16. A conferma che la finestra non si adatta alle dimensioni delle immagini bensì sono le immagini che si devono adattare (se sono più grandi vengono tagliate, se sono più piccole vengono sdoppiate), ho preso 2 delle tue immagini "Albero Spoglio" e "Nuvole Tempestose" e le ho ridimensionate.
    Da 900 x 360 le ho portate a 594 x 238 (il 66%). Le ho caricate e ho messo a posto le dimensioni. Ebbene le immagini si vedono nella stessa finestra solo che adesso si vedono quasi complete (sono ancora leggermente tagliate sulla parte destra). Verifica la differenza tra il tuo esempio e quello fatto su

    http://guiottoprova.blogspot.com/

    Ciao.
    Grazie!

    RispondiElimina
  17. Bellissima!
    Grazie parsifal32.
    Ho inserito il tuo blog nel mio blogroll.
    Ed ho anche messo in pratica alcuni tuoi consigli.
    Grazie di tutto.
    Buona serata
    erika

    RispondiElimina
  18. @asd...
    Le dimensioni ideale sono width 507 e height 405

    @Erika
    Grazie

    RispondiElimina
  19. Ciao Parsifal, ho risolto il problema andando a modificare il CSS e le impostazioni di default del file "coin-slider.min"
    Dopo averli aperti con Notepad++, ho modificato:
    - nel file "coin-slider.min.js" all'ultima riga ho sostituito le grandezze dell'immagine con [fn.coinslider.defaults={width:173,height:243,]
    - nel file CSS ho sostituito la lunghezza del titolo, al posto di cs-title { width: 545px; ho inserito cs-title { width: 153px;.

    Ho caricato tutto su Dropbox e il risultato è quello che vedi su

    http://guiottoprova.blogspot.com/

    che ora è come volevo io.
    Credo che in questo modo possa risolvere il problema anche @Soffio di Dea.

    Se sono riuscito a fare questo è, comunque è solo merito dei tuoi consigli e delle preziose indicazioni che ci fornisci.

    Ti sono molto riconoscente e grato.

    RispondiElimina
  20. @asd...
    Il problema di Soffio di Dea è diverso, vuole inserire la galleria nelle pagine statiche e non in un widget :)

    RispondiElimina
  21. si infatti... io amo complicarmi la vita -.- grazie ad entrambi :D

    RispondiElimina
  22. Salve ottima guida!!!..In molti blog ho visto che questo gadget puo essere allineato con le colonne..Tu sai come si fa??

    RispondiElimina
  23. mosso mettere questo effetto..più piccolo e magari nel menu laterale?? e aggiungerci il link di riferimento ai post??

    RispondiElimina
  24. @BrilliDiLuce
    Sì, basta che modifichi le dimensioni adattandole alla larghezza della tua sidebar.

    RispondiElimina
  25. @Ernesto T.e ci posso aggiungere un link di riferimento??

    RispondiElimina
  26. e come faccio a sapere le misure della mia sidebar??

    RispondiElimina
  27. @BrilliDiLuce
    Guardando il tuo codice sorgente ho visto che la tua sidebar non ha una misura precisa. C'è questo codice
    body#layout .art-sidebar1{
    width: 25%;
    }
    questo vuol dire che è il 25 per cento di tutta la larghezza. Devi andare un po' a prove ma dovrebbe essere intorno ai 220 pixel

    RispondiElimina
  28. uh ma che carine le faccine sopra i commenti... nel modulo di esempio. Me le sono perse?

    RispondiElimina
  29. @Soffio di Dea
    Pensa che funzionano anche con Internet Explorer 8 e 9 ;)))
    http://www.ideepercomputeredinternet.com/2011/07/come-inserire-le-emoticon-di-facebook.html
    Sono le emoticon della chat di Facebook che possono essere installate facilmente.

    RispondiElimina
  30. ciao, ho provato a mettere sul mio blog questo slide ma non funziona, anche a me, come ad alcuni ho letto qua sopra, visualizza solo le immagini una sotto l'altra, senza alcun script.

    io ho inserito nel modello il codice che hai evidenziato nel primo riquadro e aggiunto un gadget html/java nel corpo della mia home.

    siccome ho letto che potrebbe essere un'incompatibilità di modelli vecchi, io uso il modello finestra immagine, potrebbe essere questo il problema?

    grazie in anticipo della risposta e complimenti per gli articoli :)

    RispondiElimina
    Risposte
    1. @Kymoi Urasawa #blogger #widget
      Se utilizzi un dominio personalizzato cioè www.esempio.com allora il widget non funziona. Devi scaricare i file
      https://sites.google.com/site/scriptperilblog/javascript-2/coin-slider.min.js
      https://sites.google.com/site/scriptperilblog/javascript-2/coin-slider-styles.css
      incollandone l'indirizzo nel browser quindi caricarli sulla cartella Public di Dropbox
      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
      Acquisire il link diretto di questi file andando su Copy Public link e sostituire nel codice questi URL a quelli che hai scaricato.

      Elimina
    2. fatto, è venuto molto bene :) ti ringrazio tantissimo, era da settimane che non dormivo perchè non trovavo nulla in giro, ho dato un'occhiata anche ad altri gadget, molto utili e stra belli :) metto sicuramente il link del blog, merita davvero

      Elimina
  31. Questo slideshow è bellissimo, e carica velocemente.
    Un'unica cosa: io ho impostato linghezza 1020 px, che è la stessa del blog, però continuano a rimanermi due margini sulla destra e sulla sinistra. Cosa devo cambiare perché prenda il blog in tutta la sua lunghezza?
    Grazie

    RispondiElimina
    Risposte
    1. La larghezza delle immagini a 1020 pixel?
      Prova a mettere
      width: 100%; height: auto;
      Non so se funzionerà...
      @#

      Elimina
  32. Ciao Ernesto! Vorrei aggiungere questa galleria o una simile magari con miniature in un articolo...si riesce?
    Grazie!

    RispondiElimina
    Risposte
    1. Non so se funzioni. Puoi provare. Ricordati di pubblicare il post direttamente da HTML senza andare su Scrivi
      @#

      Elimina
  33. Ernesto scusa se ti rompo ancora le scatole...ma non esiste un widget da inserire facilmete in un articolo che faccia un effetto simile?

    RispondiElimina
    Risposte
    1. Non si può dire a priori. Bisogna testare per vedere se funziona in un post invece che in un widget.
      @#

      Elimina

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