Lightbox application for Yahoo User Interface 2007 09 27

Tags for this article

Comments

Mike2008 09 19An excellent script. I am the developer of a Lightbox skin for JAlbum, an open source gallery software that creates personalized web albums ( http://jalbum.net). I recently integrated your PhotoViewer script into the skin, LightBox 2. It has had almost 95,000 downloads in the last 2 years. I of course, have included a link to your script page. I am looking forward to the next version. Here is a link to the skin:http://jalbum.net/skins/skin/LightBox 2Mike

Rod B2008 09 16Any chance of improving handling for large images? If the image is larger than the viewport with absolute positioning things get pretty messy. A great solution is the one Shadowbox uses (see http://mjijackson.com/shadowbox/ under "Draggable"). I would love that functionality in PhotoViewer.

Tales Thaler2008 08 09Hi, I'm very glad to meet your photoviewer project. I just want to know how can I put a link to the flickr page of this image. Thank you.

Andrew Parker2008 08 05Really great work - very nice looking! Just wondering what the best way to mod this so that I can use a Media RSS from any source would be? Is it best to modify the parsing of the standard "remote XML" or re-work the Flickr RSS so that the URL is constructed differently? I'm not a javascript expert so if anyone has tips (or better still a ready-made solution) it would be much appreciated!

champ2008 07 28 hii can't maintain ratio of images in photoViewer slideshow when the width and height of images larger than moniter screen When i calculate new width and height of the first imagefor example/*newWidth is result of calculate function*/showcaseImage.width=newWidth; showcaseImage.height=newHeight;all images in photoViewer will remember this width and this height can you help me !!thank

punkymunky2008 07 09discovered some opacity weirdness in FF3 on win Vista but was able to get it working gain with the following:.photoViewer-mask{padding:0;margin:0;position:absolute;top:0;left:0;background-color:#666;background:rgba(102, 102, 102, .5);opacity:0.5;filter:alpha(opacity=90);}hope this helps.

Jim Lynch2008 06 22Very nice. However I am running Firefox 3 that came with Ubuntu 8.04 and if the picture is larger than the window, I cannot scroll down to press the next or previous buttons. If I grab the slider and pull it down the picture shakes up and down vertically and comes to rest with the top of the picture still displayed. In the case of the demo I was able to over come this with the F11 key which allowed me to see the whole picture, however I don't think this is desirable behavior.

john kolb2008 06 15recently received a picture viewer . installed the hardware three times, every time says successful, try to open and i get a message "photo viewer not found. program terminated. would really like to use this. my computer is capable of running this hardware. any advice would be appreciated.

Eduardo Montoya2008 05 29it would be nice to start the show even if not all images have been already downloaded.

Steffen Pøhner2008 05 29This looks promising for what I want to do. Unfortunately I'm not the greatest javascript expert in the world. It would be great if there was a forum for PhotoViewer for discussion on implementation and so on.

David Dorward2008 04 24This looks like a good effort, but it has a few issues (some of which are common to most implementations of light box like things - and it would be nice if there was one which didn't have those limitations). I live in hope of one day a lightbox clone appearing which I can happily recommend to people :)* Extracting the zip file creates a folder called yui. This may conflict with an existing YUI package and is unexpected given the file name of the zip file.* There is no clue as the license this is distributed under until you look at the source code. It would be nice to have it mentioned in the documentation (and a note by the download link on the homepage)* Uses a global called lib. I worry that this might collide with other scripts too easily. Could you lock the script up using in an anonymous function? function(){/* All of photoviewer */}();* Nothing is done to prevent the focus moving to elements covered up by the box. This means that keyboard users can get lost. * The page URI doesn't change when a link is followed to the box. By adding a fragment identifier (#foo) specific photos could be bookmarked* The close button is an ASCII Art letter 'X', an image would be better.

Rui2008 04 10Hi, i´ve tested and re-tested 30 times and... it does works locally but on my webserver doesn´t.Why ??Tested on FF, IE, Opera.Regards,

Rui2008 04 10Hi, i´ve tested and re-tested 30 times and... it does works locally but on my webserver doesn´t.Why ??Tested on FF, IE, Opera.Regards,

Abe2008 04 08I cannot tell you how happy I am with this script. It is what I have been looking for. Although I have been trying to learn JQuery, I could not resist going with this script for my image gallery. My question is this. If I have 100 images being pulled from flickr, I cannot display 100 thumbs on one page because the load time would be too long. I would like to know if anyone knows of any way to paginate or integrate a carousel into this so that it would load on demand. Ideally a carousel so it can all be on the same page. Once again thanks and you can see it working athttp://www.abrahamkalili.com/photo.php

Abe2008 04 08I cannot tell you how happy I am with this script. It is what I have been looking for. Although I have been trying to learn JQuery, I could not resist going with this script for my image gallery. My question is this. If I have 100 images being pulled from flickr, I cannot display 100 thumbs on one page because the load time would be too long. I would like to know if anyone knows of any way to paginate or integrate a carousel into this so that it would load on demand. Ideally a carousel so it can all be on the same page. Once again thanks and you can see it working athttp://www.abrahamkalili.com/photo.php

Mario2008 03 21I've installed the script on my local computer (linux) but when i uploaded it to my webserver...it wasnt working.I even uploaded the whole examples directory to see it work there and still it wouldnt work.Is there anything i need to change in my php.ini or add up ? Why is it working localy and not online oO ?It just opens the pictures in the same window...not a popup layer....

Josh2008 03 20The slideshow has bugs in it whereby if your viewing the website on a low resolution the thumbnail scroller overlaps the image. In addition if you use your scroll mouse down it will screw the whole thing up. Is there a fix/hack for this somewhere?

Steve2008 03 17Hi Joe,Safari still seems rather wonky, as of 1.7.2... If you click on a thumbnail, then close the lightbox and try clicking the same thumbnail again, nothing happens. And in some cases, after doing so, it seems to disable clicks elsewhere on the page as well. I've tested this with Safari 3 on the Mac, but presumably this should be the case for Safari for Windows as well. (Previous tests on Windows were similarly broken, although I haven't tested with 1.7.2 on Windows yet.) FYI!Steve

Robyn2008 03 08I really, really like this script especially being able to build a customized gallery from a Flickr feed.But... the Flickr RSS doesn't work at all. Your Example demo doesn't work on the site, nor does the downloaded demo in the Zip file and I can't get my own to work either. I have studied as much as I can in the source code of your "Demos" page where it appears to work, but that source contains many other things and I can't work out why it works on that page, but not on your External demo at http://nicora.net/projects/photoViewer/yui/examples/lightbox-flickr.htmlPlease if you can make this one work, then I may be able to get my own working.I would use the API but my client really wants to use SETS and I can't figure out how to get them working in the API either.Thanks in advance.

Steve Carlson2008 02 291.7 has a problem with gallery/lightbox containers that have an underscore in their names (eg, ) It appears to be due to a split() call where underscore is the delimiter...

Dan2008 02 24In your demos, when clicking through images that have already loaded, the next image flashes up before the transition happens, creating a glitchy looking transition. Can you force a delay?

Jad2008 02 14Maybe YUI needs something that AJAX doesn't but you should really revisit how your includes are souced in your demos. I've spent way too much time trying to figure out the structure of everything only to get everything in the right place finally and have the demo still not work. Your script looks beautiful, it'd be even better if I could actually get it to work.

MikeR2008 02 14What is the difference between "viewers[id].properties.grow" and "viewers[id].properties.fade"? Seems that changing the GROW value doesn't have an effect.

MikeR2008 02 09Hi, love the code so far.1) Any pictures taller than viewable area get centered causing the "Close" to be above viewport and the "Prev/Next" to be below. Any way to scale large images down to available real estate? You can see the problem on a larger monitor if you resize IE/Firefox to smaller height.2) Can you give downloaded examples using "Prev/Next", "Start/Stop" images similar to your examples on your web site?3) Minor - Your using transitional on your examples. Should close start tags that have no end tags with "/"4) In your docs, can you better explain how you set the background masking to be on in some examples and off in others.

