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!
Hi!, can Jquery Popeye works with WordPress as a wordpress plugin?
Hi Mariangela, thanks for asking. A Worpress plugin is in development and should be released soon.
awesome plugin awesome!!! congrats :)
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: 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.
One of the most creatives plugins I’ve ever seen, congrats!
good job!!
very nice implementation
Really good one. Will try, if you’re ok, to create a Joomla module or plugin…
@wukish: Great, go ahead and leave a link when done!
I do website for a living and this looks great. One question: can I embed video in it as well as photos?
Thanx
Sehr schick, leider zickt die Demoseite wenn man den Google Analytics Kram tollschockt – ähm blockt.
@Mühsam: Thanks, should be fixed now.
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
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
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.
@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
excellent it works…had to change the # to . in the .js at the bottom too. :)
Hello,
very nice plugin but it is not working with IE7. Do you have any quick fix?
Thanks,
@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!
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: 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.
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…
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
this is a ridiculously beautiful plugin. love the new 2.0 incarnation :)
@Edy & Arturo: I have found and fixed the IE7 bug. You can either download
version 2.0.1version 2.0.2 from the plugin database or change line 187 to$self.css(‘z-index’,null);$self.css(‘z-index’,opts.zindex);
Great, thanks much…
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 :)
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!
Hi everybody, the WordPress Plugin is finally available. Have a look: http://chrp.es/hello-popeye
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!
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!!!
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: 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: 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: 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: 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.
@Christoph: Ok, so it’s my problem :P Lemme look in to that
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.
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.
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: You can set the height via the .ppy-stage element.
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!
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.
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
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!!!!
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!
@Mike, Arelli & Marg:
Thank you very much, the bug has been fixed in the latest release of jQuery.popeye 2.0.4
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
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 ;-)