Hi I have just started learning jquery so please help me out here.
I have a group of images under div's eg.2012images,2013images etc,
all these div's are wrapped in a wrapper displayed as thumbnails at the bottom of the page.
What I want is when the user clicks on 2012images ,these images should all display in the center of the page as a large image as a FadeToggle and stop at last image.
I have written the code as such:
<style>
.enlarge{
width:75px;
height:75px;
position:absolute;
margin-top:5px;
margin-left:auto;
margin-right:auto;
}
.2012images{
cursor:pointer;
}
</style>
<div class="wrapper">
<div class="2012images">
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
</div>
<div class="2013images">
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
</div>
</div>
<script>
function InOut( photos )
{
photos.delay()
.addClass('.enlarge')/* this will position the group photos in the centre of the page*/
.fadeIn('3000')
.delay('4000')
.fadeOut('3000',
function(){
if(photos.next().length > 0)
{InOut( photos.next() );}
else
{InOut( photos.siblings(':first'));}
}
);
$(function(){
$('.wrapper').on('click',(function(){
var $this=$('this');/* selecting inside div i.e.2012images or 2013images*/
InOut( $('$(this):first') );
}));
});
</script>
But everytime I click on 2012images the images enlarges to its default size and does not do anything else. Can anyone help me please. How should I code to stop this auto enlargement and instead do a FadeToggle based on user selection ..thanks in advance.