<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide show</title>
<style type="text/css">
html,body,div,p,h1,h2,h3,h4,h5,input,textarea,select,span,ul,li,a,table,tr,th,td{margin:0;padding:0;}
body{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size: 76%; text-align:left; /* 1em = 12.166666 px */ }
h1{ font-size:24px; font-weight:bold; color:rgb(50,50,250); margin-left:31px;}
h2{ font-size:18px; font-weight:bold; color:rgb(250,50,150); }
h3{ font-size:14px; font-weight:bold; color:rgb(200,20,20);}
.nota{ color:#F00; }
.codice{color:green;}
p{margin:5px 10px;}
/* *********************************** */
#contenitore{
position:relative; margin:50px auto; width:200px; height:201px; text-align:center; overflow: hidden; border:1px solid;
}
#box{
position:relative; margin:0 auto; padding:0; width:200px; height:201px; overflow:hidden;
}
#box img{
position:absolute; width:200px; top:0; z-index:1;
}
#pulsanti{
position:absolute; width:180px; height:26px; text-align:center; border:1px solid #CCC; text-align:center; display:none; z-index:2;
}
button{
width:25px; height:25px; text-align:center; padding:0; margin:0;
}
div.pausa button{
width:30px; text-align:center;
}
div.pausa{
position:relative; margin:0 auto; width:31px; height:26px; display:none;
}
div.primaImg{
position:absolute; top:1px; left:0; width:25px; height:25px; display:none;
}
div.ultimaImg{
position:absolute; top:1px; right:0; width:25px; height:25px; display:none;
}
div.avanti{
position:absolute; top:1px; right:26px; width:25px; height:25px; display:none;
}
div.indietro{
position:absolute; top:1px; left:26px; width:25px; height:25px; display:none;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scroll_diapositivaAuto.js"> </script>
</head>
<body>
<h1>Slide show </h1>
<p class='nota'>
The plugin let the image slide. In addition there are control-buttons that let the user slide the images. This buttons are shown whit mouseover.
<br />
I used a trick to get this. You need to add two images to the list of the those you want to show, that are the copy of the first and last images. You add to put the copy of last image(fake-last) as the first image of the list and the copy of the first image(fake-first) as the last image of the list (watch 'box' element). <br />
There is a restriction: the images must be the same dimensions. You have to set it in CSS.
</p>
<p class='codice'>
Per ottenere questo effetto ho dovuto usare un trucchetto. Bisogna inserire oltre alle immagini che si vuole visualizzare <b>altre due immagini</b>. La prima (inserita come prima immagine della lista) non è altro che una <b>copia dell'ultima immagine</b> che si vuol visualizzare (in questo caso "gocce.jpg"), mentre l'altra immagine verrà posizionata come ultima della lista e deve essere una <b>copia della prima immagine</b> che si vuol visualizzare (nel nostro caso "batuffolo.jpg"). <br />
Altre condizioni restrittive sono dovute al fatto che le <b>immagini devono essere delle stesse dimensioni</b> così come l'elemento che le contiene (#box). La loro larghezza va impostata nei CSS.
</p>
<script type="text/javascript">
jQuery(document).ready(function(){
// Richiamo plugin
jQuery(function($){
$("#box").Scrollm("#contenitore","#pulsanti","div.pausa","div.primaImg","div.ultimaImg","div.avanti","div.indietro",2500,1000);
});
}); // chiude ready
</script>
<div id="contenitore">
<div id="box">
<img src="gocce.jpg" /> <!-- fake-last -->
<img src="batuffolo.jpg" /> <!-- first image to show -->
<img src="epidermide.jpg" />
<img src="macchie.jpg" />
<img src="gocce.jpg" /> <!-- last image -->
<img src="batuffolo.jpg" /> <!-- fake-first -->
</div><!--box-->
<div id="pulsanti">
<div class="pausa"> <button>II</button></div>
<div class="primaImg"> <button><<</button> </div>
<div class="indietro"> <button><</button> </div>
<div class="avanti"><button>></button></div>
<div class="ultimaImg"><button>>></button></div>
</div><!-- pulsanti-->
</div><!-- contenitore-->
</body>
</html>
|
Download
