jQuery.popeye – an inline lightbox alternative
Writing the history of single-page image galleries on the web, one could start like this:
In the beginning, there was nothing. And the Developer said: “Let there be pop-ups!” And the Users saw that pop-ups were bad…
Then came Lightbox. Finally, an unobtrusive script allowed to display enlarged versions of thumbnail images embedded in web pages without leaving that web page or breaking the layout. The “simple” solution was to add a semi-transparent overlay to the page, on which the enlarged image is centered.
Since then, we’ve seen a ton of similar scripts used on an ever-increasing number of websites.
While at first, I, like everyone else, was really enthusiastic about this technique, I have come to see some of the downsides of a lightbox-ish image presentation:
- Lightboxes are usually not consistent with the look & feel of the rest of the website, and
- they still feel like a kind of pop-up, since the image leaves the layer of the web page and opens up a new layer.
Besides – I’m getting tired of seeing the same effect, the same UI controls over and over…
So, while working on a client project in which I at first used a jQuery Lightbox plugin, I ended up dissatisfied with the outcome. I had gone through great length to stir up a consistent look & feel, just to see it vanish under the lightbox overlay.
I wanted something more integrated in the flow of the web page – a box with a small preview image with caption, the possibility to flip through an array of more thumbnails and, of course, to show an enlarged version, all in one place. Lightbox offers that. Moreover, I wanted the box to stay anchored to the page layout and not hovering above it disconnectedly. The way to achieve this was writing a script which would fix one corner of the enlarged image to the exact spot where the thumbnail had been.
After toying around for a while, I decided to put the final outcome into a proper jQuery plugin and see, what other people (you!) think. May jQuery.popeye be of use!
Behavior
The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.
The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).
This behaviour can be overriden in the plugin options.
I have set up a demo page which best shows the behavior of jQuery.popeye.
Usage
jQuery.popeye degrades gracefully into a scrollable list of thumbnails which link to an enlarged version. The HTML-setup should look like this:
- ...
Once the plugin has been included in your web page, the popeye(es) can be easily created with the following command:
$(document).ready(function () {
$('.popeye').popeye();
});
Of course, multiple popeyees can be used together on a single page.
Customization
jQuery.popeye supports a wide range of options. They are, in detail:
| Option | Type | Default | Description |
|---|---|---|---|
stageW |
string | n/a | override width of compact image stage (e.g. '200px') |
stageH |
string | n/a | override height of compact image stage (e.g. '200px') |
jclass |
string | 'popeye-hasjs' |
class to be applied to popeye-box when the browser has activated JavaScript (to overwrite fallback styling) |
eclass |
string | 'popeye-haspopped' |
class to be applied to enlarged popeye-box |
lclass |
string | 'popeye-isloading' |
class to be applied to stage while loading image |
direction |
string | 'left' |
direction that popeye-box opens, can be 'left' or 'right' |
duration |
integer | 400 |
duration of transitional effect when enlarging or closing the box |
easing |
string | 'swing' |
easing type, can be 'swing', 'linear' or any of jQuery Easing Plugin types (Plugin required) |
nlabel |
string | 'next' |
label for next button |
plabel |
string | 'previous' |
label for previous button |
oflabel |
string | 'of' |
label for image count text (e.g. 1 of 14) |
blabel |
string | 'enlarge' |
label for enlarge button |
clabel |
string | 'Click to close' |
tooltip on enlarged image (click image to close) |
Update: These are the options for jQuery.popeye 0.2. The options for the latest version have changed!
To overwrite the default parameters, you can use the following code:
var options = {
direction: 'right',
duration: 230,
stageW: '200px',
stageH: '240px'
}
$('.popeye').popeye(options);
The plugin comes with the mandatory css-file jquery.popeye.css which shouldn’t be altered. Additionally, I have included a second, customizable CSS-file with an example style for you to build upon.
I repeat…
- Get the latest version of jQuery,
- (optional) get the jQuery Easing Plugin,
- see it in action on the demo page,
- get the plugin:
Download jQuery.popeye
from the jQuery Plugin Repository
Considerations
There are still some issues with the first release of jQuery.popeye which I hope to resolve in future versions. They mainly concern the size of the enlarged box (the whole image should stay visible) and the gallery controls (will introduce proper controls to enlarged box).
But for now, your feedback, bug reports, improvements and feature requests are very welcome in the comment section.
“I yam what I yam!” — Popeye
Update March 2009
A new version of jQuery.popeye has been released, addressing many of the below mentioned bugs and featuring a better user interface and interaction behaviour.
hey chris,
geile sache. hoffe, wir machen nochmal ein projekt zusammen, wo du dit dann einbauen kannst ;)
rock on!
jo.
jo
11:30, November 17th, 2008
If i can get this to “look good” on IE7, i’ll surely use this. Nice job.
Miguel Benevides
10:47, November 21st, 2008
Awesome plugin, man. Thanks! I’m also tired of Lightbox effects all over the place, great job!
Davi Ferreira
14:18, November 21st, 2008
Sorry, the demo doesn’t work in Firefox 2.0.0.14 on FC7. I can’t tell what it’s supposed to do on the demo page.
Ben Burleson
15:43, November 21st, 2008
who really gives a fuck about FC7… go stick your head up your arse Ben Bugger-ur-son
siftee
16:22, November 21st, 2008
great work !
riper
16:32, November 21st, 2008
This looks awesome! I have never been a fan of lightboxes because like you said it’s just like a popup, distracting to the user as well.
Nick
17:12, November 21st, 2008
Any chance you’ll add an option to display more than one image on the initial load, e.g. a mini-gallery?
Second, the demo page shows the unstyled list before a flash and then the proper appearance. I have a feeling I’ve seen the solution for this before but can’t quite remember it, do you know how?
Very cool tool!
BillSaysThis
17:56, November 21st, 2008
Thanks everyone for the encouraging comments!
@Ben Burleson: Sorry, but I had to look up what FC7 even meant. Since I have no chance to test the behavior on that OS, maybe you can tell me what kind of errors get thrown?
@BillSaysThis: That’s an option I hadn’t thought of. Though this would really call for a separate plugin. When I get the time, I will consider writing that. Second – your right – that Flash of unstyled content also bothered me, and now that you said it, I found this (http://www.learningjquery.com/2008/10/1-awesome-way-to-avoid-the-not-so-excellent-flash-of-amazing-unstyled-content) in my bookmarks. The next version of jQuery.popeye will include it!
Christoph Schüßler
19:47, November 21st, 2008
Not that it’s too different from Lightbox-like scripts, but it’s a _great_ way to show pictures on the page. I’m looking forward to the new version. Yes, the flash of unstyled content was the first thing I noticed (DSL connection).
What’s somewhat distracting to me: before the zoom, the picture blacks out and gets replaced by the animated loader GIF. I think the zoom should rather go seemless from the actual thumb to the large pic (just overlay the pic with the loader gif). This would feel much more natual.
Another glitch: upon reloading the demo, the second image was sized improperly. Sometimes the box was about 600×50px. Probably this has to do with getting the images from Flickr. I didn’t experience that locally…
And a feature suggestion: add a way to display captions for zoomed images.
Andy
23:28, November 21st, 2008
@andy: thanks for the suggestions.
In the next version, I will add caption and controls to the enlarged image.
Concerning the loading graphic: You are right, it would fell more natural and smooth. But it would require the plugin to preload the enlarged images. I have opted against that out of consideration for the project it was originally developed for (which has to function in the low-bandwidth-environment of Peru). Therefore, a direct transition is not possible and the user has to be alerted to the fact that something is really happening after he clicks the enlarge button. But I will try to include optional preloading in the upcoming release.
Christoph Schüßler
18:43, November 22nd, 2008
There’s a way to adapt popeye for create gallerys in Wordpress?
Rafas
19:01, November 22nd, 2008
@Christoph: thanks for the answer.
What I meant was the following: after the user clicks a thumb, you could leave that thumb in view and simply place “Loading…” (or the loading GIF) over the actual thumb. Then after the big image is loaded, you could zoom that one up… I don’t know about the performance but this method would feel much more natural (from an UI point of view).
On preloading: I think such an option really would add a lot to the script. Especially when a page only contains one or two images to be zoomed. That’s no big deal to load them in the background.
Andy
01:38, November 23rd, 2008
ps: with “performance” I ment the JS performance in the browser…
Andy
01:40, November 23rd, 2008
great work…
Jhon Doe
13:28, November 23rd, 2008
jQuery.popeye – An Inline Image Gallery…
jQuery plugin that transforms an unoredered list of images into a image gallery. The box has controls, previous/next, enlarge and info about the current image.
……
Visual-Blast Media
13:37, November 23rd, 2008
what about ie7?
Lyrics words
16:49, November 23rd, 2008
I don’t know what this is supposed to do, but it doesn’t seem to work in Webkit. If it is working, I don’t like it. Sorry.
Jasper
18:40, November 23rd, 2008
@Rafas: There’s no special Wordpress plugin so far, but it’s just as easy to implement in any theme as every other JavaScript.
@Andy: Thanks again for the interesting suggestion. I will try that out!
@Lyrics words: Should work fine in IE7. Are you experiencing problems?
@Jasper: Thanks for the informed comment.
Christoph Schüßler
18:55, November 23rd, 2008
good work,
Thank you…
Fatih CERITLI
18:57, November 23rd, 2008
doesn’t work with safari.
schnuck
21:33, November 23rd, 2008
@schnuck: In Windows Safari 3.2 (sorry, but that’s the only way I can test it), it works as intended. Since Win Safari also builds on Webkit, it should render and work the same as on Mac…?! Which version are you using and what’s the problem?
Christoph Schüßler
21:37, November 23rd, 2008
You’ve fixed it in Webkit now – I like it! It’s a shame that it creates scrollbars on the caption text, but I guess there’s no way around that.
I don’t know whether the CSS is doing this or the JS, but in Minefield, the condensed one looks a bit weird:
http://skitch.com/echohelloworld/hq6b/jquery.popeye-in-minefield
Jasper
21:45, November 23rd, 2008
Major weakness in my opinion (just looked at the demo page): for about 1 or 2 seconds it showed very ugly frames (divs with scrollbars before the JS would handle the image set)
Ozh
22:22, November 23rd, 2008
@Jasper: Didn’t fix it, wasn’t broken ;-) Will look into the issue with the upcoming FF.
@Ozh: Your right. See comments 8 and 9.
Christoph Schüßler
00:03, November 24th, 2008
great !! i hope that some webmaster implement this in a wordpress template with php interaction :)
congrats!
dlv
02:24, November 24th, 2008
hi chris – thanks, it’s now fixed on safari 3.2 mac and works as advertised!
schnuck
08:54, November 24th, 2008
Good job thinking outside the lightbox (hush, I know… I didn’t have my coffee yet)
I’m using Opera 9.62 (Win) and I noticed a (caching?) issue. To reproduce do the following in Opera (9.62 and maybe others as well).
Open up the demo page.
Click an image for full view
Close it again
Click it again to open up in full view again.
The loading image will now show up indefenitly.
I would guess the plugin is waiting for some “loaded” event that is not happening because the image is already cached or something similar.
boersnoes
09:16, November 24th, 2008
Awesome, but can it be used to display blocks of 10 images ??
This could give the plugin a better way to display the results of a search, for example…
pinyeiro
10:07, November 24th, 2008
Really really nice idea…
When I had my very first play with it, it seemed more natural that clicking anywhere in the browser window should cause the ’shrinkback()’ event not clicking on the image.
I think you should change it so that hovering over the image you get buttons so you can look through the ‘mini gallery’ in expanded mode, and clicking anywhere in the browser window will cause ’shrinkback()’
V nice though will use this sometime!!
Mark
10:28, November 24th, 2008
You should check the demo page with an iPhone: in the thumbnail view images are not shown… Seems that images height collapses… Don’t know if it’s the same with the desktop version of Safari… Anyway wonderful script ;-)
Andrea Zilio
10:56, November 24th, 2008
I confirm it works fine with safari and opera on mac, but not with iphone nor IE 5.5 for mac.
BTW, a fantastic alternative to lightbox and its clones. Thank you!
Luca
14:53, November 24th, 2008
Does anyone actually even cater for IE5.5 Mac anymore? Microsoft don’t support it, so why should you?!
Jasper
14:57, November 24th, 2008
Really nice work. I have grown to be kind of annoyed by lightboxes. They’re cool, but often over used. This is a great alternative that is much less obstusive for the user experience.
Andrew Meyer
17:00, November 24th, 2008
Hello very nice script, I’ll added it to ImagePut Web Album maker
http://www.vidroid.com/imageput/templates/
Bog Imp
19:44, November 24th, 2008
Re: post 34&35
Just in case you don’t have an iPhone/iPod – here’s a couple of photos of the page on my iPod Touch:
First box – http://i37.tinypic.com/9gvj13.jpg
Second box – http://i34.tinypic.com/4hwnyr.jpg
Michael Wincott
22:54, November 24th, 2008
Re: #21,#22
it doesn’t work in safari 3.1.2 (win xp sp2) if “pop-ups unterdrücken” is checked (sorry, i don’t now the english menu item, could be “suppress pop-ups”)
heiner
00:28, November 25th, 2008
re: #23 “I don’t know whether the CSS is doing this or the JS, but in Minefield, the condensed one looks a bit weird: http://skitch.com/echohelloworld/hq6b/jquery.popeye-in-minefield”
I experienced the same thing on Fx 3.04 on Vista – but not on every reload (see comment #10).
I think the problem is with the delay in getting the images from Flickr. I didn’t see this locally.
Andy
01:17, November 25th, 2008
Wow, I’m really positively surprised about the great interest in my little script. I’ll just keep collecting more of your input here which will all be considered for the next release. Just a few things:
IE5.5 will definitely NOT be supported (not on Win, even less on Mac ;-). It had it’s (bad) time, now let’s get over it.
I hope to become part of the elite iPhone-carrying crowd as soon as January and will start developing and checking for errors for it then.
The Minefield bugs will of course be resolved in time. Since the images are not on the flickr server but on mine, it can’t be an issue with “getting them”, but should still be due to the loading lag from my server.
Please keep the good advice and help coming, it’s always appreciated!
Christoph Schüßler
01:49, November 25th, 2008
Oh, I forgot, Opera will of course be supported…
Christoph Schüßler
01:51, November 25th, 2008
It was great if you have the previous next in the full screen also.. as in the original light box.
Anz
07:19, November 25th, 2008
It was just to let you know, I don’t absolutely care about IE 5.5 (and I would really like to ignore also IE 6 for PC, but it’s not possible yet).
Luca
09:43, November 25th, 2008
is it possible to center the “enlarge effect”?
like lightbox…
good job anyway!
wilfried
10:47, November 25th, 2008
I modified the CSS values and the enlarged image is centered, but the transition is not as I want
oh and is it possible to replace the caption on the right (or left) of the thumbnail?
wilfried
10:58, November 25th, 2008
re: “Since the images are not on the flickr server but on mine, it can’t be an issue with “getting them”, but should still be due to the loading lag from my server.”
Ok, I wasn’t checking, just thought you embedded them from Flickr. Even if they are on you server, this is what I’m experiencing from time to time (Fx 3.04 on Vista like I said):
http://i34.tinypic.com/o9r1b6.png
Andy
21:06, November 25th, 2008
A really great jquery plugin dude – many thanks for sharing with us. :)
I use 5 popeyes on one page – looks phantastic.
But often on initial load of the page no thumbnails are shown, or just a small pice of the first image. :-/
(the images are all on my own server, same effect as Andy has)
If this happens I have to reload (not shift+reload) the page. Testet with FF2, FF3 under linux and XP – all the same.
Is there an explanation for this, what can I do?
Many thanks
Thorsten
Thorsten Strusch
12:38, November 26th, 2008
I will look into the caching and loading issues as soon as possible. If someone comes up with a bug-fix in the meantime, please post it here. Thanks!
Christoph Schüßler
02:58, November 27th, 2008
Is there anyway it can work as a conveyor belt sort of a sideshow? Where it moves from left to right by itself.
Surao
09:57, November 28th, 2008
hi christoph,
nettes script. find ich gut. was ich ein bisschen vermisse, ist eine slideshow-funktion. so autoplay und so. wäre cool für die nächste version.
viel spaß weiterhin!
marcel
11:48, November 28th, 2008
will this work with video?
adam
06:01, Dezember 3rd, 2008
It seems that the scripts does not get initialized. I just get the images with a scrollbar and when I click the image it opens up in a new window. The navigation of the images does not show nor the text of the alt-tag.
Hopefully there´s an easy solution for this.
Thank you
Peppe
10:32, Dezember 8th, 2008
Hi there!
It works in Safari on Mac, but in Camino it doesn’t work – don’t know if it can be fixed?
Peter Steen Høgenhaug
22:46, Dezember 8th, 2008
Interesting, but doesn’t work properly in Firefox 3.1 B2 or Opera 10 A1 – the problems are visually obvious.
David
01:14, Dezember 9th, 2008
Thanks, but as buggy as hell in Internet Explorer
andy
08:19, Dezember 9th, 2008
Hi There,
This looks very good and something I will consider using the the future, however; it doesn’t work with Google Chorme :(
Cheers
Stephen
Stephen Hill
10:39, Dezember 9th, 2008
Again, thanks to all for your comments. There will be a new release coming January, I hope, which will address all the bugs you have mentioned and also feature some new skins and interface features. Untill then, I will keep reading your comments here, but as I´ll be traveling, won´t have time to answer them.
Christoph Schüßler
15:23, Dezember 9th, 2008
Very Great Plugin, but if u open an image, close it and open it again without navigating through, only the preloader is visible, the image doesn’t load again.
Juergen
15:28, Dezember 9th, 2008
Wow, großartig! Ich denke gut 50% aller Projekte die ich bislang mit ner lightbox oder lightbox-Alternative versehen hab hätten von diesem Script viel mehr profitiert!
Vielen Dank für das tolle Plugin, definitiv ein must-have und endlich mal eine gute und praktische Umsetzung des lightbox-trends!
Kristof
18:07, Dezember 9th, 2008
Very great work, nice to use in my projects, but if you open an image close an open it again, the image doesnt load again :( its a bug?
Rodrigo
15:10, Dezember 14th, 2008
Good job, nice tool!
Many thanks from Italy, I’ll be waiting the next release with the fixed bugs on Opera and IE.
=)
Riccardo
15:37, Dezember 14th, 2008
Found your link from webappers.com, and withoutlooking into the demopage to much at first glance it looks promising. However, as a programmer, there are issues here which need to be taken care of before really doing anything with this script.
First of all there is atleast a major bug in IE7, since this after all is THE browser of choice statistically I see no reason in checking in other browsers. As a few mention here, clicking the same image twize and you end up in a preloading limbo. This bug renders your plugin usesless, however a great proof of concept. I believe you should patch this one ASAP unless you want alot of users losing interest in you, getting burned on using your plugin… Just some advice!
On some more useful comments from my perspective I would love to see the following:
- A smarter sollution for CSS or something, to prevent that jumpy feeling on your first visit of the page. Say BMW should use the plugin on their page, I would only guess this is minimum requirement
- What’s up with those scrollbars? While it is nice that your plugin atleast handles larger text without exploding, your examples would look so much better by not having the scrollbars.
- When the image is popped, clicking anywhere should be default behaviour to close the image. After all, you do not want to keep surfing whith a huge image hanging all over the page.
- Image captions. The enlarged image should be able to have a HTML section bottom/top/left/right of it. Being able to choose this with something like would be great.
- Does it handle video? Not a requirement, however nice to know if you want to go for it or not.
- Is your plugin tested against pulldown menus? (iframe trick)
Other than that, great proof of concept. Looks promising – keep it up!
Kim Steinhaug
01:35, Dezember 16th, 2008
I like your approach and would like to contribute some code. It would be useful if you could post (or drop me a line) a timeline of which issues/features you’ll address and when, so that we don’t end up doing the same things.
Cheers
Nicolas
10:15, Dezember 16th, 2008
This is excellent work. Judging by the comments I don’t think it’s quite ready for my commercial projects yet, but I’ve bookmarked you and will be eagerly awaiting future releases.
Meanwhile, I’ll have fun with it in my personal projects.
A small note: your chosen font size for this page is very small – I had to increase twice to read comfortably. A slightly larger and clearer font would be a great move (and preferably not one of these new horrible Microsoft Vista ones that have sub-pixel hinting ;).
Andy Towler
10:34, Dezember 16th, 2008
Beautiful work, these are the kinds of widgets that people should be making! I can definitely see this being useful on shopping websites, where every product page has a small image that can then be enlarged – with this, enlarging the picture does not require loading a new page, and multiple views can be presented!
Montoya
15:06, Dezember 16th, 2008
Great plugin but unless you can fix for IE7 useless for practical deployment (clicking on the thumbnail provides only loading graphic).
Andy
17:15, Dezember 16th, 2008
Hi there,
Great script! Here’s the fix for the caching issue in IE7, IE8 and Opera ;-) It seems that the onload event for the preloader is attached AFTER the preloader src is set. IE and Opera load the image from the cache quickly and before the event is attached. To make the long story short – find the following code:
var preloader = new Image();
preloader.src = im.large[i];
// once image has loadded…
preloader.onload = function()
{
………….
};
and change it to:
var preloader = new Image();
// once image has loadded…
preloader.onload = function()
{
………….
};
preloader.src = im.large[i];
Emil
15:17, Dezember 17th, 2008
Right on, we’re currently using Lightbox, however, I’ll talk to the guys about switching over. Thanks.
real estate postcards dude
03:43, Dezember 20th, 2008
Wonderful idea and the implementation is really neat, congrats.
Some comments:
- is there a way to not hide the controls when the image is maximezed ? If not, it really should be possible.
- keyboard navigation for next/previous and escape to close the full sized image could be a really nice and subtle complement
h3
20:51, Dezember 25th, 2008
Hello.
I’m trying to figure how to modify the CSS but i’ve some troubles with the enlargement one.
When I press “Enlarge” it fits de large image moving down other divs that I have in the same place, and when I click to select another, the layout gets all messed up.
here are some pics. I’m testing on my pc so, no place to link. Sorry about that.
1.- Just loaded: http://img227.imageshack.us/my.php?image=snap0076tl0.jpg
2.- Clicked Enlarge: http://img71.imageshack.us/my.php?image=snap0077xt6.jpg
3.- When i click to go back to the thumbpic: http://img71.imageshack.us/my.php?image=snap0078tg5.jpg
You can see the div got all messed up. I’m not a CSS expert so i guess there’s something odd about the way the layout is formed. But till now i can’t figure out what’s wrong.
I need your help. Hope to hear from any of you soon.
Have a happy new year.
Bye!
Greetings from Chile
Scyfox
23:50, Dezember 29th, 2008
Great job, Christoph Schüßler….I don’t know how to express my earnest appreaciation. I have searched this kind of advance jquery script for my photo gallery quite a long time already. I found some advance jquery before, but those script very hard to implement, somemore the function can not satisfied my requirement. But your one is different. I can really say that your script is the most easiest to understand and implement (for me, because i am a noob). You are amazing. To Emil, thanks for your fix for IE7, IE8 and Opera. Keep it up! (Pls forgive for my poor english.)
Hasley
04:04, Dezember 30th, 2008
Hi all,
I was really trying to look for a solution among the comments..but I did not really understand how can it works for you with all the others browser..
For me it only works with FF … :S
is there a fix I should apply?! (to css maybe?)
this is my test-page: http://www.eyesofrome.com/tour_vatican.php
what’s wrong?!
(it tried both stiles given with the plugin)
adedip
15:32, Dezember 30th, 2008
@adedip: I had the same issue before.
If you load dynamic pictures, you must give the width and height of each one in the tag. So that way the jquery script can translate the values and set the CSS properly.
Hope it works!
Silla!
scyfox
22:50, Dezember 30th, 2008
@ sciyfox: thx for replying
do u mean like this:
this solution solved partially the problem.. still have probs with IE6 (it keeps the box width now..but doesn’t show picturs) and with IE7 (it kind of work..but does strange effects on popups..)
any clue? (check the page link above to understand what I’m saying)
thanks a lot anyway to you all for making this works
happy new year!
adedip
13:39, Dezember 31st, 2008
the code part went hidden..or not parsed..well just look at the linked page code:
http://www.eyesofrome.com/tour_vatican.php
adedip
13:40, Dezember 31st, 2008
Hello again.
Sadly i had to switch to Thickbox. I Needed to load full subpages instead of just pictures.
Anyway, to keep with the adedip issue:
try this:
# var options = {
# direction: ‘left’,
# $(’.popeye’).popeye(options);
in the options.
If you have issues with IE, maybe you should use CSS hacks to make it work.
HAve a nice 2009 too!
Scyfox
15:50, Januar 5th, 2009
Can we have pop out lightbox to load full subpages instead of just pictures? As a user’s view, i prefer lightbox to view all the images. This method more efficient and user friendly.
Gary
16:40, Januar 5th, 2009
@ Scyfox
so..what about keeping popeye as it is just changing the popus into something like lightbox or thickbox..taking off the visual layer effect around the pic popped up? It might solve the problems…
thanks anyway for your job man! ;)
adedip
17:11, Januar 5th, 2009
I like it. Great plugin, it reminds me of these, except better:
- http://highslide.com/
- http://www.cabel.name/2008/02/fancyzoom-10.html
Adrian
13:37, Januar 13th, 2009
wow, lot’s of comments. I just returned from the mexican jungle, deserts and mountains and will be reading them all soon. Thanks!
Christoph Schüßler
20:18, Januar 13th, 2009
@adedip
Looks like it was my mistake. I forgot to put the wmode parameter to the flash object, so now it loads. But still doesn’t fit my needs since i ‘ve to display a full html page and not just images.
Anyway at least i figure out what was wrong.
Good to know that you came back ok, Chris.
Silla!
scyfox
21:36, Januar 15th, 2009
“A small step for men, a big step for the world” .. :D
that might be a solution anyway (at least for know)
just let us know when u’ll release the latest version ;) thx for your work!
adedip
11:07, Januar 16th, 2009
Love it! I’ve been so tired of the everyday lightbox and this fits my need.
Any way to use the popeye on a single image and not an entire gallery and hide/disable the navigation controls?
Any way to call the script from an ?
kMoo
11:45, Januar 20th, 2009
Oops…the last question is asking is it can be called using an a href tag.
kMoo
11:47, Januar 20th, 2009
This is beautiful, simply!
Thanks for writing such a nice script.
Zaigham
19:40, Januar 22nd, 2009
Great plugin. Just what I was needing for a small project.
One thing I noticed though: If you have 2 popeyes on a page (for example, side by side) and the 1st image (say on the left) expands over the other popeye, the thumbnail from the 2nd popeye stays on top of the enlarged image.
This happens every time in FF3.0.5 (Win). In Safari 3 (Win), you have to enlarge the 2nd image, then click the 1st thumbnail before it triggers the issue.
IE6 & 7, Opera 9 and FF 3.0.5 (Linux/Ubuntu) all work properly.
Any ideas?
Shawn S
21:39, Januar 23rd, 2009
Looks great, but its too buugy to me. IneternetExploter is used by too much people, so i cant use this plugin at my website! And then there are some smaller bugs (see #85)
Not perfect at all, but maybee you will work on?
Hashishin
22:21, Januar 23rd, 2009
First off, thanks for this ‘alternative’
I would like to play devil’s advocate a bit. I will enjoy utilizing this, but I don’t believe Lightbox, or it’s many clones, is/are a ‘bad’ thing.
I don’t think Lightbox is a distraction our users (should Lightbox actually be needed) but rather it provides a way for the user to focus on the image/artwork for which the developer decided Lightbox was the best solution to portray.
It provides a venue similar to a museum or art-gallery’s layout of pictures in clean environs.
Again, thanks for your script(s) and your continued support of this valuable alternative.
Michael
17:47, Januar 25th, 2009
I think this is a great solution. Thanks!
Is there a way to use a flickr stream instead of an ? I know flickr uses an but I’m not sure how to incorporate it.
Thanks again!
James
15:30, Januar 28th, 2009
you don’t like internet explorer 6 do you?
style 2 for popeye and your blog too, they don’t seem to be ok if using IE6.
Know what? You are right!
(great work, I’m using it and I will credit you)
bye
filippo
13:10, Februar 2nd, 2009
Hello. Lovely work but I was wondering if anyone knows how to force images to show at a given size. I don’t have the luxury of having a thumbnail version of each image and seeing as the script actually shows the thumbs as a background image, my images end up too big for the stage!
Neil
10:38, Februar 12th, 2009
Hi,
It looks real great, exactly what I need for the website I’m building…..
But….
I also get this weird ‘condensed’ view. In Safari 3.2.1. en FF 3.0.6. ( I use a mac, but can view the example correct… so don’t see what the issue is …)
I tried to grab any solutions for this form the forum but can’t find them. Does anyone has found a solution to this?
I do see some ’script’ examples, that I could change but I’m not sure where and for what purpose…. :S Can’t distinguish this from the posts..
anybody any insights on this?
(see the link of work in progress attached)
Judith
17:49, Februar 12th, 2009
sorry the link I referred to is in the last post was:
http://www.christianegossel.nl/indevelopment/html/popeye.html
thanks
Judith
17:52, Februar 12th, 2009
@everyone: I’m sorry I still haven’t come up with a bugfix. It was planed for End of Jan, but I was too busy and still am. Hope to get some work onpopeye done in March…
@filipo: Right on! On my personal site, I really don’t care about those 0,6% still using IE6.
Christoph Schüßler
19:07, Februar 12th, 2009
Hey guys, if you’re still getting the small thumbnail issue on page refresh/reload, add some rules to your CSS to force the widths into displaying correctly (change the ones below to the width & height you require.
.popeye-stage {
height:363px !important;
width:598px !important;
}
same goes for .popeye-tools and .popeye-cap.
Hope it helps,
-Jordan
Jordan Moore
11:56, Februar 24th, 2009
You indicate explicitly to use the latest version of jquery. My experience is that it works fine in 1.2.6, but not in the latest (1.3.2). Can you confirm?
Also some IE 7 quirks, but it’s a great piece of work, thanks for sharing!
Danke Schön!
ronald
14:15, Februar 27th, 2009
I’ve read comments and it seems a feature request I’m thinking about is not in the list :
When the image is in full size, it would be great to be able to naviguate in zoom state images with arrow key. The only way I found to view all images in full size is to click on the image ( zoom ), click another time ( unzoom ), click on the arrow right ( image change ), click on image again (zoom), etc… Maybe I haven’t found the way to achieve this. If such a feature doesn’t exists I realy think it would be great.
regisg
19:18, März 3rd, 2009
I have been trying out lots of different photo plugins recently. This is definitely one of my favourites so far – I like the image being displayed within the page.
oji-san
02:28, März 9th, 2009
Does someone know if it is possible to display a short text under the enlarged images and how to do it?
Ah_ne
12:56, März 12th, 2009
Hello guys, first of all, congrats for this plugin, its great.
Im trying to validate it according to w3c rules but the images has no ‘/>’ close tag, just the ‘>’, does any one know how to insert it?
thx
junior
13:46, März 13th, 2009
hi
great plugin, thanks
i made 2 changes for it: added ability to move next/prev large image, not only preview. also fixed bug, when in ie we cant enlarge same image twice.
if need it – primpil@gmail.com
regards
max
16:44, März 13th, 2009
possible to work with flickr ?
i mean, i retrieve my images from flickr, then load it to popeye.
i tried using jquery.flickr-1.0.js but cant get it to work.
khalil
13:28, März 22nd, 2009
I’m having big problems getting multiple popeyes on a single page. It’s probably my fault. styling.css is set up with #popeye1, and I want them all to look that way, but I can’t give them all the same ID, so I change #popeye1 to .popeye1 and give all my popeyes the same class name. When I load the page, they all disappear!
jtnatoli
15:44, März 25th, 2009
To have multiple popeyes on the same page, look at the example/demo. You’ll need to make a #popeye2 or 3 or whatever you want to call it. You will also have to make sure the styles for the additional popeyes are defined in your css styles.
Note about multiple popeyes: Make sure that the 2 (or 3 or whatever) popeyes aren’t next to each other where the expanded images will overlap another popeye — it causes weird overlapping results. (see my comment #85)
Shawn S
18:23, März 25th, 2009
@junior: I would really be surprised if the w3c-validator would let you validate js-generated code. Try fixing your own code first ;-)
@khalil: It works with any list of images, no matter what the source is. They just have to be in the correct format as an unordered list.
@jtnatoli: You don’t need to do the styling via IDs if you want to use one style only. Just apply the rules to the class .popeye and subsequent classes.
@all: I started working on an update, so all the above mentioned bugs schuold be fixed soon. The update will also feature a revised user interface and base style.
Christoph Schüßler
19:04, März 25th, 2009
I finally managed to write an improved version. Read about it at http://herr-schuessler.de/blog/jquery-popeye-1-0-released/. Please leave your comments in that post. This one is now closed for comments.
Christoph Schüßler
13:01, März 29th, 2009