Ho appena letto un commento su come si possa personalizzare l'Effetto Nivo Slider che ha riscosso tanto successo tra i lettori di questo blog. Non sto a illustrare nuovamente la procedura per installare questo slideshow con collegamenti inseriti nelle immagini che puntano a singole pagine del blog. Per i dettagli relativi consultate quindi il precedente articolo che ho dedicato a
L'autore dello script ha pubblicato in rete tutta una serie di istruzioni per rendere ancora più personale lo slideshow. Nel post in cui l'ho presentato non le avevo inserite per brevità di esposizione ma visto che mi è stato chiesto ecco come procedere per ulteriori personalizzazioni. La differenza sostanziale sta solo nell'ultimo codice inserito prima della riga </body>. Possiamo sostituirlo con quest'altro
<!-- Nivo Slider Inizio-->
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', // Specificare effetto
animSpeed:500, // Velocità dello slide
pauseTime:5000, // Tempo di permanenza dello slide
startSlide:3, // Inizio della riproduzione (0 se si vuole iniziare dalla prima immagine)
});
});
</script>
<noscript><a href='http://goo.gl/i3lI5' target='_blank'><span style='font-size: x-small;'>Nivo Slider</span></a></noscript>
<!-- Nivo Slider Fine -->
e quindi salvare il modello. Ho inserito solo quattro parametri ma se ne possono aggiungere anche altri presi dalla documentazione dell'autore
- In effect si può specificare il tipo di effetto scelto tra: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, oxRainReverse, boxRainGrow e boxRainGrowReverse
- Con animspeed si configura la velocità di transizione dello slide
- pauseTime serve per determinare il tempo di permanenza di ogni singola immagine
- startslide indica da che immagine deve iniziare la riproduzione degli slide. Per iniziare dalla prima occorre inserire 0, per cominciare dalla seconda bisogna mettere 1, per la terza 2 e così via.
Ecco una Demo di Nivo Slider con questi parametri.
Ciao Ernesto avrei bisogno di un aiuto da parte tua. Io uso firefox di default, e Nivo slider funziona benissimo. Con gli altri browser però, come chrome o safari, funziona ugualmente, ma è tutto spostato sulla destra. La stessa cosa mi accade con la barra del menù sopra lo slider. Sai come posso risolvere il problema e poter visualizzare allo stesso modo il blog in tutti i browser?
RispondiEliminaTi lascio l'indirizzo del blog: www.molotovcoketail.com
Ti ringrazio in anticipo e aspetto una tua risposta.
@Giampy
RispondiEliminaQuesti problemi di una diversa visualizzazione di widget con i vari browser è molto comune e purtroppo non c'è una soluzione praticabile. Al massimo si può provare a eliminare o spostare qualche altro gadget che potrebbe disturbare. Ma si possono fare solo dei test.
si puo anche personalizzare il font? Perchè nel mio blog è troppo piccolo, parlo ovviamente del font del titolo
RispondiEliminaGrazie
@# E' possibile con un po' di esperienza con i codici. Scarica questo file
Eliminahttps://sites.google.com/site/scriptperilblog/slideshow/style.css
incollandone l'URL nel browser e cliccando su Invio. Apri il file con Notepad++ e cerca questo blocco di codice
body {
font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
color:#2d3536;
Al posto di 14px puoi mettere 16px o 18px
Devi salvare il file, caricarlo su Google Sites o Dropbox, trovarne il link diretto e sostituirlo nel codice del precedente articolo.
Ciao, e per personalizzare invece il font e la dimenzione dello stesso all'interno della descrizione???
RispondiElimina@# Il post a cui fare riferimento è questo
Eliminahttp://www.ideepercomputeredinternet.com/2011/04/slideshow-di-immagini-con-descrizione-e.html
e il codice dei CSS lo puoi visualizzare scaricando questo file
https://sites.google.com/site/scriptperilblog/slideshow/style.css
Dovresti al suo interno modificare il blocco di codice
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
e eventualmente inserire una riga per la dimensione tipo questa
font-size:14px !important;
Ciao, per modificare il colore dei pallini diapositiva quando sono selezionati come si fa?
RispondiEliminaE per cambiare il colore e l'opacità dello sfondo del banner descrizione?
Grazie