Login   Register  
Icontem

File: Show_Images.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  >  Change Images  >  Show_Images.html  >  Download  
File: Show_Images.html
Role: Example script
Content type: text/plain
Description: This file is as example to show how the plugin can work
Class: Change Images
Show a series of images that switch automatically
Author: By
Last change: ok
Date: 2012-05-28 08:12
Size: 3,357 bytes
 

Contents

Class file image Download 
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Mostra immagini  </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,img{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); margin:1em;}
.nota{color:#F00;}
.codice{color:green;}
p{margin: 10px;}

#contenitore{ position:relative; margin:50px auto; width:200px; height:201px; overflow: hidden; border:1px solid;  }

#box{ position:relative; margin:0 auto; padding:0; width:200px; height:200px; overflow:hidden;  }
#box img{ width:200px; display:none;  z-index:1; }

#pulsanti{ position:absolute; width:160px; height:30px; padding:3px; text-align:center; border:1px solid #CCC; text-align:center; display:none; 
z-index:2; }

div.pausa{position:relative; margin:0 auto; width:30px; height:30px; background:url(Pausa-30.png) no-repeat; display:none; }

div.primaImg{ position:absolute; top:4px; left:0; width:30px; height:30px; background:url(Prima-30.png) no-repeat; display:none;}
div.primaImg:hover{ background:url(Prima2-30.png);}

div.ultimaImg{ position:absolute; top:4px; right:0; width:30px; height:30px; background:url(Ultima-30.png) no-repeat; display:none;}
div.ultimaImg:hover{background:url(Ultima2-30.png); }

div.avanti{position:absolute; top:4px; right:31px; width:30px; height:30px; background:url(frecciaA-30.png) no-repeat; display:none;}
div.avanti:hover{ background:url(frecciaA2-30.png);}

div.indietro{position:absolute; top:4px; left:31px; width:30px; height:30px; background:url(frecciaI-30.png) no-repeat; display:none; }
div.indietro:hover{ background:url(frecciaI2-30.png);}

</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Flash_Image.js"> </script>
</head>
<script  type="text/javascript">
jQuery(document).ready(function(){

jQuery(function($){
$("#box").Flash("#contenitore","#pulsanti","div.pausa","div.primaImg","div.indietro","div.avanti","div.ultimaImg", 2000);
});

}); // chiude ready 
</script>
<body>

<h1>Visualizzazione immagini in automatico e mediante pulsanti </h1>

<p class="nota">
Il PLUGIN consente la visualizzazione delle immagini in ciclo. Inoltre c'è la possibilità di controllare la visualizzazione tramite dei pulsanti che vengono mostrati quando il mouse è posto sull'immagine. 
</p>
<p class="codice">This Plugin show images in loop. In addition there are control-buttons that appears when the mouse is over the image</p>


<div id="contenitore">

	<div id="box">
		<img src="batuffolo.jpg" />
		<img src="epidermide.jpg" />
		<img src="macchie.jpg" />
		<img src="gocce.jpg" />
	</div><!--box-->

	<div id="pulsanti">
			<div class="pausa"></div> 
			<div class="primaImg"></div> 
			<div class="indietro"></div>
			<div class="avanti"></div>
			<div class="ultimaImg"></div> 
	</div><!-- pulsanti-->

</div><!-- contenitore--> 



<!--
http://localhost/JSclassesMY/Flash_images/Show_Images.html

-->



</body>
</html>