PDA

View Full Version : YUI Lightbox



modulo
09-27-2007, 09:07 PM
1) YUI Lightbox

2) Joe Nicora and Yahoo

3) There are tons of lightbox apps out there, but none that I could find that use YUI. I'm sure there are lots of developers out there already using YUI and don't want to have to use another library such as jQuery to get lightbox functionality. I have two demos available from the link below and you can download a zip file of the complete application including the YUI files needed.

4) http://nicora.net/projects/lightBox/

jscheuer1
09-27-2007, 10:11 PM
Looks very nice. One problem that I noticed though in Opera (perhaps others), in the variant version:

If you have two 'lightboxes' open and try to navigate via next or previous to the image in the other 'lightbox' it won't load.

thetestingsite
09-27-2007, 10:12 PM
Indeed, firefox is the same way (at least on my computer). Then again I am at work and it is a POS computer. Will try my personal computer when I get home.

modulo
09-27-2007, 10:13 PM
Ah, I have not done any testing for Opera as of yet. I suppose I should download it and get started. You can see the desired functionality in FireFox or IE7, although I have already found one bug.

jscheuer1
09-27-2007, 10:17 PM
In FF it shows the image sometimes, and skips to the next one sometimes.

modulo
09-27-2007, 10:25 PM
What version FF are you using? I have 2.0.0.7 and it is not behaving in the mentioned way. Also, what platform and version?

I added the new bugs to the known bugs section and also a link to the blog about this component. Feel free to leave comment/requests/bugs as a comment.

modulo
09-27-2007, 10:28 PM
Also wanted to add, that currently I am not pre-loading the zoom sized images, so be sure to give them time to load before clicking again. Also, do you think it would be wise to disable the next/prev buttons while waiting for an image to load? One more thing, is the loading image to subtle? Of course styles can be modified, but I mean just for the default. That reminds me, once I get this tightened, I make a few extra themes.

jscheuer1
09-28-2007, 04:48 AM
FF 2.0.0.7 under Win XP Media Edition w/broadband cable.

ddadmin
09-28-2007, 08:34 AM
It certainly has potential. but right now, it just feels a little choppy. When the user first clicks on an image thumbnail, there is a delay before the image shows up, and since there are no ajax style indicator to let the user know this is happening, it can appear as if nothing is happening. Also, in Firefox at least, the animation when cycling through images (the expanding part) is choppy.

BTW, YUI supports hosting of all the .js files on their server. You might want to update your demo/ documentation to just point to those files, so users don't have to download anything.

modulo
09-28-2007, 09:23 AM
I added a loading image, for the initial load. And because the style sheet is so ambiguous, it could easily be changed. As far as choppiness, I'm using industry standard animation libraries, so...

jscheuer1
09-28-2007, 04:38 PM
Overall, the smoothness of the script appears equivalent or superior to lightbox in FF. The choppiness in FF that I see is only with the two variant demos. Without diagnosing it, mind you, just from the look of it, it seems as though you are waiting too long to determine the page or window width or more likely the height (a vertical scrollbar appears briefly) or skipping a step, or allowing the image to load into the 'box' while the 'box' is 'below the fold' and then centering the 'box'. This is only noticeable on screens/in windows that are tall enough not to need a vertical scrollbar to display the page to begin with.

modulo
09-28-2007, 08:23 PM
jscheuer1: great information, I have some detective work to do. Also, admin, I will add the fact that Yahoo provides hosting for API files. But I also include all needed files in the ZIP file.

UPDATE: Added support for loading photos via AJAX. You can create an XML file, load it then view the lightbox. I made several other enhancements and ffixes as well.

ddadmin
09-28-2007, 11:17 PM
The XML file ability is certainly a plus. :) I think by the time this script emerges out of beta, it'll certainly be a script I'd like to feature on DD.

modulo
09-29-2007, 12:09 AM
The XML file ability is certainly a plus. :) I think by the time this script emerges out of beta, it'll certainly be a script I'd like to feature on DD.

Awesome!

