jSquares images and description hover overlay (jQuery)

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.



Setting it up


Make sure you’re including these files in the head of your document


To initiate jSquares simply wrap it in the jQuerys document ready function like so.


The default chunk of HTML will look something like this:


Howlla at cha boy!

You can't hide from wolf boy.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... Read more »

Optional parameters

Parameters can be added when you call jsquares like so:

shuffle_in: false, // have the pictures all fade in on page load?
fade_on_hover: false, // do we want the images to fade on hover or just change opacity?
caption_slide_down: false // do we want the caption to slide down or just appear?

Here’s a list of all of the options it can take:

Key Default Value Type Description
image .js-image String The target element holding all of the info (image/caption). View the source of the demo for a better understanding.
caption .js-small-caption String The target element holding the caption. This element is found within the element specified as js_image.
caption_overlay_spacing 12 Integer This is the padding on the caption that pops up on hover.
caption_width 400 Integer This is the width of the caption that pops up on hover.
caption_height 130 Integer This is the height of the caption that pops up on hover.
fade_to .3 Integer | Float This is the opacity that you want the images/captions to fade to when you roll over an image.
fade_start 1 Integer | Float This is opacity that images/captions are sent back to after you roll off the image set. This normally shouldn’t be altered.
shuffle_in true Boolean By default the images will shuffle in (fade in) randomly. If you don’t want any effects and to have them just appear, change this to false.
shuffle_in_speed 130 Integer If js_shuffle_in is set to true, you can set the speed in which images appear one after the other.
fade_on_hover true Boolean By default the images fade to a value set by js_fade_to, if you just want them to change opacity then change this to false.
caption_slide_down true Boolean The caption has a slide down effect when you hover over an image. If you just want it to appear instead of sliding down, change this to false.
caption_slidedown_speed fast String | Integer If the option key js_caption_slide_down is set to true, you can change the speed that it slides down at.

Download: http://www.htmldrive.net/items/download/337

Leave a comment