Hoverbox Image Gallery

— Topic: CSS

I recently finished reading CSS Mastery, and think I’ve finally got a good understanding of how absolute and relative positioning (fail to) work in Internet Explorer. I have been tinkering with this bit of code since yesterday afternoon, helping out a designer friend with his client’s site. However, we decided to go a slightly different route for their gallery. So, I pass it on to you with the hope that it proves useful. Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS

Hoverbox: View Example | Download Here (280 KB)

It uses an anchor link for the effect, because that is the only thing that Internet Explorer allows the :hover psuedo-class to work with. While my example page only has # linked to, this could easily be pointed to a full version of the respective images, or a website if you decide to use it for a design portfolio. For now, it uses photos taken by family and friends.

I decided to call it Hoverbox, because after showing it to Dustin, he said it was like a mini Lightbox. While my example is nowhere near as cool as those, it does have the same principle in mind, popping up an image without affecting a page’s layout. Being that it’s triggered by a mouse a:hover, the silly name was born. I also like the fact Hoverbox works with JavaScript disabled.

It has been tested in the current builds of all the latest major browsers and works in Camino, Firefox, IE6, Opera, and Safari. So, I’m assuming it works in most Gecko based engines. The effect itself even works in IE5.5, but I haven’t bothered to support it because serveral years is ample time for users to have upgraded to version 6. With all that out of the way, here’s how it works…

The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6 + 7, conditional comments place the positioning on the containing a href.

Due to the differences in border / padding on the li, the offset in pixels is overridden for IE6. This corrects for the smaller dimenions of the link, equal to the total width the img plus its border and padding. I tried just using -50% for both top and left, but Opera seemed to choke on the percentage values.

To save on loading time, I am only using one image for both the thumbnail and the roll-over preview, but you could just as easily have separate files for each instance, if you so desire. It just depends if the graininess of forced constraints on dimensions bothers you or not. The reason I load each image twice, instead of just increasing the size of a single image on roll-over is due to the inconsistent shifts this causes in the page layout. So, while there is minor redunancy, it beats having to pre-cache the images with JavaScript.


Note: The code for Hoverbox is free to use. Do with it whatever you want in your own projects. I just ask that you not redistribute the code via template sharing repositories, because I occasionally make updates to ensure multiple browser compatibility. If you do want to spread the word, simply link to this page so that people are always getting the most updated version.

Update: Thanks to Craig Erskine, my Hoverbox demo now works without any extraneous span tags. Check out Craig’s example page – here.


This article has been translated to Belorussian.

Powered by Fusion Ads
 

JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript
Promote JavaScript


Disclaimer

The thoughts and opinions expressed here are mine alone, and are not necessarily shared by any other living person.