jQuery.popeye 2.0 released

I have just released a new major version of my popular image gallery script jQuery.popeye. It features more customization options, better cross browser and mobile support and tons of bugfixes.

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!

Bookmark and Share

RSS: 64 Comments

  1. 1

    Hi!, can Jquery Popeye works with WordPress as a wordpress plugin?

    Mariangela Petrizzo
    13:27, April 14th, 2010

  2. 2

    Hi Mariangela, thanks for asking. A Worpress plugin is in development and should be released soon.

    Christoph Schüßler
    13:29, April 14th, 2010

  3. 3

    awesome plugin awesome!!! congrats :)

    AngelBotto
    14:29, April 14th, 2010

  4. 4

    Good job with the plugin.
    I wanted to know if this could be used as a slideshow instead of a modal?
    meaning that the image would be clickable and send to another page.

    I know this defeats the base concept of your plugin but I like the way you integrated things.

    thx

    brian
    16:15, April 14th, 2010

  5. 5

    @Brian: You’re right, this rather goes against what the plugin was intended for. But you’re very welcome to add this as a feature request at http://jquerypopeye.uservoice.com/forums/49985-general. If You do so, please try to explain your concept a little more.

    Christoph Schüßler
    16:18, April 14th, 2010

  6. 6

    One of the most creatives plugins I’ve ever seen, congrats!

    Shino
    13:47, April 15th, 2010

  7. 7

    good job!!

    Jhon Doe
    14:08, April 15th, 2010

  8. 8

    very nice implementation

    James Campbell
    18:57, April 15th, 2010

  9. 9

    Really good one. Will try, if you’re ok, to create a Joomla module or plugin…

    wukish
    08:43, April 16th, 2010

  10. 10

    @wukish: Great, go ahead and leave a link when done!

    Christoph Schüßler
    08:50, April 16th, 2010

  11. 11

    I do website for a living and this looks great. One question: can I embed video in it as well as photos?

    Thanx

    Jonathan
    08:24, April 18th, 2010

  12. 12

    Sehr schick, leider zickt die Demoseite wenn man den Google Analytics Kram tollschockt – ähm blockt.

    Mühsam
    18:34, April 18th, 2010

  13. 13

    @Mühsam: Thanks, should be fixed now.

    Christoph Schüßler
    08:55, April 19th, 2010

  14. 14

    great plug-in!
    Is there a chance to change to the direction to “top-left” or “top-right”?
    I need this because my images are placed at the bottom of a page.

    Cheers
    Hyper

    hyper.sonic
    15:09, April 19th, 2010

  15. 15

    a little problem and a work-around (bug fix?):
    I have some popeye divs placed in an accordion. Therefore, the height and width property of cssStage are 0 for the popeye divs that are initally hidden.

    The following work-around fixed this for me:
    changed lines 107 to 110 of jquery.popeye-2.0.js to
    cssStage = {
    height: ppyStage.css(“height”),
    width: ppyStage.css(“width”)
    },

    What do you think?

    Hyper

    hyper.sonic
    17:12, April 19th, 2010

  16. 16

    Hi I’m trying to use the first example style multiple times on one page but not sure how to go about it. I think Its because it uses an ID tag…can anyone help. it’s like a page with 5 stories and i need one gallery per story, using the style from the first example.

    kryo
    00:53, April 20th, 2010

  17. 17

    @hyper-sonic: this feature has been requested and is planned. I will also look into your proposed fix for the accordion integration, thanks you very much!

    @kyro: no problem, just remove the #IDs from the stylesheet and use only .CLASSes

    Christoph Schüßler
    08:55, April 20th, 2010

  18. 18

    excellent it works…had to change the # to . in the .js at the bottom too. :)

    kryo
    17:55, April 20th, 2010

  19. 19

    Hello,

    very nice plugin but it is not working with IE7. Do you have any quick fix?

    Thanks,

    Edy
    21:45, April 25th, 2010

  20. 20

    @Edy: It does work in IE7. If you have a found a specific bug, please post it to the bug tracker (https://popeye.16bugs.com/projects/5559/bugs?v=4538) with a more detailed description. Thanks!

    Christoph Schüßler
    08:40, April 26th, 2010

  21. 21

    Thanks for the reply Christoph, I looked also at your demo and is not working, it just opens once and when you resize back the script stops working. It gives and error.

    Maybe it’s just my IE7, fantastic script though, thanks for sharing. I will look at it again carefully and will submit a detailed bug.

    Edy
    15:16, April 26th, 2010

  22. 22

    @Edy: Thanks for checking again. I still can’t recreate the error, everything works fine for me in IE7 (actually IE8 with IE7 compatibility view turned on). If you find out more, please let me know.

    Christoph Schüßler
    15:20, April 26th, 2010

  23. 23

    I am also using ietester http://www.my-debugbar.com/wiki/IETester/HomePage , the tool has always been correct for me. And IE8 works fine with the same tool, so that makes me trust that the problem exists.

    I will check if I have IE7 in my old laptop so I can look directly. Damn IE…

    Edy
    16:29, April 26th, 2010

  24. 24

    Also send me error when running the gallery in Internet Explorer 7. Below is the screenshot with the error.

    http://img690.imageshack.us/img690/249/popeyen.jpg

    Arturo González Rebolledo
    18:52, April 26th, 2010

  25. 25

    this is a ridiculously beautiful plugin. love the new 2.0 incarnation :)

    Oliver Sumpton
    19:20, April 26th, 2010

  26. 26

    @Edy & Arturo: I have found and fixed the IE7 bug. You can either download version 2.0.1 version 2.0.2 from the plugin database or change line 187 to

    $self.css(‘z-index’,null);

    $self.css(‘z-index’,opts.zindex);

    Christoph Schüßler
    19:07, April 27th, 2010

  27. 27

    Great, thanks much…

    Edy
    22:34, April 27th, 2010

  28. 28

    What an extremely elegant styling of Popeye. Ever since html5 and css3 was publicly a bit more well-known, there have been a ton of nice new designs and options/plugins released. Amazing work, and I can’t wait to see where this leads everyone :)

    Joram Oudenaarde
    14:36, April 28th, 2010

  29. 29

    jQuery.popeye was recently featured in the presentation Learning from the best jQuery plugins by Marc Grabanski at the jQuery Conference 2010.

    It’s also been added to Marc’s jQuery plugins toolbox.

    Thanks, Marc!

    Christoph Schüßler
    16:27, April 29th, 2010

  30. 30

    Hi everybody, the WordPress Plugin is finally available. Have a look: http://chrp.es/hello-popeye

    chrp.es
    17:46, Mai 1st, 2010

  31. 31

    Neat plugin, I was looking for something like this.

    However, i would like to have a thumbnail in the small view, and the play an embeded video when it opens. Any thoughts on this would be greatly appreciated!

    Nils Holmstrom
    16:38, Mai 3rd, 2010

  32. 32

    Hi Christoph, first of all you’ve done a very nice gallery plugin. I’ve wanted to

    ask you the same question of Jonathan… whether it can embed flv videos like

    youtube video links?

    Again neat plugin man!!! you the man!!!

    Stephen
    07:56, Mai 5th, 2010

  33. 33

    This does not work in Chrome 4.
    I even signed up for 16 bugs to report this as a bug but I am not allowed (by you?) to do so.

    Tim
    16:57, Mai 5th, 2010

  34. 34

    @Tim: Sorry, there seems to be a problem with 16bugs, I will look into that.

    The plugins works perfectly for me in Chrome 4.1. Could you tell me where exactly you have problems with it?

    Christoph Schüßler
    17:05, Mai 5th, 2010

  35. 35

    @Christoph: http://img534.imageshack.us/i/jquerypopeye.png/ Left is what it looks like in Chrome 4 (See dialog box for detailed version) and right is FF.

    Tim
    17:17, Mai 5th, 2010

  36. 36

    @Tim: Are you using any Adblocking Software or other browser plugins that could cause this problem? Do you get JavaScript errors? I cannot recreate the error here in Chrome…

    Christoph Schüßler
    17:19, Mai 5th, 2010

  37. 37

    @Christoph: Even with all my extensions disabled it still shows up the same way. Plus, the only adblocking I use it through the hosts file, so if it was that FireFox would have had te same errors…
    I’m trying http://browsershots.org/http://dev.herr-schuessler.de/jquery/popeye/demo.html to see if I’m the only one with the problem.

    Tim
    19:05, Mai 5th, 2010

  38. 38

    @Christoph: Ok, so it’s my problem :P Lemme look in to that

    Tim
    19:14, Mai 5th, 2010

  39. 39

    Can’t access bug tracker, so I’ll post here another IE7 problem I had.

    To reference large images, I entered values like this: /folder/folder/file.jpg and not like this http://www.domain.com/folder/folder/file.jpg (like it is in every example on Popeye demo page) and it worked ok in every other browser except IE7 (didn’t test other IEs though). What I found out was that in function $.fn.popeye.showImage preloader.src got value like about:/folder/folder/file.jpg. When I changed a[i].href to $(a[i]).attr(“href”) in lines 300 and 341, IE7 got full URL and started to work again. The problem is that then it doesn’t work in other browsers… it opens the small picture instead. I added browser check there, but I feel that there should be a better way to do it.

    Niko
    14:21, Mai 6th, 2010

  40. 40

    The PopEye is great for image layout on a page.

    I need to change the default size to fit in a page. I can change the width of the index image. How to change the height of the index image? It seems to be in #ppy1 .ppy-imglist li. I, however, can’t see a result after my modification.

    vic
    01:03, Mai 8th, 2010

  41. 41

    The image display jQuery plug-ing is great. It parks image on a corner of its index image. It is much better than lightbox in my opinion.

    I try to customize it so that the size will fit into a page I design. I achieve the larger width. But for some reason, I can’t see the height changed I made. Can someone point me a direction of this modification?

    Thanks.

    vic
    03:08, Mai 11th, 2010

  42. 42

    @vic: You can set the height via the .ppy-stage element.

    Christoph Schüßler
    17:42, Mai 11th, 2010

  43. 43

    I’m trying to dynamically remove one of the photos on the gallery by pressing a button, so I give an ID to every list item and do $(“#” + ID).remove() when the button is clicked but it doesn’t seem to be working, does anyone know a way to accomplish this?

    Thank you and awesome plugin!

    Luis
    07:57, Mai 14th, 2010

  44. 44

    I use an example on my site, but I would like to leave the show without the navigation
    mouse over the image.

    Thank you in advance.

    LOGICIELREFERENCEMENT.COM
    09:49, Mai 15th, 2010

  45. 45

    IE 7 issue when using local vs absolute links to large images. In IE 7 ( IE 8 in compatablity mode) clicking to enlarge the thumbnail will stay at the loading icon, never opening the enlarged image, if the large image link is a local one but works fine if the link is http://yoursite.com/image.jpg. Using you online demo page ( the insect series), I set up two demos, one with local images and one using your absolute image links. You can see the problem in IE 7.

    Demo1

    Demo2

    Mike
    06:18, Juni 2nd, 2010

  46. 46

    Hi, awesome job!!!…. well right now i’m trying to find out how to set up 2 of this slides on one page, using the same to be more specific the example 2, and for some reason i’m not able to see both, it just appear one of them, theres any solution to this problem?

    i appreciated, thank you and congrats!!!!

    Arelli
    10:18, Juni 3rd, 2010

  47. 47

    I am having the same issue in IE7 — the large image never loads. Is there a workaround that you know of? This is a terrific plugin but I need it to work in IE7. Thanks!

    Marg
    03:14, Juni 9th, 2010

  48. 48

    @Mike, Arelli & Marg:

    Thank you very much, the bug has been fixed in the latest release of jQuery.popeye 2.0.4

    Christoph Schüßler
    22:46, Juni 14th, 2010

  49. 49

    Another IE 7 bug. ( I’m a Mac person, but keep finding these debugging a page).
    On your Demo page, using the insect gallery, the caption does not expand to full width when enlarged and is smaller than the “stage” on hover as well in IE 7 (compatibility mode) but fine in IE 8. I’m not sure if this is a CSS issue with ppy-caption or ppy-captionwrap or a JS issue.

    Mike

    Mike
    02:01, Juni 18th, 2010

  50. 50

    Hi Mike, thanks for pointing that out. I wouldn’t really call that a bug. It’s rather a CSS issue, and doesn’t impact on the functionality since the whole Caption is visible. IE7 just crops the Caption area to the content’s width. Anyway, I’ll fix it ;-)

    Christoph Schüßler
    09:54, Juni 18th, 2010

  51. 51

    Hi Christoph

    Awesome plugin, very impressive!

    I’m trying to implement multiple galleries inside divs with “display:hidden” attributes, but I’m running into some problems. It seems as though the fact that the divs are hidden causes the galleries to not initialize properly. Some of them don’t load at all, and others are completely aligned off the screen.

    Have you come across this issue? Any ideas what I can do to make it work?

    RiaanWest
    00:14, Juni 22nd, 2010

  52. 52

    Fantástico!

    Obrigado e parabéns!

    Philip
    04:14, Juli 7th, 2010

  53. 53

    Hi, great plugin, but I too am having an IE7 issue with z-indexing, and it also occurs in IE6. I have multiple popeyes on one page and when i expand one of them, it expands behind the other non-expanded galleries instead of on top, so the full size gallery is covered by the smaller ones. I have tried adjusting the z-index of several elements but have not been able to fix the problem. Could you help? thanks.

    Jason
    01:49, Juli 8th, 2010

  54. 54

    This is a great plug in. I’m using multiple versions on a single page and am wondering what sets the overlap priority. My captions are being overwritten by subsequent examples further down the page. Any ideas for a work-around? You can see the work in progress at:

    http://davej.com/dev

    Any suggestions are welcome.

    dave
    23:42, Juli 9th, 2010

  55. 55

    Hi, I’m reposting about the issue I described in post #54. I’ve changed the z-indexing and it seems to be sorting things out in Firefox and Chrome (on a mac) I’ll test in IE on a PC later.

    Dave
    19:19, Juli 10th, 2010

  56. 56

    Hi, I’ve got a sample site setup using multiple versions of popeye but have discovered a problem. When a user expands and then contracts one of the images, the z-index seems to get reset causing problems with overlapping images. Is there a way to retain the z-index setting?

    Thanks for any suggestions.

    the sample site can be seen at:

    http://davej.com/dev

    dave
    18:26, Juli 11th, 2010

  57. 57

    Is there any plans for a plug in that will work with Moodle?

    Elaine
    20:50, Juli 16th, 2010

  58. 58

    Hello,

    Is it possible to add a border to the pop up window but not have the border on the smaller photo?

    Any help would be great.

    Awesome plug in!

    walter
    21:48, Juli 20th, 2010

  59. 59

    Hello,
    very good job and first of all very useful!

    I woud like to ask you, is there any possibility how to use jQuery.popeye 2.0 on blogger/blogspot?

    Thank you very much for answer and good luck with next work.
    Tom

    TomCernohous
    15:05, Juli 31st, 2010

  60. 60

    I’ve been working on this popeye and really like the look of the thing. I’ve tried to use two of them on a page. but there’s only one showing. I’m using the 2.04 version. I’m quite new to jquery though..
    Is there somebody here that can help me on my way?

    cheers, Jan

    Jan
    09:55, August 8th, 2010

  61. 61

    I’ve managed to do it. Davej thanks for your info. Took a good look at the code you use on your site.

    Love this jquery thing!

    Jan
    06:25, August 10th, 2010

  62. 62

    about the IE7 caption bug, it actually didn’t show whole Caption if you have more words in the caption. even in your demo page, at ie7, if you enlarge the image 2, you can find it eat up half of flickr link and I find out it not a CSS problem. I like it very much and it really useful. Please fix this bug.

    Rick
    21:20, August 10th, 2010

  63. 63

    Has anyone found out how to fix the z-index problem?

    drew
    18:57, August 19th, 2010

  64. 64

    I love Popeye. So glad the newest version fixed a lot of the trouble with IE7.

    I am having problems with my captions in all browsers. The image number changes (e.g. “2 of 4″), but the caption only changes in the enlarged mode, not in the smaller mode. The caption just sits there as the number changes. When enlarged, the caption will also change, and when you shrink back down it will show the proper caption, until you advance to the next image.

    Any ideas where I should look? The HTML for the caption seems to match the demos, and I don’t know enough to mess around in jquery.

    BTW, I am also having a z-index problem in IE7.

    Marg
    19:16, August 24th, 2010

Leave a Reply

You can use these HTML elements in your comment:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>