74 thoughts on “jQuery.popeye 1.0 released”

1. I look forward to trying the new version out. Vielen Dank for all your hard work.

2. Congrats on what looks to be an awesome release.

3. Great work, look forward to check this one out!

4. great great… really nice work, i was looking for something similar, but this is much better then my imagination…

5. It’s great. However, is it me, or does it not work with Safari 3.21?

6. Right — cant get it to work on my Safari install either. I’m running Safari 3.2.1 on Leopard. I’m very excited to implement this on a future project.

7. Running Safari 3.2.2 on Windows, I just noticed that the gallery loads on page reload – can you guys verify that on a Mac?

   There’s also a debug-option not mentioned above, turn it on with debug: true to see where the script stops running.

8. Hi Christoph, great work. We’re hoping to put your plugin into play on our production site to display multiple images on our news stories as soon as possible. Based on the feedback I’ve received on a demo in house, we’d like the ability to have the popeye display the controls and caption when the DOM is ready (not on mouse over). I’ve managed to alter your code to allow this, but I’m having trouble figuring out one final step – how to configure the ppy-cap class to not be an overlay when the popeye is compact, and push the element below it out of the way (dynamically based on the height of the text). Essentially, for our purposes, the height of this div should account for the stage + caption height so that we’re not masking any text underneath. Is this something you (or any willing scripters) could help with? (Line 438 maybe)?

   Here’s a demo of what I’m talking about Notice how the caption masks the body of the text below it.

   Thanks!

9. Hi,

   do you think it’s hard to make automaticly loop with all pictures ??

10. @Michael: This is what happens when popeye loads:

    A placeholder with the same dimensions as the actual popeye box is placed as floating object in the HTML flow.

    The actual popeye box is then moved to the bottom of the HTML body and set to position: absolute;, as an overlay on top of the placeholder. This happens in lines 525ff, so I think if you got rid of this and instead placed the popeye box in the normal HTML flow, your desired behavior could be accomplished.

    I hope this helps. Please let me know if you run into any further trouble. Of course, I’d really like to see the final result!

    @Mathieu: I will consider this for the next release. Thanks!

11. Great News Thanks ;)

12. Great work, I’m a big fan of Popeye. Now works in IE6, which is excellent.

    Any chance of an option to have the previous navigational layout back? It does take up more screen space, but is also more usable to any inexperienced web user who might not realise you have to mouseover the image to get navigational aids – or even that it is a gallery at all, hence that it even has navigational aids.

13. @Peter Parker: I think the image counter should serve as a hint to users that there’s more than just one image, and that they should just try moving the mouse over the image to interact with it. This is already done by a lot of image galleries, so I expect users should be familiar with it. Maybe one could ad a graphic hint like a small icon to the image counter area (can be done with CSS).

    Anyway, I will consider including that option in the next release, in the same way that one can now already decide where to place the counter.

14. I haven’t looked into the code but my one wish is that the navigation+zoom buttons appeared outside of the picture area (preferably above the photo). Having them hover over the photo kills the practicality of having images appear inline while still moving through the additional photos/images.

    One thing I noticed is that on the first visit to the example page, the right-side pic example showed up. Unfortunately, the left-side pic never did appear (loading message never went away). However, on subsequent visits to the example page, the placeholder pic for the right-side example isn’t even displaying.

15. Christoph, it’s not possible to load GIF-Images. We want to use this great plugin but also have uploaded GIF-Images from our users.

    Do you have any solution for that problem?

16. Sorry, me again :-) Maybe I’m a bit stupid, but how do you adjust the styles or the properties to achive a square layout of e.g. 120px to 120px?

    In your old version you had that stageW and stageH properties. But now?

    Adjusting ppy-stage with a width and height and additionaly set !important helps but the background still is too large. Hmmm…I hope you can help.

17. Regarding Safari on Apple: When the page first loads, we see all images in UL list. Reloading the page doesn’t help at all. BUT, clicking on one of the images (which directs your browser to the image itself) and then clicking BACK, fixes the gallery. I really like this plug in and I hope you can fix it REALLY soon!!!

18. Great plugin. I ve listed it in my post about gallery scripts:http://design-notes.info/2009/03/13-simple-gallery-scripts/
    and I m gonna use it in my portfolio web site
    Thanks