I'm a few weeks away from releasing the first stable version. I have a list of enhancements to add and then I need to spend some quality time testing browsers and platforms. I'll keep this thread updated with my progress.

jscheuer1
09-29-2007, 05:09 AM
jscheuer1: great information, I have some detective work to do. Also, admin, I will add the fact that Yahoo provides hosting for API files. But I also include all needed files in the ZIP file.

UPDATE: Added support for loading photos via AJAX. You can create an XML file, load it then view the lightbox. I made several other enhancements and ffixes as well.

I ran into a similar problem when coding my lightbox 'clone':

http://home.comcast.net/~jscheuer1/side/mybox/

My script was never meant to be a replacement for lightbox. It was meant to offer a wide variety of 'box' options with very low overhead and no reliance on outside script libraries. As a result, it has few special effects.

Anyways, in FF I remember that the 'box' would cause a vertical scrollbar if I didn't calculate its position twice. Other browsers had their own idiosyncrasies as well. There could be a better solution, I did this:


boxLoc:function(obj){
var m=mybox, w=window, ow='offsetWidth', oh='offsetHeight', sw='scrollWidth', sh='scrollHeight', cw='clientWidth', iw='innerWidth';
if(obj==m.loading)
m.olay.style.height=m.olay.style.width='';
if(obj==m.box)
m.box.style.top=m.box.style.left='';
m.olay.style.height=Math.max(m.iedb()[oh], m.iedb()[sh])-(m.ie6ha? m.ie6ha() : 0)+'px';
m.olay.style.width=m.ie6ha?m.iedb()[sw]:Math.max(m.iedb()[ow], m.iedb()[sw])+'px';
var portH=w.innerHeight || m.iedb().clientHeight;
var portW=w[iw]&&m.iedb()[cw]? Math.min(m.iedb()[cw],w[iw]) : w[iw]? w[iw] : m.iedb()[cw];
var tS=self.pageYOffset || m.iedb().scrollTop || 0;
obj.style.top=(obj==m.loading||(obj[oh]<portH&&(!obj.firstChild||obj.firstChild[oh]<portH))? portH/2-obj[oh]/2 + tS : tS + 20)+'px';
tS=self.pageXOffset || m.iedb().scrollLeft || 0;
obj.style.left=(obj==m.loading||(obj[ow]<portW&&(!obj.firstChild||obj.firstChild[ow]<portW))? portW/2-obj[ow]/2 + tS : tS + 20)+'px';
if(m.iedb()[sh] < m.box[oh]+m.box.offsetTop+29||m.iedb()[sw] < m.box[ow]+m.box.offsetLeft+29){
m.olay.style.height=m.olay.style.width='';
if(m.iedb()[sh] < m.box[oh]+m.box.offsetTop+29)
document.body.style.height=m.box[oh]+m.box.offsetTop+(m.ie6ha||document.body.filters?25:10)+'px';
if(m.iedb()[sw] < m.box[ow]+m.box.offsetLeft+29)
document.body.style.width=m.box[ow]+m.box.offsetLeft+25+'px';
m.olay.style.height=Math.max(m.iedb()[oh], m.iedb()[sh])-(m.ie6ha? m.ie6ha() : 0)+'px';
m.olay.style.width=m.ie6ha?m.iedb()[sw]:Math.max(m.iedb()[ow], m.iedb()[sw])+'px';
}
}

Full code available from the above link.

To make a long story short though, since you are adding your 'boxes' to the end of the document (as is generally preferred - I added my one box to the beginning because of iframe counting), it would be imperative to position them before displaying (display property) and to zero out their height before determining their style height. Remember, an image's height attribute may be determined once it is loaded/preloaded, without the need to display it.

modulo
09-29-2007, 05:41 PM
More great info John, much appreciated. I just releaved v0.7 with a number of updates enhancements and fixes. I also style the page a little, make it easier on the eyes.

molendijk
09-29-2007, 08:47 PM
Hello,
The lightbox doesn't work in IE6.0: the thumbnails don't show; just big pictures. Is there a fix?
Arie Molendijk.

