Salve volevo sapere se qualcuno può dirmi come inserire immagini “dinamiche” che si aprono ingrandendosi al centro della pagina come in questo sito (cliccate sull'immagine del portatile). E' possibile farlo con Jquery visto che Javascript è onestamente abbastanza complicato come linguaggio?
Grazie.
Ciao.
cerca jquery lightbox
Esistono molti script fatti in Jquery per gestire questo tipo di "animazione" chiamati appunto LIGHTBOX il più conosciuto è l'omonimo. Ma personalmente io trovo molto bello questo:
fancybox.net/
-> nella home c'è un esempio di come funziona (user) mentre nel menù sopra troverai la guida su come inserirlo.
Aiuto perché mi piace, mi diverte, e mi allena.
Non sono esperto, offro opportunità non obblighi.
Uso un mio modo di fare le cose, che se risultasse poco gradito basta ignorarlo.
Ok.
Grazie. Ci provo
Ciao.
P.S. Scusa il ritardo nella risposta.
Aiuto perché mi piace, mi diverte, e mi allena.
Non sono esperto, offro opportunità non obblighi.
Uso un mio modo di fare le cose, che se risultasse poco gradito basta ignorarlo.
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.
e' tutto da risolversi con i css,
puoi aprire una nuova discussione nel relativo forum
Permessi di invio
