Problema slideshow

25-07-2013, 12.57.29

Ho inserito qui una slideshow che dovrebbe avere dei 'pallini' sotto per scorrere tra le varie pagine, però non si vedono.
Ecco il codice che ho usato

Codice HTML:

<html>
<head>
<title>Altutto</title>
<style type="text/css">
#slideshow {width: 580px; padding: 10px; margin: 10px auto; text-align: center} #slideshow input {display: none}
#mask {width: 100%; overflow:hidden}
#slides {background: #f7f7f7; padding: 10px; border: 2px solid #ededed; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .9), 0 0 10px 0px rgba(0, 0, 0, .1)}

.slide_content {position: relative; width: 900%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}

#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}
#pan5:checked ~ #slides .slide_content {margin-left: -400%}
#pan6:checked ~ #slides .slide_content {margin-left: -500%}
#pan7:checked ~ #slides .slide_content {margin-left: -600%}
#pan8:checked ~ #slides .slide_content {margin-left: -700%}

.pannello {width: 11.11111111111111%; float: left; font-family: arial; font-size: 12px; color: #646464; text-shadow: 0 1px 1px rgba(255, 255, 255, .7)}

#active {margin-top: 5px}
#active label {display: inline-block; width: 21px; height: 21px; border-radius: 1em; background: #f7f7f7; border: 2px solid #ededed; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1); margin: 5px; cursor: pointer}
#active label:hover {background: #fff}

#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4),
#pan5:checked ~ #active label:nth-child(5),
#pan6:checked ~ #active label:nth-child(6),
#pan7:checked ~ #active label:nth-child(7),
#pan8:checked ~ #active label:nth-child(8) {background: #d2e9f1; box-shadow: inset 0 0 0 2px #f7f7f7, 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1)}
</style>
</head>
<body bgcolor="lightblue">


<div id="slideshow">

<!-- Radio -->
<input checked="checked" type="radio" name="pan" id="pan1"> 
<input type="radio" name="pan" id="pan2"> 
<input type="radio" name="pan" id="pan3"> 
<input type="radio" name="pan" id="pan4"> 
<input type="radio" name="pan" id="pan5">
<input type="radio" name="pan" id="pan6">
<input type="radio" name="pan" id="pan7">
<input type="radio" name="pan" id="pan8">
<div id="slides">
<div id="mask">
<div class="slide_content">

<div class="pannello" id="p1"> <!-- Pannello 1 -->
<div style="font-weight: bold; font-size: 20px; text-align: left">Benvenuto!</div><div style="text-align: justify; padding: 0 10px">Benvenuto su altutto.altervista.org! Scorri per vedere le funzioni che ti offriamo.<br>
<a href="http://www.net-parade.it/#award;t=9;sito=altutto.altervista.org" title="sito internet"><img alt="sito internet" src="http://tools.net-parade.it/images/09_award_sito_di_qualita.png" border="0" /></a>
<a href="http://www.net-parade.it/attestato_riconoscimento.aspx?sito=altutto.altervista.org&amp;t=1"><img alt="In classifica" src="http://tools.net-parade.it/images/01_award_sito_in_classifica.png" border="0"></a>
<br><hr><br>
<a href="http://www.net-parade.it/risorse/registrazione_motori"><img alt="motori di ricerca" src="http://tools.net-parade.it/images/bottone.gif" style="border:0px"></a>
<span id="eXTReMe"><a href="http://extremetracking.com/open?login=altutto">
<img src="http://t1.extreme-dm.com/i.gif" style="border: 0;"
height="38" width="41" id="EXim" alt="eXTReMe Tracker" /></a>
<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script><script type="text/javascript"><!--
var EXlogin='altutto' // Login
var EXvsrv='s9' // VServer
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;EXsrc="src";
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
EXref?EXref=EXref:EXref=EXd.referrer;
EXd.write("<img "+EXsrc+"=http://e0.extreme-dm.com",
"/"+EXvsrv+".g?login="+EXlogin+"&amp;",
"jv="+EXjv+"&amp;j=y&amp;srw="+EXw+"&amp;srb="+EXb+"&amp;",
"l="+escape(EXref)+" height=1 width=1>");//-->
</script><noscript><span id="neXTReMe"><img height="1" width="1" alt=""
src="http://e0.extreme-dm.com/s9.g?login=altutto&amp;j=n&amp;jv=n" />
</span></noscript></span></div>
</div>

<div class="pannello" id="p2"> <!-- Pannello 2 -->
<div style="font-weight: bold; font-size: 20px; text-align: left">Forum</div><div style="text-align: justify; padding: 0 10px">Accedi subito al forum che parla di tutto per scrivere tutto ciò che ti passa per la testa e vedere i post degli altri utenti. <br>Con il forum potrai discutere, inviare domande, rispondere a quelle degli altri utenti o scrivere guide su qualunque argomento. Potrai inoltre usufruire del social network integrato. <a href="f">Clicca qui per entrare.</a></div>
</div>

<div class="pannello" id="p3"> <!-- Pannello 3 -->
<div style="font-weight: bold; font-size: 20px; text-align: left">Galleria di foto comiche</div><div style="text-align: justify; padding: 0 10px">Vedi subito divertentissime foto comiche che porteranno un raggio di luce anche nelle giornate più buie! <a href="m/comici">Clicca qui per entrare.</a></div>
</div>

<div class="pannello" id="p4"> <!-- Pannello 4 -->
<div style="font-weight: bold; font-size: 20px; text-align: left">Galleria di perle di saggezza</div><div style="text-align: justify; padding: 0 10px">Entra subito nella raccolta di illuminanti perle di saggezza. <a href="m/perle-di-saggezza">Clicca qui per entrare</a></div>
</div>


<div class="pannello" id="p5"> <!-- Pannello 5 -->
<div style="font-weight: bold; font-size: 20px; text-align: left;">Artists' space</div><div style="text-align: justify; padding: 0px 10px;">Vedi gli ultimi post degli artisti che hanno aderito, scopri in quali eventi incontrarli oppure diventa scrittore anche tu. <a href="a">Clicca qui per entrare.</a></div></div>

<div class="pannello" id="p6"> <!-- Pannello 6 -->
<div style="font-weight: bold; font-size: 20px; text-align: left;">Fluent English</div><div style="text-align: justify; padding: 0px 10px;">Mediante un divertentissimo gioco potrai migliorare notevolmente il tuo inglese divertendoti! <a href="ef">Clicca qui per entrare.</a></div></div>

<div class="pannello" id="p7"> <!-- Pannello 7 -->
<div style="font-weight: bold; font-size: 20px; text-align: left;">La nostra pagina facebook</div><div style="text-align: justify; padding: 0px 10px;">Visita la nostra pagina facebook per essere sempre aggiornato sulle ultime novità del sito! <a href="http://facebook.com/altutto">Clicca qui per entrare.</a></div></div>

<div class="pannello" id="p8"> <!-- Pannello 8 -->
<div style="font-weight: bold; font-size: 20px; text-align: left;">Votaci</div><div style="text-align: justify; padding: 0px 10px;">Votandoci ci aiuterai a crescere. Per votare, clicca su 'Sì, confermo il voto'. Puoi votarci ogni ora. <a href="http://tinyurl.com/votaaltutto>Clicca qui per entrare.</a></div></div></div>
</div>
</div>

<div id="active">
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
<label for="pan5"></label>
<label for="pan6"></label>
<label for="pan7"></label>
<label for="pan8"></label>
</div>


</div><script type="text/javascript">
//SLIDESHOW A SCORRIMENTO AUTOMATICO
//by bored - http://ffmagazine.forumfree.it/?t=65226584
var slideJRadio = document.getElementById("slideshow").querySelectorAll("input[type="radio"]");
var eSlide = 1;
var slideJTime;
function setSlideTime(){
slideJTime = window.setInterval(function(){
if(eSlide === slideJRadio.length){
eSlide = 0;
}
slideJRadio[eSlide].checked = true;
eSlide++;
}, 4000);
}
setSlideTime();
document.getElementById("slideshow").onmouseover = function(){
window.clearInterval(slideJTime);
}
document.getElementById("slideshow").onmouseout = setSlideTime;
for(var i = 0; i < slideJRadio.length; i++){
slideJRadio[i].onclick=function(){
eSlide = this.id.match(/[0-9]+/) - 1;
}
}
</script>
</body>
</html>

Cosa ho sbagliato?

25-07-2013, 13.33.39

Nella pagina che hai linkato non vedo nessuna slideshow.

25-07-2013, 13.49.00

Infatti il problema è questo, ho impostato la slideshow usando il codice che ho trascritto, ma viene visualizzata solo la prima pagina e non ci sono i 'child' (cioè i bottoni per cambiare slide).

25-07-2013, 13.57.49

Facendo un ispezione con chrome, ho notato che lo slideshow è tutto inserito a sinistra ma invisibile, perché non contiene niente, e poi ho notato che manca la libreria JQuery.

25-07-2013, 14.27.55

Non contiene niente? Allora deve essere stato l'editor di file di altervista che ogni tanto fa questi scherzetti.
Pensavo non fosse necessaria, lo è?

25-07-2013, 14.33.37

La libreria jQuery è essenziale, comunque ti consiglio di mettere un bordo provvisorio al div principale dello slideshow, così almeno vedi dove è collocato.

25-07-2013, 14.59.01

ok, grazie :)
Comunque ho trovato un errore, non avevo chiuso un tag...

25-07-2013, 15.50.42

Ho visto il risultato, e devo dire che è molto meglio dell'index precedente.

25-07-2013, 16.06.14

Grazie per il feedback :)

Discussione: Problema slideshow

LinkBack

Strumenti discussione

Display

Problema slideshow

Regole di scrittura