Ciao a tutti, sono nuovo del forum, sono un web desiger per hobby con molta passione e zero conoscenza di javascript e Jquery.
Ho creato una galleria fotografica con i css da inserire in un sito vorrei che le foto
si aprissero in maniera piu lieve non tipo on off, in rete ho trovato questo codice
$(document).ready(function() {
$("?").click(function(){
if(false == $(this).next().is(':visible')) {
$('?').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
non so come utilizzarlo.
posto anche il codice sito.
Grazie in anticipo
#container {
position:relative;
width:750px;
height:750px;
border:1px solid #4a679f;
margin:0 auto;
}
a.galleria span {
display:block;
position:absolute;
width:1px;
height:1px;
top:112px;
left: 0px;
overflow:hidden;
background:#000;
}
a.galleria, a.galleria:visited {
display:block;
border:3.5px solid #bababa;
width:100px;
height:100px;
float:left;
margin-left:1px;
z-index:100;
}
a.foto_1{
background:url(risorse_fotografiche/gallery/miniature/foto_1.jpg);
}
a.foto_2{
background:url(risorse_fotografiche/gallery/miniature/foto_2.jpg);
}
a.foto_3{
background:url(risorse_fotografiche/gallery/miniature/foto_3.jpg);
}
a.foto_4{
background:url(risorse_fotografiche/gallery/miniature/foto_4.jpg);
}
a.foto_5{
background:url(risorse_fotografiche/gallery/miniature/foto_5.jpg);
}
a.foto_6{
background:url(risorse_fotografiche/gallery/miniature/foto_6.jpg);
}
a.foto_7{
background:url(risorse_fotografiche/gallery/miniature/foto_7.jpg);
}
a.galleria:hover {border:0}
a.galleria:hover img {
border:0;
position:relative;
z-index:100;
}
a.galleria:active img, a.galleria:focus img {
border:0px solid #ddd;
position:relative;
z-index:50;
}
a.galleria:active span, a.galleria:focus span {
display:block;
position:absolute;
width:750px;
height:638px;
top:112px;
left:0px;
z-index:200;
}
</style>
</head>
<body>
<div id="container">
<a class="galleria foto_1" href="#"><span><img title="Tramonto" alt="Tramonto" src="risorse_fotografiche/gallery/miniature/foto_1_g.jpg" /></br>
</span></a>
<a class="galleria foto_2" href="#"><span><img title="Centrale Eolica" alt="Centrale Eolica" src="risorse_fotografiche/gallery/miniature/foto_2_g.jpg" /></br>
</span></a>
<a class="galleria foto_3" href="#"><span><img title="Auto nella notte" alt="Auto nella notte" src="risorse_fotografiche/gallery/miniature/foto_3_g.jpg" /></br>
</span></a>
<a class="galleria foto_4" href="#"><span><img title="Semaforo" alt="Semaforo" src="risorse_fotografiche/gallery/miniature/foto_4_g.jpg" /></br>
</span></a>
<a class="galleria foto_5" href="#"><span><img title="Autostrada" alt="Autostrada" src="risorse_fotografiche/gallery/miniature/foto_5_g.jpg" /></br>
</span></a>
<a class="galleria foto_6" href="#"><span><img title="Pinguini" alt="Pinguini" src="risorse_fotografiche/gallery/miniature/foto_6_g.jpg" /></br>
</span></a>
<a class="galleria foto_7" href="#"><<span><img title="Rana" alt="Rana" src="risorse_fotografiche/gallery/miniature/foto_7_g.jpg" /></br>
</span></a>
</div>
</body>
</html>
Ho creato una galleria fotografica con i css da inserire in un sito vorrei che le foto
si aprissero in maniera piu lieve non tipo on off, in rete ho trovato questo codice
$(document).ready(function() {
$("?").click(function(){
if(false == $(this).next().is(':visible')) {
$('?').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
non so come utilizzarlo.
posto anche il codice sito.
Grazie in anticipo
#container {
position:relative;
width:750px;
height:750px;
border:1px solid #4a679f;
margin:0 auto;
}
a.galleria span {
display:block;
position:absolute;
width:1px;
height:1px;
top:112px;
left: 0px;
overflow:hidden;
background:#000;
}
a.galleria, a.galleria:visited {
display:block;
border:3.5px solid #bababa;
width:100px;
height:100px;
float:left;
margin-left:1px;
z-index:100;
}
a.foto_1{
background:url(risorse_fotografiche/gallery/miniature/foto_1.jpg);
}
a.foto_2{
background:url(risorse_fotografiche/gallery/miniature/foto_2.jpg);
}
a.foto_3{
background:url(risorse_fotografiche/gallery/miniature/foto_3.jpg);
}
a.foto_4{
background:url(risorse_fotografiche/gallery/miniature/foto_4.jpg);
}
a.foto_5{
background:url(risorse_fotografiche/gallery/miniature/foto_5.jpg);
}
a.foto_6{
background:url(risorse_fotografiche/gallery/miniature/foto_6.jpg);
}
a.foto_7{
background:url(risorse_fotografiche/gallery/miniature/foto_7.jpg);
}
a.galleria:hover {border:0}
a.galleria:hover img {
border:0;
position:relative;
z-index:100;
}
a.galleria:active img, a.galleria:focus img {
border:0px solid #ddd;
position:relative;
z-index:50;
}
a.galleria:active span, a.galleria:focus span {
display:block;
position:absolute;
width:750px;
height:638px;
top:112px;
left:0px;
z-index:200;
}
</style>
</head>
<body>
<div id="container">
<a class="galleria foto_1" href="#"><span><img title="Tramonto" alt="Tramonto" src="risorse_fotografiche/gallery/miniature/foto_1_g.jpg" /></br>
</span></a>
<a class="galleria foto_2" href="#"><span><img title="Centrale Eolica" alt="Centrale Eolica" src="risorse_fotografiche/gallery/miniature/foto_2_g.jpg" /></br>
</span></a>
<a class="galleria foto_3" href="#"><span><img title="Auto nella notte" alt="Auto nella notte" src="risorse_fotografiche/gallery/miniature/foto_3_g.jpg" /></br>
</span></a>
<a class="galleria foto_4" href="#"><span><img title="Semaforo" alt="Semaforo" src="risorse_fotografiche/gallery/miniature/foto_4_g.jpg" /></br>
</span></a>
<a class="galleria foto_5" href="#"><span><img title="Autostrada" alt="Autostrada" src="risorse_fotografiche/gallery/miniature/foto_5_g.jpg" /></br>
</span></a>
<a class="galleria foto_6" href="#"><span><img title="Pinguini" alt="Pinguini" src="risorse_fotografiche/gallery/miniature/foto_6_g.jpg" /></br>
</span></a>
<a class="galleria foto_7" href="#"><<span><img title="Rana" alt="Rana" src="risorse_fotografiche/gallery/miniature/foto_7_g.jpg" /></br>
</span></a>
</div>
</body>
</html>