modulo
09-29-2007, 09:49 PM
Hello,
The lightbox doesn't work in IE6.0: the thumbnails don't show; just big pictures. Is there a fix?
Arie Molendijk.

Being that it is still in BETA stage I have not started on support for deprecated browsers. Once I have it stable for current version browsers I will start to work on IE6 compatibility.

modulo
10-02-2007, 08:03 PM
Just released 0.92. I'm done with the feature set until version 1 gets released. I am now going to focus on bugs and browser compatibility.

modulo
10-14-2007, 03:51 AM
Added some new features. Slideshow mode and added paging butons a la flickr paging. Still haven't gotten to IE6/Opera/Safari1.3 support, soz. if anyone has those browsers it would be great to know what works, if anything.

modulo
11-28-2007, 11:38 PM
I released version 1.0 which is hopefully stable. It is now supporting ie6 (barely)

is this something that could be aded as a resource at this point?

New url too: http://nicora.net/projects/photoviewer/

ddadmin
11-29-2007, 12:41 AM
Hi:
Thanks for the update. I'll take a close look at it again in the next couple of days, and offer some feedback.

molendijk
11-29-2007, 12:56 AM
Works great now (IE6!), as far as I can see.
One thing, though. If the visitor uses a low screen resolution, there's no way for him/her to reach 'close', 'next' or 'previous'. The links are just out of site, scrolling won't help.

Arie Molendijk.

modulo
11-29-2007, 12:57 AM
ah, great catch! I need to stop the top position at 0

molendijk
11-29-2007, 11:21 AM
What's the file in which you can change 'prev', 'next' and 'close' into something else?
Thanks,
Arie Molendijk.

modulo
11-29-2007, 02:39 PM
There isnt currently. This is my idea for that: I was going to make 3 more config properties for the text of those buttons. You could then leae the text blank and then assign a background image to them in cs. More flexibility that way.

I added this to the requested features, next push I make will have this available

boogyman
11-29-2007, 03:14 PM
Tested on Firefox 1.5 for Linux

1) Transitions are poor
this is more of an asthetic issue then a real bug, but it double loads the image.
what I mean by that is it will load it really quick, then it will resize the layered window and reload the image again.

2) Relative position bug
see screen shot


This is my idea for that: I was going to make 3 more config properties for the text of those buttons. You could then leae the text blank and then assign a background image to them in cs. More flexibility that way.
3 options is a good idea. but not the way you are saying
-- 1 = user defined text
-- 2 = user defined image
-- 3 = default (next/previous) text

modulo
11-29-2007, 04:07 PM
great post boogyman.

1. I am using YUI and so I am bound to their animation libraries. You can however adjust the settings (grow, fade) and the also change the transition algorithm in the config object. I am surprised to hear that transitions are poor considering the popularity of this library. Now as far as the double load, this is an issue with ie6, i tried to bypass it by pre-loading as much as possible but im still looking for a real fix. I do not however, see this issue in ie7 or ff2 (Windows). So this will take some further investigation.

2. This is a CSS inheritance problem, I am looking into a fix for this.

3. Well, I'll think some more about your suggestion. I would rather not let the user insert an image into the dom, but rather let them define a background image in CSS. I add a new config property "buttonText" this is an object with 3 properties, one for each of the 3 buttons. If there is no config property it defaults to the default text. You can define text or a blank space, then go into the CSS and set a width/height and image. This way would also give you hover properties for mouse overs.

modulo
01-27-2008, 04:48 PM
So how do I go about getting this thing evaluated for inclusion to the DD library of components? I think it's at a very stable point.

jscheuer1
01-27-2008, 06:02 PM
http://www.dynamicdrive.com/submitscript.htm

I might add that there are lots of very good scripts that aren't in the DD Library. Merit is far from the only factor. And, before you get into further discussion with me over this, please be fully aware that I have very little to do with what gets in or what doesn't. ddadmin is the sole proprietor, as far as I know, and you can reach him at the address from the link I gave you (which - the link - is also at the top of the main DD page).