ciao Michele questa e' la pagina
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PHOTODEPARTMENTS Photography agency </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<meta name="description" content="">
<link REL="shortcut icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="includes/javascript.js"> </script>
<link href="style/format.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]-->
<script src="includes/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//move the image in pixel
var move = 0;
//zoom percentage, 1.2 =120%
var zoom = 1.0;
//On mouse over those thumbnail
$('.item').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
//Move and zoom the image
//$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
//$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>
<style type="text/css">
.item {
width:142px;
height:190px;
display: block;
padding: 0px 0px 15px 0px;
margin-left:10px;
/* required to hide the image after resized */
overflow:hidden;
/* for child absolute position */
position:relative;
/* display div in line */
float:left;
}
.item .caption {
width:142px;
height:190px;
background:#000;
color:#fff;
/* fix it at the bottom */
position:absolute;
left:0;
/* hide it by default */
display:none;
/* opacity setting */
filter:alpha(opacity=80); /* ie */
-moz-opacity:0.8; /* old mozilla browser like netscape */
-khtml-opacity: 0.8; /* for really really old safari */
opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */
}
.item .caption a {
text-decoration:none;
color:#fff;
font-size:16px;
margin-top:40px;
/* add spacing and make the whole row clickable*/
padding:15px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
font-size:10px;
}
img {
border:0;
/* allow javascript moves the img position*/
position:absolute;
}
.clear {
clear:both;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen">
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox();
});
</script>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="content">
<div class="cont">
<div class="item">
<div class="nomef">
[img]fotog_1/00.jpg[/img]
</div>
</div>
<div class="item">
[img]fotog_1/01.jpg[/img]
<div class="caption">
Asniere
</div>
</div>
<div class="item">
[img]fotog_1/02.jpg[/img]
<div class="caption">
Axel
</div>
</div>
<div class="item">
[img]fotog_1/03.jpg[/img]
<div class="caption">
Beatrice
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Chantilly
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Cortona
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Di Rosa
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Didierg
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Dominic
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Gitte dk
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Gitte Dordogne
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Kamilla
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Kira
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Mikala
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Orleans
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Provence
</div>
</div>
<div class="item">
[img]fotog_1/02t.jpg[/img]
<div class="caption">
Trastevere
</div>
</div>
</div>
</div>
<div id="navigation">
<div id="header">[img]img/logo.jpg[/img]
</div>
<div id="lang">
it | en
</div>
<div id="menu1">
<div>home</div>
<div class="accordionButton">fotografi</div>
<div class="accordionContent">
ALAIN POTIGNON
MARIO ROSSI
MARIO ROSSI
MARIO ROSSI
MARIO ROSSI
MARIO ROSSI
MARIO ROSSI
MARIO ROSSI
MARIO ROSSI
</div>
<div>about</div>
<div>news</div>
<div>clienti e pubblicazioni</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Rispondi quotando
