Pubblicato il 20/01/13 - aggiornato il  | 74 commenti :

Slideshow di immagini con effetti di transizione casuali.

Come installare uno slideshow di immagini come widget su Blogger con l'effetto Nivo Slider.
Gli slideshow di immagini sono certamente uno dei widget più amati anche se uno dei più difficili da installare e uno di quelli che presentano più spesso delle incompatibilità. La maggior parte di questi gadget utilizzano la libreria JQuery che è il top per la realizzazione di queste personalizzazioni. Ricordo che ho postato anche slideshow con link agli ultimi post con Nivo Slider, slideshow degli ultimi articoli con Easy Slider e slideshow orizzontali delle miniature anche in versione minimalista.

Vado a presentare un widget che ha una gran facilità di installazione visto che non si modifica il template ma ha i soliti problemi con Internet Explorer in cui si visualizza senza arrotondamenti e altre finezze grafiche. Se ne può vedere una dimostrazione sul web

 
L'aspetto del gadget è il seguente

slideshow-nivo-slider

con i bottoni di navigazione in basso e le frecce per spostarsi tra le varie immagini. Il Titolo e la Descrizione degli articoli collegati a ciascuna foto possono essere visualizzati in basso su una barra opaca. Si possono inserire un numero vario di immagini. L'unica limitazione è che non si superi la larghezza del layout delle foto. Quando si passa con il cursore sopra a una immagine cessa immediatamente la riproduzione dello slideshow. Gli effetti inseriti sono ben 16, si visualizzano in modo casuale e provengono dallo script Nivo Slider. Per la installazione del widget si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla il seguente codice

