One evening one of my very good friend Bhumi, pinged and showed me one link and asked me sliding thumbnail effect with JQuery.
Usually the jQuery effect is like, when the user hovers the mouse over an image, he gets the content under that image visible while the images slide up or down.
Instead of the hover, she wanted it on click so I modified the effect which looked like this:
View Demo now!
Such a beautiful effect it is!
But then, Bhumi wanted it to be perfect.
So the whole effect would be like, when the user clicks the thumbnail once, the image slides off and the content shows up.
When the user clicks the same thumbnail the second time, the image slides back in.
And this goes on until the user keeps on clicking and finally he gets tired and quits! So here’s what I found as a simple solution to this minor problem.
All we need to do is to write the jQuery in the source. The added code is as follows:
jQuery code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $('ul.container_block li').click(function(){ if($(this).find('img').css('top') == '0px') { } else { $(this).find('img').animate({top:'0px'},{queue:false,duration:500}); } }); $('ul.container_block2 li').click(function(){ if($(this).find('img').css('left') == '0px') { $(this).find('img').animate({left:'300px'},{queue:false,duration:500}); } else { $(this).find('img').animate({left:'0px'},{queue:false,duration:500}); } }); }); |
So in here what I did was only three simple things:
- I just added the click event to.
- I took off the two functions inside the click event, and made them a single function.
- I gave an if condition which checks whether the left or top property of the image is 0 or not.
of the above mentioned three things, the last one is something that I should explain.Pick any one of the if conditions, and see the condition inside.
Say for example we pick the first if which looks like:
1 2 3 | if($(this).find('img').css('top') == '0px') |
In this if condition, I have just checked whether the top is 0px; which means is the image still there, if it is still there, I just animate it to slide down and show the text lying underneath and if it’s already gone, I simply bring it back by making the top back to 0px.
1 2 3 | $(this).find('img').animate({top:'0px'},{queue:false,duration:500}); |
Now, HTML code for this jQuery effect:
1 2 3 4 5 6 7 8 9 10 | <li><a href="#"><img src="1.jpg" alt="thumb" />Hi,Myself Ravi Veliyat .I am working as PHP Lecturers.</a></li> </ul> <ul class="container_block2"> <li><a href="#"><img src="3.jpg" alt="thumb" />Hi,Myself Ravi Veliyat .I am working as PHP Lecturers.</a></li> <li><a href="#"><img src="4.jpg" alt="thumb" />PHP is my absolute favourite Language </a></li> </ul> |
That’s it! You have your jQuery effect! :).You can simply copy the jQuery code that I provided and paste it and you would get the effect.
Recommended Read:
Synchronous Up & down Slider with jQuery
Masonry MovingBoxes in WordPress
I hope you have enjoyed this article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
Comments (1)