19. Oh jeez! What happened with this new version?

    The way the old version worked made perfect sense; it replaced the markup of images with a new div for each slideshow.

    The new version makes this placeholder div and then absolute positions another div at the bottom of the body. What!? Why would you do this!?

    This completely messes everything up if someone resizes the browser window; no longer does popeye ‘integrate’ with the rest of the site. It’s just slapped on top now.

    Also, I can’t figure out how to just show the caption all the time, nor can I figure out how to set the maximum full image size.

20. I hate to say this because I loved the original plugin so much, but I liked the design of the initial version better. It seemed far more intuitive and clean. I would like to see the plugin with the same style as v1 with just the ability to loop through the pictures when you enlarge them.

    It might be good to take this plugin and modify it slightly to allow more control over how it ultimately gets laid out… for example, adding API methods that you could assign to external links so you could style the plugin however you wanted..

    Just my 2 cents. Hope you keep plugging on it.

21. Excelent work.
    Ergonomic & really innovative.

    You should better to use the tag instead of putting the image on background, with this way, you’ll have a good result for the print.

22. Great plugin, thank you a lot!

    But prev/next buttons do suck somehow in case you use this for a single image (confusing and buggy on khtml and webkit based browsers).
    would be nice if you could include this in 1.0.1 or something.

    — jquery.popeye-1.0.orig.js 2009-04-22 13:38:49.000000000 +0200
    +++ jquery.popeye-1.0.js 2009-04-22 13:35:08.000000000 +0200
    @@ -388,7 +388,7 @@
    //
    ////////////////////////////////////////////////////////////////////
    function init() {
    -
    + numElements = obj.find(‘li’).size()
    // get thumbnail dims and calculate max stage dims
    obj.find(‘li’).each(function(i){
    im.width[i] = $(this).find(‘img’).width(); // the image width
    @@ -435,9 +435,9 @@
    if (opts.countpos == ‘overlay’) {
    ppyStage.append(ppyCount);
    }
    - ppyTools.append(ppyPrev);
    + if ( numElements > 1 ) ppyTools.append(ppyPrev);
    ppyTools.append(ppySwitch);
    - ppyTools.append(ppyNext);
    + if ( numElements > 1 ) ppyTools.append(ppyNext);
    if (opts.caption) {
    ppyStageWrap.after(ppyCap);
    }

23. Great plugin but does not work on Safari and Chrome.

24. I have used it for my site, and am so far pretty happy with it. I sometime have over 60 car images, and this helps keep my layout cleaner. Check it out.

    http://persnickit.com/vehicle/2009-saab-9-5-griffin

    Because there are so many images, it does take a minute to load.

25. Does anyone know if the Mac/Safari thing is resolved? I’d like to use this plugin for a project but the people who will use the project are academic scientists – natch Mac and Safari.

26. @ Neil: It works for me on Safari / Win, so it should work on Safari / Mac, too. Check out the example page and tell me if it doesn’t work for you.

    @all: I can see that further work has to be done on the plugin, thanks for your input. Will resume work soon.

27. Thanks for the response, unfortunatly I am getting the behaviour described above in that it shows all the images inside a scroll pane, when I click the image I am taken to a new page of the image and then after clicking back the plugin works. Damned safari! If there is any debugging you would like me to do then please gimmie a shout and I’d be happy to try anything out.

28. @Neil: You could try turning debug-mode on (debug: true) and watch for the output in the JavaScript Console Window. Unfortunately, I have no time at the moment to work on the code…

29. Hi Christoph,

    I really like popeye; I’ve got a couple suggestions/questions if you care to hear them:

    I’d like to be able to include URLs in the captions.
    you can’t include a url in an alt tag, but you can use a rel= tag to reference another div. (this is how the captify plugin achieves this)
    http://masterfidgeter.com/projects/captify/

    is it possible to specify max dimensions of the sized and the full image?
    eg: max_w: max_h: and if either dimension exceeded the max, the specified max would be used instead? this would enable my users to upload images of odd dimensions without needing to worry too terribly much about how it will be displayed.

30. I only use components that I compress myself using the yuicompressor (so I know I can fix something if I get in a jam). The 1.0 source would not compress for me because of the use of ‘float’ (a reserved word) in cssPlaceholder on line 503. Also, out of the box, the noscript div at the top of the image page also was never replaced so only the 2nd set of images was shown.

    After quoting float on line 503, I was able to compress the source and my newly-built script did not demonstrate the same problems in Safari/Opera. Have not put any of this to any sort of test yet – I need better noscript behavior – but thought that this might provide a clue to why some others are having problems.

    Nice component!

31. Love the script. There were definitely some things that I liked in the previous script, but nothing a few minor adjustments couldn’t fix (like killing moving the HTML to the bottom and positioning it absolutely…that definitely had to go).

    I can confirm that the script doesn’t work in Safari every time the page loads. If you reload the page a number of time the script will finally fire but its not consistent. Haven’t had time to see what the issue is yet.

    Overall its a fabulous way to do things. Love it because I’m very tired of the normal lightbox js that is so overused.

32. Great plugin, but doesn’t work for me in ie6, ie7, and opera. On top of that it doesn’t work with the old versions of jQuery…

    I was going to use this plugin for a list of single images (not all in one). Unfortunately I have to consider something else because this is unreliable.

33. Thanks Wolf, Gary, Bermon and Alex, for your comments and hints!

    I’m really sorry that there are still so many issues with popeye. Unfortunately I don’t have so much time right now to work on it, so the fixes have to wait a while. But I will definitely keep on updating and will include all your suggestions ans remarks in my considerations.

34. Hi,
    Is there any way to get the popeye to roll up (from bottom left corner) instead of down (from top left)?

35. Hi, How can I load images from a Database? Does it posible?

    Thanks

36. 5 stars on plugin repository! :-)

37. Hi,
    first of all – great plug-in!
    But …

    With safari 4.0 or ff 3.5 on mac the images only display after several page reloads – does anyone have a solution?
    -
    thanks in advance and keep up the good work!

38. How hard would it be to modify this to not appear as an absolute-positioned overlay (at least in mini mode)?

    This script is brilliant and would be perfect for my purposes if not for that aspect. I’ve been trying to do it myself, but without having written the code myself I have no knowledge of the side effects of my changes.

39. Thanks for your script, its working perfectly.

    Cheers,
    Arya

40. Excelent plugin

41. Great work on the plugin! Love the way it works.

    One issue I have is when I add elements to the DOM, the thumbnails get moved out of place because they are absolutely positioned.

    I was thinking you should leave the popeye box in the DOM when it is in compact mode. When it is expanded, you can make it absolutely positioned so it can have room to expand.

    Thoughts?

42. It’s a great plugin but i mostly build dynamic webpages where customers can add multiple thumbnails to their page, using id’s there is not an option and changing the code to classes isn’t simply going to work. I am wondering why it isn’t coded with classes and uses ‘this’ to tell what is the target.

    Any simple idea’s on how to fix this easily?

    Regards,

    Marcus

43. @Marcus:

    I had the same issue, so as a workaround I did something like this.

    var n = 1;
    $(‘div.screenshots’).each(function() {
    $(this).attr(‘id’, ‘screenshot-container-’ + n);
    var selector = ‘#’ + $(this).attr(‘id’);
    $(selector).popeye();
    n++;
    });

44. @ Venkat,

    It still generates id’s for the elements and not uses the class and applies the code to ‘this’-element, but fair to say it solved the problem.

    Thanks!

45. How can i hide the enlarge button?

46. @dev,

    You can try setting ‘display: none’ in the css for the enlarge button. I did the same for the previous / next buttons which worked like a charm.

    Marcus

47. I uploaded a TYPO3 Extension of the jQuery.popeye. Check it out :)

    http://typo3.org/extensions/repository/view/rzpopeye/current/

48. Great script. This is veryhelpful and very innnivative.

49. I would like to give my “vote” for the previous layout as well. It was *much* easier to use for inexperienced users. Hidden navigation (having to hover over the image to see it) is always bad in terms of usability.

    Also, I was thinking… it would be really cool if this had an option to use floats instead of absolute positioning. That way, when enlarged, the text would automatically adjust to flow around the image. When the layout permits, that would be awesome!

    Thanks for the great work.

50. how can i remove “enlarge” button?

    “enlarge” ( button and text link )

    which css or js file ?

    thx