Back to Top

Sliding Thumbnail and Caption with jQuery

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:

So in here what I did was only three simple things:

  1. I just added the click event to.
  2. I took off the two functions inside the click event, and made them a single function.
  3. 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:

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.

Now, HTML code for this jQuery effect:

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.

Share:
Share on Facebook0

Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit0

Comments (1)

  1. I just want to say I am just very new to blogs and definitely savored this website. Probably I’m want to bookmark your site . You surely come with excellent well written articles. Thanks a lot for revealing your website page.

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts

How To Reset resourceID in MODx

Posted on 4 years ago

Bhumi

How to use media upload in WordPress form?

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 1 year ago

Bhumi

The Reader’s Poll – August 2014

Posted on 2 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 2 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 2 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 3 years ago

Bhumi