Teejay2008 02 07Hi Joe?i've done some investigations in solving the issue with underlaying flash movies, and i guess i have found someting. first of all i u should know how i implement the flash movie, cause there are so many possibilities in doing this. I use the SWFObject to include the a flash file (http://blog.deconcept.com/swfobject/). I use the wmode = opaque. Ok i have noticed that [id]-viewer mask and so on will be appended on the body of the HTML Dom. The problem is, that the code (the appended one) is only invisible if u close the viewer! I have removed the complete viewer code and voila flash does its job correctly. But, after doing this i can not open the viewer for the same gallery :(. Hope u can help me.Best Regards Thomas

teejay2008 02 06Hello,I have found an issue with the firefox browser. This problem is related to embeded Flashmovies. I have created a flash Head for my website (still offline), anyway if u open the photo Viewer the Viewerbox will be destroyed by the moving flash elements in background. In Safari everyting looks good but in FF its not so nice :( (Havent tested the IE Browser!). Du u have a suggestion for fixing this problem, maybe a iframe for the imagebox ?Regards Thomas

Justin2008 01 31Is there a way to create multiple photo groups but define their properties only once? Or is it necessary to define a YAHOO.photoViewer.config for each group?It would be nice to define a global property that any/all groups would adhere to within the page.Thanks for all of your great work.

Thomas2008 01 29Hello,first of all, gratz to that amazing script. I will use ut for my page but i have some troubles with displaying the Imagebox. I am using the new YUILoader to load your script. pls look at the image -->http://img.skitch.com/20080129-caw2ih3n6ujrnga74fy8g1s1mu.jpgThe script works, but if i click on an image the box will open with scrollbars. i can not explain why that happens cause overflow is hidden in the skin css. All css file from my side are uncommented, so that there should not be any problems in addition to other css files. Here is another screen http://img.skitch.com/20080129-f9ut5ft378udwhctgfhut1n8wu.jpgHope u can help meThomas

Dave F.2008 01 25Hi- I just wanted to ask a question about the license:I'm not sure I understand what the creative commons share-alike license means with respect to software. I just wanted to make sure it was your intention that it would be alright to use you photoViewer library on a website I'm building. Does it mean that I have to provide access to the source code for my whole website? I'd rather not (if only to avoid the work involved in doing so..).thanks very much in advance, -Dave F.

Mr. Nicora2008 01 21I just wanted to leave this message stating that Tim has solved the problem he had from the post just before this. I didnt want any confusion.

Tim Stone2008 01 18I've installed PhotoViewer 1.1, and gotten it to work nicely. Pretty easy really. I've only got one problem, and I'm sure it's related to how I'm doing the site pages. I ajax load html fragments, and one of them has the images that I want to lightbox. Once the fragment is loaded, I call controller.init. The proper dom elements are created, and the viewer appears. But the body visibility is changed to hidden. I haven't been able to figure out why. When I close the viewer, the body visibility does not change back to visible, leaving me with a blank page. But that's not all... If I use a dom explorer to go in and manually change the body visibility back to visible, and click on a thumbnail to open a new viewer, all works properly. The mask darkens the page, the viewer shows as before, and when I close the viewer, all is well. So it has something to do with the first call, when loadViewer is called the first time. I stepped through the entire script looking for where the body visibility changed, but it didn't in your script. There must be an event subscription somewhere? I dunno... I'm stumped. I don't know YUI well enough, I guess. Anyway, any suggestions?

minkey2008 01 14In IE6, the images do not load completely sometimes. Ive had several issues with the view being resized to the image that it just left and not the image that just loaded. These are all IE 6 issues.

minkey2008 01 14In IE6, the images do not load completely sometimes. Ive had several issues with the view being resized to the image that it just left and not the image that just loaded. These are all IE 6 issues.

Michael2008 01 11hmm, no linebreaks.. my msg might not make much sense without them...

Michael2008 01 11Hi, I have got your script working great, save for a minor issue i'm having. All my thumbnail links/images are wrapped in div tags like so:div class="thumbnail" a href="image.jpg" class="photoviewer" title="image name" img src="image_s.jpg" /a a href="#" another link within the div /a/divdiv class="thumbnail" a href="image2.jpg" class="photoviewer" title="image name" img src="image2_s.jpg" /a a href="#" another link within the div /a/divthe lightbox opens up fine, but when you use the prev/next links, it goes straight from the first gallery image to the last image, skipping any in between. if i remove the surrounding div, it works fine, but i need that div there.. any suggestions?

Ankit Modi2007 12 21This is a great script, and I am planning to use it on my site.I see a small bug, I dont if its a yui problem or this script's problem.I am using MacOSX Firefox, and I see a flicker before the image is loaded.Scenario:I press next.1. I see the next image for a small time (<1s) and it disappears.2. Then box resizes.3. The image comes back.

laxmikanth2007 12 19hai

Craig2007 12 16Hi, this looks GOOD !!! I am stuck with one thing, I downloaded and followed the instructions, and in works - but the lightbox that pops up is not the correct size for the image, it always cuts of the bottom and the right of the image... Any suggestions on how to fix this?Tx, Craig.

Craig2007 12 16Hi, this looks GOOD !!! I am stuck with one thing, I downloaded and followed the instructions, and in works - but the lightbox that pops up is not the correct size for the image, it always cuts of the bottom and the right of the image... Any suggestions on how to fix this?Tx, Craig.

Paul2007 12 07Hi! First of all this is the best "lightbox" I have seen. I have successfully installed and tested other lightboxes trying to find one that suits me but none come close to what I see on your demo.My only problem is that I can't get yours to work! I have followed the instructions to the best of my abilities and even when all else failed tried copying some source code from your demo page just to see if it would work but it would not.I uploaded the YUI files to my web server and edited the stylesheet and script locations in my header to direct them to the necessary files on the web server and added class="photoViewer" to the image links but it still doesn't go through the JS, just loads the image in a new page.Any ideas? I would appreciate help if possible. Thanks!

Christoph2007 12 06Hi!Thanks for that great JS! I love it. I was just wondering if there´s another possibilty to include captions into the lightbox. I tried to set some links and line breaks with br and a href. but they got just displayed as they are.Would be a great feature for future release ;).Christoph

