Lightbox application for Yahoo User Interface 2007 09 27

Tags for this article

Comments

Steve 2008 03 17 Hi 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

Robyn 2008 03 08 I 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.html Please 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 Carlson 2008 02 29 1.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...

Dan 2008 02 24 In 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?

Jad 2008 02 14 Maybe 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.

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

MikeR 2008 02 09 Hi, 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.

Teejay 2008 02 07 Hi 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

teejay 2008 02 06 Hello, 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

Justin 2008 01 31 Is 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.

Thomas 2008 01 29 Hello, 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.jpg The 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.jpg Hope u can help me Thomas

Dave F. 2008 01 25 Hi- 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. Nicora 2008 01 21 I 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 Stone 2008 01 18 I'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?

minkey 2008 01 14 In 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.

minkey 2008 01 14 In 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.

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

Michael 2008 01 11 Hi, 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 /div div 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 /div the 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 Modi 2007 12 21 This 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.

laxmikanth 2007 12 19 hai

Craig 2007 12 16 Hi, 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.

Craig 2007 12 16 Hi, 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.

Paul 2007 12 07 Hi! 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!

Christoph 2007 12 06 Hi! 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

Adam 2007 11 12 I 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.

seb 2007 10 26 Your 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.

george 2007 10 20 on 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).

ml 2007 10 20 WOW, 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. Nicora 2007 10 16 Oleg: 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.

Oleg 2007 10 16 Oh 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:;"

Oleg 2007 10 16 Hi, 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 with Problem: 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.

Erik 2007 09 30 Hi, 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

Name: Email (your email will not be displayed, read privacy policy): Key:  
Enter the key:

< Back