I want to have a visual portfolio displaying a list of projects. When a project's title is clicked, a large image (imgdefault in the code below), miniature image (miniatures) and description (description) are displayed at the same time.
The code generated by PHP
<section id="slide">
<ul id="imgdefaut">
<li><img src="GdeImg0.jpg" /><img src="GdeImg1.jpg" /></li>
<li><img src="GdeImg2.jpg" /><img src="GdeImg3.jpg" /></li>
</ul>
<ul id="miniatures">
<li><img src="miniaturesImg0.jpg" /><img src="miniaturesImg1.jpg" /></li>
<li><img src="miniaturesImg2.jpg" /><img src="miniaturesImg3.jpg" /></li>
</ul>
<ul id="description">
<li>Description Images 0</li>
<li>Description Images 1</li>
</ul>
</section>
In jQuery, the beginning of my function works but I used .eq()
and .index()
.
My jQuery
$(document).ready(function(){
$("#listeProjet ul li").click(function () {
$("#imgdefaut > li:not(li:nth-child(1)) > img").css({'visibility':'hidden'});
$("#miniatures > li:not(li:nth-child(1))").css({'visibility':'hidden'});
$("#description > li:not(li:nth-child(1))").css({'visibility':'hidden'});
},function(){
$("#imgdefaut > li:not(li:nth-child("+ $(this).index().next("li") +")) > img").css({'visibility':'visible'});
$("#miniatures > li:not(li:nth-child("+ $(this).index().next("li") +"))").css({'visibility':'visible'});
$("#description > li:not(li:nth-child("+ $(this).index().next("li") +"))").css({'visibility':'visible'});
});
});
With no results. Can anyone help me?