I have set up a jQuery.popeye site where you can find documentation and demos.

You will also find links to a new feature request forum and bug tracker there. Hope you like the new stuff!

Some solutions have been proposed, among them:

• hiding the select element on hover
• replacing it with an input element on hover
• or stop caring about IE6 altogether

These solutions all include drawbacks in usability or undesired UI changes, which can be confusing for the user. Another work-around, which is quite unnoticeable in the front-end is to place an invisible, empty IFRAME in the layer that will be positioned above the SELECT element.

Here’s how to do this jQuery-style:

The jQuery-Plugin:

jQuery.fn.activeXOverlap = function() { 

    $(this).each(function(i){
        var h   = $(this).outerHeight();
        var w   = $(this).outerWidth();
        var iframe  = ''
        $(this).prepend(iframe);
    });
}

The Plugin setup:

$(function() {
    $('.myHoverClass').activeXOverlap();
});

where .myHoverClass references all elements that should hover above the select.

The required CSS:

What this does is placing an Iframe behind every selected element, scaling it to the correct dimensions and hiding it from all browsers but IE6.

More than 100 comments on the first release of jQuery.popeye, an appearance on the frontpage of delicious.com and coverage in uncounted blogs…

I certainly didn’t expect that much interest. The numerous feature requests,  suggestions, bug reports and, in the end, acknowledgments and nice comments prompted me to continue development, as promised. So here it is, in a major release, a completely rewritten and overhauled jQuery.popeye, the image gallery plugin that started as an alternative to the famous JavaScript lightbox.

Download jQuery.popeye 1.0
from the jQuery Plugin Repository

What’s new

When you check out the example installation, you’ll immediately notice some changes and new features:

• The navigation buttons (next and previous image, enlarge / compact image) have moved. They will appear on mouseover on the popeye box and fade out accordingly. As a result, the user interface is less cluttered with navigational elements.
• Navigation is also possible in enlarged mode, as this was a big feature request.
• The caption is hidden by default and also shows on mouseover. It automatically adjusts to the amount of text with a smooth transition.
• The image counter can be placed either as an overlay above the image (and thus serves as a hint to the user that there’s more than one image to see), or it can be inserted in the caption or even completely turned of.
• There’s a new basic skin. I deliberately kept it quite blunt as to encourage you to design your own skin that better fits your website design. Designing a new skin is quite simple via adjustments to the included jquery.popeye.style.css.
• The original image list is hidden via CSS, so the user won’t see anything until jQuery.popeye has preloaded all the thumbnail images and then inserted the gallery in the page. In order to prevent a jumping effect once the images load, a placeholder div can be added to the original html which will be replaced by the gallery box.

Under the hood

Version 1.0 comes with a fresh set of options:

Usage

The HTML structure hasn’t changed, but if you like, you can now place an extra element (which can serve as a placeholder for users without JS) in the source.

                

                

                
...


        This element will be deleted once the gallery loads

Support

Please leave your comments and requests here in the blog. Bug reports can also be filed at the plugin repository issue tracker. If you make use of jQuery.popeye in one of your projects,I would be really interested to see the result! So feel free to link your site in the comment section.