Ciao.
Sto cercando di usare lo script fancybox modificandolo in base alle mie esigenze.
Precisamente vorrei che la gallery delle immagini fosse centrata rispetto alla pagina e ogni singola immagine avesse una stessa distanza, da me stabilita, dalla successiva.
Sai dirmi come posso fare?
Per adesso ho modificato il codice html della pagina in questo modo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<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() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
align:center;
valign:center;
padding: 10%;
width: 100%;
HEIGHT:100%;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
margin-right:20%;
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: white; }
</style>
<style>
<link rel="stylesheet" type="text/css" href="CSS/elenco_orizzontale.css">
</style>
</head>
<body>
<div id="gallery">
<center>
<ul class="lista">
<a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
[img][/img]
</a>
<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
[img]photos/thumb_image2.jpg[/img]
</a>
<a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
[img]photos/thumb_image3.jpg[/img]
</a>
<a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
[img]photos/thumb_image4.jpg[/img]
</a>
[/list]
</center>
</div>
</body>
</html>
Come puoi accorgerti tu stesso il risultato non risponde alle mie esigenze.
Ti ringrazio sempre per la tua collaborazione.
Ciao.