Adam2007 11 12I love this implementation of "lightbox". I've only found one major problem, and it's with IE6. When you first click on a thumbnail to launch the lightbox, it looks perfectly fine. But when you either click "Next" to go to the next image in the series or you click any of the page buttons, the new photo won't load... any idea if there's a quick fix for this? I'm trying to use this for a client, but it's a deal-breaker for them if it doesn't support IE6, which stinks because this is my favorite lightbox design yet. Feel free to post or email a reply if you have one. I know you aren't supporting IE6 yet, but I thought it couldn't hurt to ask if you know how to solve it.

seb2007 10 26Your box is fancy. But I recognized one misbehaviour. At the page which shows the thumbnails and the code field above you see if opening one of these pics in the lightbox a small shift where the code field is displayed. Hope you can follow me. See you.

george2007 10 20on your xml loading example page, when you open the second lightbox (absolute positioned)the scrollbar appears above the lightbox (mac, firefox 2.0.0.7).

ml2007 10 20WOW, i really loved your lightbox.i checked every lightbox there is, and this is the best. few things:1) don't call it a lightbox, because it is a little bit confusing.2) do you think you could make so it could include html pages and more?3) could it open multiple boxes?ml

Mr. Nicora2007 10 16Oleg:Okay, I updated with a fix for your problem not loading the next image after a BR tag. I was using the getNextSibling method, but that didn't test for the type of node, so I switched to getNextSiblingBy with a testing function for the class "lightBox". I am still looking into the other 2 issues, I'll keep you posted.

Oleg2007 10 16Oh looks like my html didn't get through in first message. In problem 2, I inserted br style="clear: left;"in between 4 a href="javascript:;"

Oleg2007 10 16Hi, I tried to leverage the gallery that you created for my website. It works fine, except for few things that I wanted to ask you:1) IE 7 - Prev and Next are both floated right after I click on image.2) Any browser - I am trying to setup only 4 thumbnails in one row with 2 rows, so basically I did something like that: // 3 more lines like this with // 3 more lines like this withProblem: when I insert I cannot go to 5th image from 4th by clicking next or to 4th from 5th by clicking prev.I have couple more questions, but they are not as critical.Regards,Oleg.

Erik2007 09 30Hi,This is a great script set. I have one suggestion that helped me.If you change the YAHOO.lightBox.image.onclick method a little, you can leave the anchors as real URLs (as a backup for non-javascript).function onclick(e){ if (!display){ display = new YAHOO.lightBox.display(); } YAHOO.lightBox.start.setActive(box); display.load(); YAHOO.util.Event.preventDefault(e);}Then you can use the following markup: And that gives a handy backup if anyone does visit without JS enabled.Thanks for releasing this!_Erik

Leave a comment