Ciao a tutti.. vorrei modificare un mio image slider fullscreen in modo tale che cambi le foto della sequenza a seconda della risoluzione dello schermo.. Riusciresti a dirmi dove sbaglio?? Il codice è questo ma sembra che l innerHTML che non prenda la stringa correttamente in quanto non visualizzo niente a browser... Ovviamente la stringa dopo l"else" era quella che avevo inizialmente all interno del div"sequence" e lo slider funzionava correttamente!
Grazie a tutti per l aiuto!
Grazie a tutti per l aiuto!
HTML:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>titolo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="modern-slide-in/css/sequencejs-theme.modern-slide-in.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="modern-slide-in/scripts/jquery.sequence-min.js"></script>
<script src="modern-slide-in/sequencejs-options.modern-slide-in.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var base = screen.width;
var altezza = screen.height;
if (base < 320) {
var new_html = "
<ul class='sequence-canvas'>
<li class='animate-in'>
<img class='model' src='img/vert1.jpg' alt='Model 1' ></img>
</li>
<li>
<img class='model' src='img/vert2.jpg' alt='Model 2' ></img>
</li>
<li>
<img class='model' src='img/vert3.jpg' alt='Model 3 ></img>
</li>
</ul>";
document.getElementById("sequence").innerHTML = new_html;
}
else {
var new_html = "
<ul class='sequence-canvas'>
<li class='animate-in'>
<img class='model' src='img/Silvia_Callegari_my_hand.jpg' alt='Model 1' ></img>
</li>
<li>
<img class='model' src='img/Silvia_Callegari_first_annoyance.jpg' alt='Model 2' ></img>
</li>
<li>
<img class='model' src='img/Silvia_Callegari_madonna_saved_child.jpg' alt='Model 3 ></img>
</li>
</ul>";
document.getElementById("sequence").innerHTML = new_html ;
}
}
</script>
</head>
<body>
<div class="sequence-theme">
<div id="sequence">
</div>
</div>
</body>
</html>