<style type="text/css">
/* <![CDATA[ */
    #NivoContenitore           {position: relative;display: block;}
    #NivoSlideshow               {position:relative;width:512px  !important;height:225px  !important;min-height:200px  !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWoLzu3hw-IuRdhcZgQotk3dT8aVaDHJeum99Lt6Bz7Xou__mUZ2bk6k5IR_5jDn0IRn_Qje3FMLnJkI0ChU-bJUwT3i7a0eF9MwKR1ToH3aYmk3sjP41lfeyczQQprj06_ox2ANAUPxZj/s32/loading9.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);box-shadow: 0px 2px 4px rgba(0,0,0,0.5);}
    #NivoSlideshow img           {position:absolute;top:0;left:0;display:none}
    .nivoSlider                  {position:relative;width:100%;height:auto;}
    .nivoSlider img              {position:absolute;top:0;left:0}
    .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
    .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:96;display:none}
    .nivo-slice                  {display:block;position:absolute;z-index:95;height:100%;top:0}
    .nivo-box                    {display:block;position:absolute;z-index:95;overflow:hidden}
    .nivo-box img                {display:block}
    .nivo-caption                {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000000;color:#ffffff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:98;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .nivo-caption p              {padding:5px;margin:0}
    .nivo-caption a              {display:inline!important}
    .nivo-html-caption           {display:none}
    .nivo-directionNav a         {position:absolute;top:52%;z-index:99;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjagrDE9_MtITsdnp4Wq55aYEr_9BPaJssu9gQHUnlixBvYoTQ_tlYSpli7SqXOGGySdjLtKfOFowHarLKdYG4OI_BdDWtLlwfU9ulhrnJpOyQBGcLw1p3Z26Wbu03pshtFWVonJr52ejo7/s60/navigazione.png") no-repeat;text-indent:-9999px;border:0}
    .nivo-prevNav                {left:10px}
    .nivo-nextNav                {background-position:-30px 0!important;right:10px}
    .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
    .nivo-controlNav a           {position:relative;z-index:99;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLkzooB0E1_IV3eQ94xSM_IdQpXCawHhC0v0VjIBSntBJMET-SEjfOPXa0CyUVcHzFgKSDKqLbx_BP8owXzn5qDUEKvYwUWr3en90LnPPAdNDzu81rIN3Uxw89p3pB_LKKOycL4JYEepK/s40/bottoni.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
    .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//sites.google.com/site/scriptperilblog/javascript-2/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#NivoSlideshow').nivoSlider({
        effect           : 'random',
        slices           : 10,
        boxCols          : 8,
        boxRows          : 4,
        animSpeed        : 1200,
        pauseTime        : 3500,
        startSlide       : 0,
        directionNav     : true,
        directionNavHide : true,
        controlNav       : true,
        keyboardNav      : true,
        pauseOnHover     : true,
        captionOpacity   : 0.8    });
});
/* ]]> */
</script>
<div id="NivoContenitore">
    <div id="NivoSlideshow">
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0w7KiFf6OiXxaG50xzgZPyk7AoPTa6M8ILxy5EWeeG2TU1UIkx8y7gcGgNnte7P8T99bb3sOobmYYVG7N-xP2t8N-wKqjjMHuW3HNhqjoPiucH4jZwK7Wo5aD3uEAhPcLHwZxC5DuH14/s600/natura1.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 1"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzDgj5c0VOfEqzZrDmL_hXLOagcyLesSjqOrOl1hjHFLmPST-RkGAoWabcmS7dHy04H3RVfOLwgGDyrzMyiH4zEGMK6LLpbCbghcnIAW5TCVg2gM8hrCiFg0LxfD2pkE4Dt6Z1LZbk99hY/s600/natura2.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 2"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXdmvQxjn7li2fm3AZWMLEcgP2D_SZrNOWqz-y94lIEsC-CVy1KVgC3vFqTF855p8fqeo5LLih8XZ_CApWF357VDQwfp-IL-jp851TDpMdEgXyANB0TvgaWw4OpraWd0tHeGBBua7edIqL/s600/natura3.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 3"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ONuwgZFtgiVcQHezdJuU_TWPm1lOkiFtd63lkne0dhmXVcOZ0SSFGno3lIvtBoMyme0XiBElSWaGgfpw79L1nEA1c5nPMciwifwK-5l6Wfhk82zxlUCpKMJLUIxWfVNL2suxpiImUsHa/s600/natura4.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 4"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgeixApmKAsb_qLKvpQMfdEZkspoCWU9AKbrl1KdfBlx67jD9JoI_Z_-E-AJ8XwwJOLIDOjt-f5MRlRUQ5Cubr4yeTmORh5jmFCyQxxeop4tA1KbitzxdNNORdaTB4ur92KNisHXl5Xyi/s600/natura5.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 5"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisNsNSsC235vGovAOEEPMBR_UeCnyxv7Q_RpekwTkpCYX_8FeruOTjaxSjbrCqvNAh-OJxX_tl_dexNUFp-0RgQoeMosFnbbVbMhR0LrlA23BH8Qr4NXqaStyInZp_E4k1EaxX2q0a0FBc/s600/natura6.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 6"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASEohuhdJb_4OvY8TIB-_KsGhf_c3dNJujE4mvTBAi8EOo2UyTf1kBsVTyNfLUGCEtMxevHIxZd39WjEVSStta2J12_AeCNf25-jxrBKNS5-GOwC9e2ysHeWiPWkk-duzo9KcJsE49TkZ/s600/natura7.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 7"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyX_rZ8t5jwVhYtttWifSzpZgbVO5SEDD-LBi_pNn082goTVbiKhxXalgXo9hbraafKmtftgxFTkwvrHv3Q2MEN6GE2AfkgSbYuUZWuwpjAZeU7s40GYmJjVET_0gkERhwTPNCuTKszhV/s600/natura8.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 8"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh6UxTLZeDX_W0ULYUp1Xfn_igqq4RJMrOZfF0cl5tNP2JopzzcDAnS4gxrOL46HEcjAio1Hj7dNUYYeigmAaKwszkAd17iG3wORUrsKz4-gmgbU37Dly08IrRqzHTS9iFUYj7tqijP9dE/s600/natura9.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 9"/></a>
        <a href="URL DEL LINK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0hpYinXX5ItpFPX9vCyAZFc5ZDwkK_0kW5UpJaqbDXa70TccAOC_Ko51nezHXg6H0TF7oSbIArCtPihml9FyuyjycEiQAg64f8KOLIHqEVdOdqSPr_ImxQQw2eVHXxgC64_UZQeXd32i/s600/natura10.jpg" title="Inserisci il Titolo e la Descrizione del post" alt="tag foto 10"/></a>       
    </div>
</div>

dove possono essere personalizzati tra gli altri i parametri colorati. I più importanti sono:
  1. Le dimensioni dello slideshow. Quelle di default sono 512 di altezza e 225 di larghezza
  2. Il colore dello sfondo e  del testo della descrizione rispettivamente #000000 e #FFFFFF. I meno esperti possono consultare il post sui codici dei colori.
  3. I parametri dello script per impostare velocità, durata della pausa e opacità della descrizione
  4. Gli URL delle immagini da inserire insieme al Link del post collegato, al Titolo e alla Descrizione e al Tag Alt per questioni di SEO.
