Ciao,ho creato una galleria fotografica con i css ma vorrei che l'apertura delle foto sia piu lieve e magari che partisse dal centro foto .
In rete ho trovato dei file Jquery ma non riesco associare i css.
Allego il codice grazie anticipatamente.


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("").click(function(){
if(false == $(this).next().is(':visible')) {
$('').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
</script>

<style type="text/css">
<!--
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:hover span {
display:block;
position:absolute;
width:750px;
height:638px;
top:112px;
left: 0px;
padding:0px;
background:transparent;
z-index:100;
}


a.galleria:active span, a.galleria:focus span {
display:block;
position:absolute;
width:750px;
height:638px;
top:112px;
left:0px;
z-index:200;
}
-->
</style>
<div id="content">
<a class="galleria foto_1" href="#"><span>[img]risorse_fotografiche/gallery/miniature/foto_1_g.jpg[/img]</br>
</span></a>
<a class="galleria foto_2" href="#"><span>[img]risorse_fotografiche/gallery/miniature/foto_2_g.jpg[/img]</br>
</span></a>
<a class="galleria foto_3" href="#"><span>[img]risorse_fotografiche/gallery/miniature/foto_3_g.jpg[/img]</br>
</span></a>
<a class="galleria foto_4" href="#"><span>[img]risorse_fotografiche/gallery/miniature/foto_4_g.jpg[/img]</br>
</span></a>
<a class="galleria foto_5" href="#"><span>[img]risorse_fotografiche/gallery/miniature/foto_5_g.jpg[/img]</br>
</span></a>
<a class="galleria foto_6" href="#"><span>[img]risorse_fotografiche/gallery/miniature/foto_6_g.jpg[/img]</br>
</span></a>
<a class="galleria foto_7" href="#"><<span>[img]risorse_fotografiche/gallery/miniature/foto_7_g.jpg[/img]</br>
</span></a>
</div>