74 Comments

1. 1

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

   Shawn
   14:18, März 29th, 2009

2. 2

   Congrats on what looks to be an awesome release.

   Todd Rafferty
   15:32, März 29th, 2009

3. 3

   Great work, look forward to check this one out!

   Kim Steinhaug
   16:05, März 29th, 2009

4. 4

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

   jigish
   19:47, März 29th, 2009

5. 5

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

   regendanz
   20:13, März 30th, 2009

6. 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.

   Darren
   21:13, März 30th, 2009

7. 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.

   Christoph Schüßler
   21:41, März 30th, 2009

8. 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!

   Michael
   02:16, April 1st, 2009

9. 9

   Hi,

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

   Mathieu
   11:22, April 1st, 2009

10. 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!

    Christoph Schüßler
    13:18, April 1st, 2009

11. 11

    Great News Thanks ;)

    Mathieu
    14:01, April 1st, 2009

12. 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.

    Peter Parker
    17:24, April 1st, 2009

13. 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.

    Christoph Schüßler
    10:53, April 2nd, 2009

14. 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.

    hcabbos
    04:07, April 3rd, 2009

15. 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?

    Oli
    16:45, April 3rd, 2009

16. 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.

    Oli
    17:41, April 3rd, 2009

17. 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!!!

    Alex
    22:40, April 8th, 2009

18. 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

    alex
    16:59, April 9th, 2009

19. 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.

    eobanb
    20:01, April 13th, 2009

20. 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.

    Aaron
    07:57, April 20th, 2009

21. 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.

    Kévin
    12:56, April 21st, 2009

22. 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);
    }

    foobar
    12:42, April 22nd, 2009

23. 23

    Great plugin but does not work on Safari and Chrome.

    JT
    01:59, April 23rd, 2009

24. 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.

    Christine Seib
    19:44, April 30th, 2009

25. 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.

    Neil Benn
    16:46, Mai 4th, 2009

26. 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.

    Christoph Schüßler
    16:53, Mai 4th, 2009

27. 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.

    Neil Benn
    17:05, Mai 4th, 2009

28. 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…

    Christoph Schüßler
    17:27, Mai 4th, 2009

29. 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.

    Wolf
    07:37, Mai 31st, 2009

30. 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!

    Gary
    23:49, Juni 2nd, 2009

31. 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.

    Bermon Painter
    15:35, Juni 3rd, 2009

32. 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.

    alex
    15:55, Juni 3rd, 2009

33. 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.

    Christoph Schüßler
    16:00, Juni 3rd, 2009

34. 34

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

    Rob
    14:30, Juni 30th, 2009

35. 35

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

    Thanks

    Michael
    05:56, Juli 1st, 2009

36. 36

    5 stars on plugin repository! :-)

    nicmare
    10:19, Juli 3rd, 2009

37. 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!

    ranzen
    23:39, August 4th, 2009

38. 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.

    William
    06:57, August 10th, 2009

39. 39

    Thanks for your script, its working perfectly.

    Cheers,
    Arya

    Aryashree Pritikrishna
    07:32, August 11th, 2009

40. 40

    Excelent plugin

    Ivan Mišić
    16:21, August 24th, 2009

41. 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?

    Venkat Dinavahi
    05:46, August 25th, 2009

42. 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

    Marcus
    10:48, August 25th, 2009

43. 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++;
    });

    Venkat Dinavahi
    20:28, August 26th, 2009

44. 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!

    Marcus
    11:56, August 27th, 2009

45. 45

    How can i hide the enlarge button?

    dev
    15:05, August 29th, 2009

46. 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

    Marcus
    07:31, August 31st, 2009

47. 47

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

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

    rafu1987
    09:32, September 5th, 2009

48. 48

    Great script. This is veryhelpful and very innnivative.

    Dindigul
    20:43, September 7th, 2009

49. 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.

    Kevin Crawford
    19:04, September 9th, 2009

50. 50

    how can i remove “enlarge” button?

    “enlarge” ( button and text link )

    which css or js file ?

    thx

    allen
    11:17, September 18th, 2009

51. 51

    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

    Micha
    13:08, September 23rd, 2009

52. 52

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

    chris
    01:48, Oktober 20th, 2009

53. 53

    Hallo Christoph,

    echt cooles Teil!
    Ich hätte da noch eine Frage dazu: ich würde die Galerie gerne in einem Ajax generierten Inhalt verwenden, hast du dafür auch schon eine Lösung? Ich habe Ansätze für die Thickbox gefunden (http://www.djcnet.co.uk/jquery-thickbox-on-ajax-generated-pages.html) komme aber leider nicht wirklich damit klar – kannst du mir bitte helfen?

    Marianna
    17:47, Oktober 30th, 2009

54. 54

    FANTASTIC. Thank you, about to implement it right now :)

    Pol Moneys
    11:28, November 3rd, 2009

55. 55

    Very cool plugin. Didn’t work for me in Chrome, though.

    Jesse
    19:52, November 6th, 2009

56. 56

    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!

    maikel
    16:07, November 17th, 2009

57. 57

    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);

    Kevin Southworth
    18:02, November 24th, 2009

58. 58

    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.

    Kevin Southworth
    19:08, November 24th, 2009

59. 59

    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 :)

    Kevin Southworth
    19:49, November 24th, 2009

60. 60

    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)?

    snackmoore
    04:52, Dezember 18th, 2009

61. 61

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

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

    Götz
    14:16, Januar 4th, 2010

62. 62

    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

    Rob
    21:12, Januar 5th, 2010

63. 63

    I see you have a 1.1 version in the CVS trunk, is that ready to use? I hope so :)

    kevin southworth
    18:05, Januar 20th, 2010

64. 64

    @Kevin: You’re right, there is a new version in development. It’s still not finished and will probably be released as popeye 2.0 in the next couple of days.

    Christoph Schüßler
    18:13, Januar 20th, 2010

65. 65

    @Christoph that is great! I’m looking forward to it as I’m using 1.0 right now with a few bugs/issues

    Kevin Southworth
    18:32, Januar 20th, 2010

66. 66

    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

    Le
    06:28, Februar 15th, 2010

67. 67

    Browser compatibility problems: Doesn’t work well with Safari nor Google Chrome.

    Bob
    17:05, April 1st, 2010

68. 68

    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!

    Mike
    12:30, April 2nd, 2010

69. 69

    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.herr-schuessler.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!

    Christoph Schüßler
    13:17, April 2nd, 2010

70. 70

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

    Greg
    18:52, April 5th, 2010

71. 71

    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! ;)

    Michael Karrer
    13:11, April 8th, 2010

72. 72

    @michael: noconflict is supported

    Christoph Schüßler
    16:53, April 8th, 2010

73. 73

    Popeye 2.0 is compatible with the Safari used in the iPad (iPhone OS 3.2). Works great, thanks!

    Götz
    15:17, April 10th, 2010

74. 74

    Social comments and analytics for this post…

    This post was mentioned on Twitter by dondondon: A cool jQuery gallery plugin with a cool name: Popeye plugin http://tr.im/rjot...

    uberVU - social comments
    16:17, April 26th, 2010