Si salva e si posiziona il widget con il mouse

Osservazioni conclusive: Se nel nostro template ci fosse già JQuery allora si può fare a meno di postare la riga evidenziata di giallo. Se invece possediamo un blog con dominio personalizzato allora dovrà essere scaricato il javascript evidenziato di verde incollandone l'indirizzo nel browser e cliccando su Invio. Successivamente tale file dovrà essere caricato nella cartella Public di Dropbox, se ne dovrà acquisire il Link Diretto che dovrà essere incollato nel codice al posto dell'URL  evidenziato di verde.

Aggiornamento: A seguito di un malfunzionamento dovuto alle nuove regole di Google Drive e Google Sites ho pubblicato il codice di questo slideshow in una nuova forma.


74 commenti :

  1. Molto bello! Anzichè inserire manualmente ogni immagine, c'è modo di collegarlo a post casuali, o, in alternativa, agli ultimi post del blog?

    RispondiElimina
    Risposte
    1. @ dona
      Nivo Sliser con gli Ultimi post del blog è qui
      http://www.ideepercomputeredinternet.com/2012/04/slideshow-degli-ultimi-post-con.html

      Elimina
  2. Mooolto carino, semplice ma al tempo stesso d'effetto. Però non mi sento ancora di rinunciare al mio... Mi ci sono affezionata, credo ;)

    RispondiElimina
  3. Molto bello! Ho provato proprio oggi ad inserirlo sul mio blog di Blogger e non mi ha dato nessun problema..funzionava tutto perfettamente! Fino a quanto non ho provato a fare un post e non mi caricava le foto! Dov'è che ho sbagliato? E' incompatibile questo tipo di slideshow nel mio caso?

    Babi

    RispondiElimina
    Risposte
    1. Non credo che il problema che hai lamentato abbia qualcosa a che vedere con questo widget. Prova a caricare le foto cambiando browser. Ho letto nel Forum di Blogger che anche altri utenti hanno trovato delle difficoltà in quel senso.

      Elimina
  4. Grazie per la risposta, comunque ho risolto proprio adesso!
    Avevo aggiunto questo slideshow e nello stesso tempo avevo anche inserito i bottoni animati che si spostano leggermente con il link a vari social network. In effetti è lì il problema. Ho provato prima a levarli entrambi e poi uno alla volta, e sono proprio i bottoni che mi impediscono di caricare le immagini nei nuovi post.
    Per ora ho lasciato i bottini inanimati, perchè non so qual è il problema visto che funzionavano perfettamente. :(
    Eventualmente c'è qualcosa che posso fare o mi devo rassegnare ad avere dei bottoni statici?

    Ti lascio il link del mio blog così forse capisci meglio il tipo di template che ho (è uno di quelli semplicissimi, ma io l'ho modificato tutto).

    Babi
    www.voguebuster.net

    RispondiElimina
    Risposte
    1. Non son che bottoni siano ma se usano JQuery è probabile che portino a delle incompatibilità. Eventualmente aggiorna JQuery
      http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html

      Elimina
    2. No non usano JQuery, comunque ho sistemato tutto. :) Ho modificato alcune cose e per adesso sembra funzionare. E' da più di due ore che l'ho aggiornato e funziona tutto, anche le immagini dei nuovi post vengono caricate senza nessun problema! Incrocio le dita! Grazie!

      Babi

      Elimina
  5. Stupendo questo slide! Già inserito :D Una domanda, qual è il valore per ingrandire il testo delle descrizioni?

    RispondiElimina
    Risposte
    1. E' questo CSS
      .nivo-caption {padding:10px;font-family:Helvetica,Arial,sans-serif;....
      Puoi provare a aggiungere
      font-size:16px;

      Elimina
  6. Perfetto!! Sono riuscito a togliere le frecce e i bottoni e funziona bene. Vorrei sapere se c'è la possibilità di linkare anche i titoli e non solo le foto. Ho messo la transizione "fade" e quasi sempre prende, anche se impostata l'url dell'immagine precedente. Se fossero linkabili anche i titoli si ovvierebbe il problema. Grazie Ernesto (un mito)

    RispondiElimina
    Risposte
    1. @ La vedo complessa perché bisognerebbe modificare il javascript
      //sites.google.com/site/scriptperilblog/javascript-2/jquery.nivo.slider.pack.j

      Elimina
  7. ciao grazie per questo codice molto bello! mi chiedevo se fosse possibile avere lo stesso effetto ma con piu di un immagine che scorre, mi sarebbe molto utile

    RispondiElimina
    Risposte
    1. @ Haru chan
      Nivo Slider è un plugin molto conosciuto. Non escludo che in rete ci possano essere delle realizzazioni come quelle che ti interessano

      Elimina
    2. Ciao, prima di tutto...Grazie Ernesto!!!...poi Haru, anche a me piacerebbe quell' effetto di immagini che scorrono. Ho anche trovato in un blog la slide inserita con quel tipo di transizione tra le foto ma su http://dev7studios.com non ho trovato nulla...

      Elimina
  8. Ciao :) Favoloso questo slide e grazie mille del codice, ma ti vorrei chiedere una cosa, se si può fare, allora ti illustro:
    sto lavorando sul blog di prova che a due colonne, una parte per i post e l'altra con i widget, fino a qui ok, questo slide l'ho messo tra l'intestazione e il post, nello spazio proprio sopra al post, io questo slide vorrei bloccarlo solo per la home page, e nelle altre pagine vorrei che non si visualizzasse, si può fare? attendo le tue preziose informazioni ;) sei bravissimo.

    RispondiElimina
    Risposte
    1. @ E' una cosa che si può fare facilmente. basta utilizzare i tag condizionali per imporre che il widget sia visibile solo nella homepage
      http://www.ideepercomputeredinternet.com/2012/06/i-tag-condizionali-e-i-domini.html
      http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

      Elimina
    2. Grazie Mille Fattoooooooo ;) ;) ;) Favoloso :), scusa ma ti vorrei chiedere un'altra cosa ;) lo slide funziona perfettamente, ma se voglio aumentare il font del titolo e poi anche della descrizione e anche il riquadro dove son contenuti, quale codice devo inserire e dove? grazie mille di tutto ;)

      Elimina
    3. @ Principino
      Leggi il punto 13) di questo articolo
      http://www.ideepercomputeredinternet.com/2013/02/blog-etiquette.html

      Elimina
  9. Ciao Ernesto, prima di tutto grazie per questo Blog che si è rivelato essere una "mano santa". Ti volevo chiedere (giusto per estetica dato che comunque lo slide funziona perfettamente), è possibile impostare un unico effetto di transizione tra le varie foto invece di vari effetti di transizione casuali? Grazie mille!

    RispondiElimina
    Risposte
    1. @# Al posto di random in effect: 'random', puoi inserire il nome dell'effetto che più ti piace tra quelli della libreria Nivo Slider scegliendo per esempio tra fold, fade, sliceDown, ecc. Guardati la documentazione
      http://dev7studios.com/nivo-slider/#/documentation

      Elimina
    2. Ho un altro problemino. Avendo il dominio personalizzato ho seguito tutti i passaggi (credo bene) riguardanti il caricamento del javascript in dropbox e la slide funziona ma solo se apro il sito dal mio pc. Forse ho saltato qualche passaggio? Grazie mille Ernesto comunque! Hai la pazienza di Giobbe

      Elimina
    3. @# Significa che forse non hai caricato il file sulla cartella Public oppure non hai messo le immagini in un album pubblico

      Elimina
    4. Ho risolto, ti ringrazio. Avevo eseguito bene tutti i passaggi ma da ottobre 2012 (almeno così ho letto) la cartella "Public" non ha più un' attivazione automatica (bisogna attivarla attraverso una procedura guidata). Una volta attivata la cartella tutto è filato liscio., Grazie !

      Elimina
    5. OK, credo, a questo punto che a Nevo sono antipatica proprio io!!! La slide funzionava perfettamente; ma da un poco ha un difetto tra la transizione delle slide. Le immagini che carico (tramite un link ottenuto per hosting o per pubblicazione nella cartella pubblica di dropbox) creano un antiestetico "saltello" durante la transizione. http://www.simonafuccillo.com/ Altri hanno questo problema?

      Elimina
    6. @# Prova a modificare l'effetto
      effect : 'random',
      con un altro preso da qui
      http://nivo.dev7studios.com/

      Elimina
    7. SI, provato, le ho provate proprio tutte, ma nulla da fare quando carico l' immagine mi da questo problema. Ma dato che questo è tutto un mondo "magico e misterioso" (per me) magari domani così come ha smesso ricomincia a funzionare......ma non so comunque scavo un poco in cerca del problema. Grazie, disponibile come sempre. Ho scoperto, poi, che è un problema che mi da solo con chrome....Sai che ti dico. La slide con chrome la volevo proprio così.....saltellante mi va benissimo ;)

      Elimina
  10. Ciao Ernesto. L'effetto è proprio bello . Non sono sicuro di aver capito come personalizzarlo con le mie foto : Se le carico in Flickr , poi devo mettere il link al posto di "tag foto 1" e cosi' via . Corretto ? Grazie per gli aiuti. Ciao

    RispondiElimina
    Risposte
    1. @# No. Devi mettere il link al posto degli URL già presenti del tipo
      https://lh3.googleusercontent.com/-pm_bvPHgI48/UPu_FzOIEII/AAAAAAAAfCQ/ukyqUNbzXyY/s600/natura1.jpg
      in alt="tag foto 1" devi mettere un testo che denoti la foto, esempio
      alt="alba-spiaggia-rimini"

      Elimina
  11. Ciao Ernesto! Innanzi tutto grazie: sei un pozzo di sapienza :-)
    Io ho un piccolo problema...devo allineare a sinistra la slide (non è allineata al margine sx del blog).

    Ho provato a modificare tutti i css ma nulla! Nulla di nulla!
    Rientra verso dx!
    Riesci ad aiutarmi???
    Grazie mille!

    RispondiElimina
    Risposte
    1. Il rientro forse dipende dal tuo modello. I margini sono tutti collegati. Se se ne modifica uno lo si deve fare anche con gli altri. Se proprio vuoi provare dove c'è una cosa simile
      position:absolute;top:0;left:0
      prova a mettere dei valori negativi in questo modo
      position:absolute;top:0;left:-20
      Però poi dovresti ricalibrare il tutto
      @#

      Elimina
  12. E' davvero carino ma per qualche strano motivo nel mio blog non funziona ç_ç

    RispondiElimina
  13. Ottimo articolo molto ben spiegato. Sembrerebbe però che lo slideshow non sia applicabile a un dominio blogger personalizzato. Puoi darmi conferma od eventualmente indicarmi il rimedio?

    RispondiElimina
    Risposte
    1. Sì è così. È già tutto spiegato nelle Osservazioni conclusive
      @#

      Elimina
    2. Super! Proverò la tua soluzione (mea culpa per non aver letto attentamente il tuo post fino alla fine).
      Grazie per la pazienza e per l'aiuto.

      Elimina
    3. Questo commento è stato eliminato dall'autore.

      Elimina
  14. Ottimo, proverò ad inserirlo...non vado tanto daccordo con i codici html, speriamo di riuscirci. Se riscontro problemi magari vi disturbo per un consiglio. Complimenti per il sito e grazie per il vostro lavoro.
    A presto.
    Annarita

    RispondiElimina
    Risposte
    1. Ci sono riuscita evviva e in meno tempo di quanto previsto, già è attivo e funziona una meraviglia! Grazie grazie!!

      Elimina
  15. Ciao Ernesto,

    grazie per questo post prezioso!
    Mi ha permesso di ripristinare il funzionamento di uno slideshow che su blogspot funzionava perfettamente, ma che con l'acquisto del dominio personalizzato aveva smesso di funzionare e mi stava facendo impazzire!

    E' però emerso un difetto, che su blogspot non c'era: nel momento della transizione, in fondo alle foto compare una brutta striscia nera e sono spariti i puntini che servivano a scegliere le foto (ma quello è il meno, l'importante è togliere la riga nera!). Il codice non è cambiato nel passaggio da blogspot al dominio personalizzato (a parte ovviamente i due link che ho inserito seguendo le tue indicazioni), e il sito è www.alessandrarepossi.com

    Puoi aiutarmi?
    Grazie e a presto!
    Francesca

    RispondiElimina
    Risposte
    1. Prova a agire sull'altezza del widget aumentandola
      height:225px !important;min-height:200px
      @#

      Elimina
    2. L'avevo già aumentata, perché ho inserito foto più grandi di quelle del tuo esempio:
      {position:relative;width:550px !important;height:410px !important;min-height:200px

      Potrebbero entrarci qualcosa i comandi nivo-controlNav?
      Grazie

      Elimina
    3. Il problema è quello. Inserisci il codice con le dimensioni originali e poi prova a inserire le modifiche delle dimensioni testandone di volta il volta l'aspetto. Questa è la procedura.
      @#

      Elimina
    4. Ciao Ernesto,

      alla fine sono andata per tentativi e ho risolto cambiando il valore di captionOpacity e mettendolo uguale a zero.

      Grazie e a presto!
      Francesca

      Elimina
  16. Ciao Ernesto. Sono riuscita a caricare lo slide show in un blog di prova ed è tutto perfetto. Poi ho copiato il tutto sul mio blog ufficiale e mi appare il rettangolo vuoto che continua a caricare senza mai far vedere le immagini. Siccome ho un dominio personalizzato (cookingclassesintuscany.net) sono andata ad inserire il testo evidenziato in verde nel browser, ma quando clicco invio mi dice che il "file" non è stato trovato e di controllare che non sia stato cambiato l'indirizzo. Puoi verificare per favore che sia tutto a posto? Se mi puoi dare qualche suggerimento per far funzionare il tutto te ne sarò grata.

    RispondiElimina
    Risposte
    1. Incolla questo URL nel browser
      https://sites.google.com/site/scriptperilblog/javascript-2/jquery.nivo.slider.pack.js
      Scarica il file e caricalo su Google Drive
      http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html
      quindi il link diretto sostituiscilo a quello evidenziato di verde
      @#

      Elimina
    2. @Ernesto, ho fatto tutto. Ho controllato anche che il link diretto funzionasse. Purtroppo però la situazione è la solita: carica a vuoto e non da' le immagini. Non so cosa posso fare... Se vuoi ti mando il codice completo.
      Grazie mille

      Elimina
    3. Forse non hai abilitato i feed completi. Vai su Impostazioni > Alltro > Feed sito > Consenti feed completo. Non so dirti se hai fatto qualche altro errore
      @#

      Elimina
    4. Ho fatto tutto quello che c'era da fare. Non penso di poter trovare una soluzione, a questo punto, dopo numerosi e svariati tentativi. Volevo però informarti (tante volte potesse aiutarti a capire il problema) che, sul mio sito con dominio, non gira neanche il "tuo" di codice con lo slideshow. Mentre funziona tranquillamente in tutti gli altri miei blog. ???
      A questo punto ti chiedo se conosci qualche altro widget che possa assomigliare a questo o qualche altra strada da percorrere per avere lo slideshow di alcuni post nella home, sotto l'intestazione.
      Grazie ancora...incrocio le dita

      Elimina
    5. Di slideshow ce ne sono tanti come per esempio questo
      http://www.ideepercomputeredinternet.com/2014/07/slideshow-blogger-easyslider.html
      @#

      Elimina
  17. Ciao ernesto, sei proprio un grande. volevo aprire un blog, così ci sto provando. ho cercato di inserire il tuo codice per lo slideshow e ho problema abbastanza singolare... nel mio pc le immagini si vedono, in tutti gli altri no. Sapresti darmi qualche consiglio?

    il blog è questo: http://bigbanglumiere.blogspot.it/

    RispondiElimina
    Risposte
    1. Nel tuo blog non c'è nessun slideshow e neppure un post a dir la verità. Se lo slideshow è un content slideshow vale a dire se fa vedere gli ultimi post ovviamente non si può vedere nulla. Ti consiglio di iniziare a pubblicare e solo dopo almeno una ventina di post di pensare alle personalizzazioni più complicate
      @#

      Elimina
  18. Ciao Ernesto scusa come faccio a mettere le mie foto a posto delle tue?

    RispondiElimina
    Risposte
    1. Devi pubblicare le tue foto su Picasa e poi ottenerne il link diretto
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      quindi lo sostituisci a quello delle mie foto cioè agli URL del tipo
      https://lh3.googleusercontent.com/-pm_bvPHgI48/UPu_FzOIEII/AAAAAAAAfCQ/ukyqUNbzXyY/s600/natura1.jpg
      @#

      Elimina
  19. Ciao Ernesto, complimenti per questo widget eccezionale. C'è un modo per far adattare in automatico le immagini alle dimensioni dello slideshow? Nonostante siano tutte delle medesime dimensioni, infatti, nella riproduzione non si adattano al box. Grazie mille

    RispondiElimina
    Risposte
    1. Se sono tutte delle stesse dimensioni cioè 600x300 pixel non ci dovrebbero essere problemi. Non so come mai tu abbia queste difficoltà. Se sono solo in alcune immagini prova a controllare che siano della misura giusta
      @#

      Elimina
  20. Fino a ieri che il mio sito si appoggiava a blogger questo slideshow funzionava...oggi che ho acquistato il dominio non funziona più. Mi sono attenuto alla tua guida, ho scaricato e ricaricato la "riga verde" da te indicata su Dropbox e ho anche sostituito il link ma niente da fare. Esiste una soluzione?

    RispondiElimina
    Risposte
    1. Se non funziona significa che lo hai caricato male senza avere il link diretto preciso. Tra le due " ... " virgolette incollaci questo URL
      https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/jquery.nivo.slider.pack.js
      e vedrai che funzionerà fino al 31 Agosto 2016. Per allora devi aver imparato a ottenere il link diretto da Dropbox. Seguimi nei prossimi giorni e magari ci farò un post su quel tema
      @#

      Elimina
    2. Ti ringrazio. Non ho mai usato Dropbox; ho ricaricato il file e ho copiato il link ma niente da fare. Con il link da Lei allegato adesso funziona, finalmente. E' un'intera giornata che provo e riprovo. Sarebbe utile un articolo su diversi screenshot di foto e titoli da inserire sul proprio sito, magari in codice javascript. Ancora grazie e buona serata

      Elimina
  21. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  22. Ciao Ernesto! Una domanda, spero non stupida. Attraverso questo slideshow volevo far scorrere una serie di copertine di libri, dunque avrei bisogno che le immagini si "adattino" alla dimensione del box (che cambierò rendendolo un rettangolo verticale) in modo da far vedere interamente la copertina. Ho già uno slideshow abbastanza artigianale sul mio blog in cui la cosa avviene in automatico. Che parametro posso utilizzare per avere questo effetto anche col tuo? (Sempre se è possibile farlo). Grazie mille!

    RispondiElimina
    Risposte
    1. Attualmente le dimensioni impostate sono
      width:512px !important;height:225px
      vale a dire 512x225 pixel. Devi quindi modificare questi due valori. Non ti so dire così su due piedi se sarà sufficiente ma ritengo di sì. Forse non entreranno tutti i puntini di navigazione presenti sotto le immagini ma puoi diminuirne il numero se fosse necessario
      @#

      Elimina
  23. Salve sig. Ernesto. Questo slideshow non funziona più...come si fa?! potrebbe indirizzarci a qualcosa di simile, magari creando un post dettagliato?

    RispondiElimina
    Risposte
    1. Funziona sempre
      http://nuovo-blog-di-prova.blogspot.it/2013/01/slideshow-con-link-ai-post-e-effetti.html
      Gli slideshow sono sempre più rari visto il ritiro di Google Drive come hosting. Prova con questo
      http://www.ideepercomputeredinternet.com/2013/09/last-posts-slideshow.html
      che è piuttosto carino
      @#

      Elimina
    2. premetto che ho un dominio personalizzato. E' da una settimana circa che non funziona più nonostante abbia aggiornato molte volte.

      Elimina
    3. Se hai un dominio personalizzato non ti doveva funzionare mai. Nei domini personalizzati non funzionano i javascript caricati su Google Sites. Dovresti incollare questo indirizzo nel browser
      //sites.google.com/site/scriptperilblog/javascript-2/jquery.nivo.slider.pack.js
      quindi pigiare su Invio per scaricarlo. Al posto della riga del file dovresti incollare il contenuto come mostrato in questo articolo
      http://www.ideepercomputeredinternet.com/2016/09/come-ripristinare-i-widget-di-blogger.html

      @#

      Elimina
  24. Sig. Ernesto io non riesco più a farlo funzionare sto widget, essenziale poichè il mio sito è un sito di notizie...mi piaceva l'idea di evidenziare le notizie dell'"ultima ora". Mi dispiace contraddirla ma nel mio sito con dominio personalizzato fino a qualche giorno fa funzionava perfettamente. Potrebbe aiutarmi?

    RispondiElimina
    Risposte
    1. Leggi questo post
      http://www.ideepercomputeredinternet.com/2016/10/blogger-slideshow.html
      @#

      Elimina

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