jQuery.popeye 1.0 released

jQuery.popeye 2.0 has been released. Older Versions are no longer supported.

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:

Option Type Default Description
jsclass string 'ppy-js' a class name applied to the jQuery.popeye root element when JavaScript is active (can be used for extra styling)
nojsclass string 'ppy-no-js' the class name of an optional element which can be placed in the HTML code inside the jQuery.popeye root element. This element will be removed once jQuery.popeye has loaded. It can be used as a placeholder.
eclass string 'ppy-expanded' a class name to be applied to the enlarged jQuery.popeye box (can be used for extra styling)
lclass string 'ppy-loading' a class name to be applied to the stage while loading image (can contain loading indicator graphic)
dlclass string 'ppy-left' a class name to be applied to the navigational overlay if popeye opens to the left (can be used to achieve left orientation of overlay)
drclass string 'ppy-right' a class name to be applied to the navigational overlay if popeye opens to the right (can be used to achieve right orientation of overlay)
direction string 'left' direction that popeye-box opens, can be 'left' or 'right'
duration integer 250 duration of transitional effect when enlarging or closing the box
opacity integer 0.7 opacity of navigational overlay
countpos string 'overlay' placement of image counter – can be false, 'overlay' or 'caption'
caption boolean true wether to display a caption based on title attribute
easing string 'swing' easing type, can be 'swing', 'linear' or any of jQuery Easing Plugin types (Plugin required)
nlabel string n/a label for next button
plabel string n/a label for previous button
oflabel string 'of' label for image count text (e.g. 1 of 14)
blabel string n/a label for enlarge button
clabel string 'Click to close' label for expanded stage (to hint closing)

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.

jQuery.popeye 2.0 has been released. Older Versions are no longer supported.

75 thoughts on “jQuery.popeye 1.0 released

  1. I’ve found a nasty bug, when trying to setup the gallery in a div which is centered via margin-left/right: auto

    When I resize the browser window the gallery/thumbnails doesn’t stay within the the center-div – it starts moving like crazy. The only solution I found is a page-reload via js in body onload.

    and btw: it seems not to work on mac safari unfortunately :-(

    grüße aus prenzlberg

  2. I like the other one better, a lot better. And confirmed it doesn’t work in safari on mac.

  3. I have a div tabbed panel and I’m trying to hide the Popeye jquery component when another tab is focused, but no success… The popeye is always on top of all div layers. Could somebody help me?
    Thanks a lot!

  4. My IE8 was throwing a javascript error “jQuery invalid argument line 12″ and it looks like it’s because of the jQuery css() calls in the popeye init() method. I changing that block of code in your plugin to the below, and it seems to have fixed it. IE8 was returning “auto” for “marginLeft” and “marginTop”, while Firefox was returning “0px”.

    var strMarginTop = obj.css(‘marginTop’);
    if (strMarginTop == ‘auto’) {
    strMarginTop = ’0′;
    }
    var strMarginLeft = obj.css(‘marginLeft’);
    if (strMarginLeft == ‘auto’) {
    strMarginLeft = ’0′;
    }

    var imTop = obj.offset().top – parseInt(strMarginTop, 10);
    var imLeft = obj.offset().left – parseInt(strMarginLeft, 10);

  5. And the reason “auto” was causing issues is because it was returning NaN from the parseInt() function, which caused imTop and imLeft to be NaN.

  6. This is a great plugin! Very nice effect. Can the selected image be set from an external javascript method call (e.g. button click)? This would be a great feature, right now I don’t see any way to simulate the ‘next’ and ‘previous’ actions from outside the plugin…
    If there is a way to do this with this version, please let me know :)

  7. Thanks for the wonderful plugin!

    I am trying to place my popeye inside a vertical scrollable (using JQueryTools).
    But the popeye seem to stay on the same position as everything scroll up or down?

    Is there any way I can archieve this? i.e. scroll with everything else in my scrollable) or I am using the wrong plug in for the task)?

  8. Really cool – if there wouldn’t be the Webkit problem.

    Wishlist:
    • optional external, non-hiding controls
    • optional non-hiding caption

  9. Hi,

    Lovely Script… works well….

    The only problem i have is i cannot seem to figure out how to resize the thumbnails…. i saw there was a stageW and stageH command on the previous version but not on this one….

    Does anyone know how this would be best re-sized???

    Thanks in advance

    Rob
    robsarna@gmail.com

  10. Great job Chris!

    Is it possible however to use it to display webpages instead of just images? Right now I have an html page with a jquery script that generates a graph. Since the content is dynamic and reads data off of a database, I can’t store it as an image. Is it possible to still display it with popeye?

    Thanks,
    Le

  11. I love popeye… if only it would work with centered yaml webpages…

    This absolute positioning of the boxe drives me crazy because it is really hard to explain to users why the boxe is in the wrong place if they scale the browser :( Another user already wrote about this – has anyone found a workaround for this right now?!?

    Or is popeye 2.0 already realased and came out as the egglayingwolfmilkpig ;)

    If i could add just one feature request it would be automatic image transition :) … ok and random image load and play ;)

    Anyway THUMBS UP!

  12. I just commited a 2.0 alpha release to svn (http://svn.assembla.com/svn/popeye/jquery/trunk/) and set up a demo page at http://dev.herrschuessler.de/examples/jquery-popeye-2-0/.

    It has been completely rewritten an needs a new html structur, allowing for far greater control over styling and features. I yet have to write a blog entry about the usage, but you should be able to see how it works from the demo code.

    I hope to get some feedback before releasing it to the jQuery plugins library and writing the doc, so please comment here!

  13. Looks great! The Safari/Google Chrome issues seem to be fixed. Can’t wait for this to be released! :)

  14. Simply great!

    Im really looking forward to the final version … and hoping that Raphael is creating a new integration of popeye for typo3 soon! :)

    One question: Is popeye compatible with the jquery “noconflict” mode?

    Keep up the good work!!! – Cant wait for popey 2.0 final! ;)

  15. Pingback: [2ideas.info] 100+Useful jQuery Image Slideshow and Content Slider | Hiệu ứng chuyển ảnh bằng Jquery | 2IDEAS.INFO

  16. Pingback: 100 Useful jQuery Image Slideshow and Content Slider | Weboroid

Comments are closed.