jQuery hoverZoom

a lightbox and gallery alternative

The demo

Actions speak louder than words. So here is what you get (just hover over the images):

The story

One day i stumbled across http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ and i liked the effect of the zooming images. But it has one big downside: When a zoomed image covers another thumbnail you canĀ“t zoom that thumbnail. So i took my own attemp to create a jquery plugin that fixes this issue.


Supported browsers

Please feel free to test it in other versions/browsers and notify me if it`s working or not.


jQuery 1.4+


git clone git://github.com/jmar/jquery-hoverZoom.git

or download it from https://github.com/jmar/jquery-hoverZoom


                    <ul class="thumb">
                        <li><a href="fullSizeImage.jpg" /><img src="thumbnail.jpg" /></a></li>
                        <li><a href="fullSizeImage2.jpg" /><img src="thumbnail2.jpg" /></a></li>
                        <li><a href="fullSizeImage3.jpg" /><img src="thumbnail3.jpg" /></a></li>

                    <script type="text/javascript">
                                $('.thumb img').hoverZoom();


speedView (600)
A number determining how long the zoom in animation will run.
A number determining how long the zoom out animation will run.
showCaption (true | false)
A boolean determining if captions should be displayed.
speedCaption (800)
A number determining how long the zoom in animation for captions will run.
debug (true | false)
A boolean determining if debugging messages should be send to a console.
loadingIndicator (ajax-loader.gif)
Path to an loadingIndicator image.
loadingIndicatorPos (center | tl | tr | br | bl)
Position to display the loadingIndicator (topleft, center, topright, etc.)
easing (swing | linear | easeOutQuint)
A string indicating which easing function to use for the animation. Supports the easing plugin
captionHeight (32)
A number determining the height of the caption
breathingSize (0)
A number determining margins around the zoomed image
hoverIntent (true | false)
A boolean determining whether to use the integrated hoverIntent Plugin or not.
use a background image instead of zooming the real image


Something not functioning as aspected? Please file a bug

Follow me

Follow me on twitter: http://twitter.com/jmartsch

or visit my Website (german): http://jensmartsch.de