Sticky Captions Concept with jQuery

samuel Others 196 , , , , ,

When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.

A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.

What we basically do is to imitate position: sticky but since it’s not yet supported in many browsers, we’ll do a bit of JavaScript to achieve the same result. We’ll be using jQuery.

The main idea is to see when a hovered element overflows the viewport and show the caption in the right place by changing its position from absolute to fixed.

Related Post

jQThumb is a jQuery plugin to create thumbnails from images proportionally and also an alternative for background-size in older browsers. Read more

PreViewTube.js is a jQuery plugin for animating YouTube thumbnail images.

A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can Read more

simpleGal is a simple jQuery image gallery plugin. It's easy to use and thumbnails can be vertical / horizontal.

desoSlide is simple jQuery image slider with thumbnails. You can control the slider by clicking or pressing your keyboard keys. Also there are Read more

MediaSlide is a media gallery viewer plugin with a sliding thumbnail bar - performs transition effects when you move between images. Read more

Gallerie is a jQuery plugin that offers a basic lightbox-like gallery viewer of a collection of images. It features a simple overlay with Read more

Responsive Thumbnail Gallery is a jQuery plugin for creating image galleries that scale to fit their container.