Login   Register  
Icontem

File: SlideImage.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Michele Prigigallo  >  SlideShow  >  SlideImage.html  >  Download  
File: SlideImage.html
Role: Example script
Content type: text/plain
Description: This file is as example to show how the plugin can work
Class: SlideShow
Slide a set of images that scroll automatically
Author: By
Last change:
Date: 2012-05-29 04:02
Size: 4,444 bytes
 

Contents

Class file image Download
<!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>