Ciao a tutti.
Ho inserito all'interno di una pagina una slideshow in javascript solo che aprendo la pagina con dispositivi piu piccoli come i-pad lo slideshow mi va sopra agli altri oggetti e non si rimpicciolisce insieme alla pagine.
Ad esempio di solito per far adattare le immagini metto questo nel css:
/* image */
#image {
background: url(images/xxxxxx.jpg) no-repeat center top;
text-align: center;
#image h1 {
text-transform: lowercase;
font-size: 2.6em;
font-weight: bold;
font-style: italic;
}
#image h2 {
text-transform: lowercase;
font-size: 1em;
font-style: italic;
}
#image a {
text-decoration: none;
color: #FFFFFF;
}
Solo che in questo caso non saprei come fare perche ci sono tante immagini.
Questo è il javascript che ho all'interno dell html:
<div id="catalogo1">
<script type="text/javascript"><!--
slideshow = Array();
slideshow[0] = "cataloghi/abbigliamentoferrari/001.jpg";
slideshow[1] = "cataloghi/abbigliamentoferrari/002.jpg";
slideshow[2] = "cataloghi/abbigliamentoferrari/003.jpg";
slideshow[3] = "cataloghi/abbigliamentoferrari/004.jpg";
slideshow[4] = "cataloghi/abbigliamentoferrari/005.jpg";
slideshow[5] = "cataloghi/abbigliamentoferrari/006.jpg";
slideshow[6] = "cataloghi/abbigliamentoferrari/007.jpg";
slideshow[7] = "cataloghi/abbigliamentoferrari/008.jpg";
slideshow[8] = "cataloghi/abbigliamentoferrari/009.jpg";
slideshow[9] = "cataloghi/abbigliamentoferrari/010.jpg";
slideshow[10] = "cataloghi/abbigliamentoferrari/011.jpg";
slideshow[11] = "cataloghi/abbigliamentoferrari/012.jpg";
slideshow[12] = "cataloghi/abbigliamentoferrari/013.jpg";
slideshow[13] = "cataloghi/abbigliamentoferrari/014.jpg";
slideshow[14] = "cataloghi/abbigliamentoferrari/015.jpg";
slideshow[15] = "cataloghi/abbigliamentoferrari/016.jpg";
slideshow[16] = "cataloghi/abbigliamentoferrari/017.jpg";
slideshow[17] = "cataloghi/abbigliamentoferrari/018.jpg";
slideshow[18] = "cataloghi/abbigliamentoferrari/019.jpg";
slideshow[19] = "cataloghi/abbigliamentoferrari/020.jpg";
slideshow[20] = "cataloghi/abbigliamentoferrari/021.jpg";
slideshow[21] = "cataloghi/abbigliamentoferrari/022.jpg";
slideshow[22] = "cataloghi/abbigliamentoferrari/023.jpg";
slideshow[23] = "cataloghi/abbigliamentoferrari/024.jpg";
slideshow[24] = "cataloghi/abbigliamentoferrari/025.jpg";
slideshow[25] = "cataloghi/abbigliamentoferrari/026.jpg";
slideshow[26] = "cataloghi/abbigliamentoferrari/027.jpg";
slideshow[27] = "cataloghi/abbigliamentoferrari/028.jpg";
slideshow[28] = "cataloghi/abbigliamentoferrari/029.jpg";
slideshow[29] = "cataloghi/abbigliamentoferrari/030.jpg";
slideshow[30] = "cataloghi/abbigliamentoferrari/031.jpg";
slideshow[31] = "cataloghi/abbigliamentoferrari/032.jpg";
slideshow[32] = "cataloghi/abbigliamentoferrari/033.jpg";
slideshow[33] = "cataloghi/abbigliamentoferrari/034.jpg";
slideshow[34] = "cataloghi/abbigliamentoferrari/035.jpg";
slideshow[35] = "cataloghi/abbigliamentoferrari/036.jpg";
slideshow[36] = "cataloghi/abbigliamentoferrari/037.jpg";
slideshow[37] = "cataloghi/abbigliamentoferrari/038.jpg";
// definisco una variabile che userò come contatore
var i = 0;
// definisco la funzione che gestisce la sequenza delle immagini
function sfoglia()
{
// utilizzo l'operatore ternario per fare una verifica
// ed aggiornare il valore del contatore
i = ((i < (slideshow.length-1)) ? i+1 : 0);
// cambio dinamicamente l'attributo "src" dell'immagine mostrata
document.slideshowImg.src = slideshow[i];
}
document.write('[img]' + slideshow[0] + '[/img]
');
document.write('<input type="button" value="AVANTI" onClick="sfoglia()">');
//--></script> </div>
Grazie.
Rispondi quotando