for a while now i’ve been trying to get myself to make some code changes in the gallery viewing script. as it was, when you opened up a picture, it would just display the image on a new page and you’d have to hit “back” on your browser to get back to the gallery page.
after gaining some experience with DHTML/CSS, i’ve made it now so that when you open up a picture, it just opens in a floating frame (div, technically) that you can drag around and close (just click it) at your leisure.
you can check it out in the vegas pictures that i posted from our trip to vegas last week vegas pictures. don’t expect anything too exciting though. there was actually no alcohol involved whatsoever this last weekend.
anyhow, doing this actually took a lot longer than i expected. there were two main hurdles:
1. figuring out what the behavior should be when you attempt to drag the image outside of the window
2. in most browsers, when you click on an image and attempt to drag it, it assumes you’re trying to save it to another folder or open it in a new window. this is bad because the event handlers (unless you’re using the ondrag event handler supported only by IE) do not fire during this drag.
problem 1, it looks like it’s a limitation for almost all web apps. the two options are (1) disable the drag once the cursor leaves the window or (2) allow the drag to continue when the cursor leaves the window - however, if the mouse button is released outside of the window, that event will not be detected, and thus, the picture will continue to follow the cursor when the cursor comes back into the window.
I ended up going with option (1) since for the most part, if you’re dragging a picture and you leave the window, it’s most likely on accident, and it would be annoying to have to re-select the picture to start the drag again. and even if you do leave the pane, you’re probably not going to release the mouse button if you’re trying to drag something.
the second problem was more irritating. i had what i thought was a fairly cleverly devised solution in firefox, where i would place another div on top of the div (let’s call it the “drag div”) containing the image. this would effectively prevent the event from ever hitting the image, thus preventing the application-initiated drag function. the problem is, when i tried this in IE, this was a problem because since the “drag div” had no background, events aren’t captured by it).
okay, so i went ahead and applied a background of transparent gifs. then the problem was, you could no longer right-click and save the image. and also, this was just a really ugly thing to do.
finally, after much pain, i found the information i needed. there is a way to disable application initiated actions for DOM events. of course, there are two ways of doing it, one for IE, and one for everyone else, but in the end, it comes down to this:
function preventDefaultEventAction(e) {
e.returnValue = false;
if(e.preventDefault) e.preventDefault();
}
whenever a DOM event is received, in IE, you can prevent the default action for that event by setting e.returnValue = false. And in everything else, you can all the preventDefault() method. I just wrapped it up in a function call to try and keep things clean. But anyways, this worked out wonderfully and it obliviated the need for having two divs to move around one picture, and the performance is pretty good.
there are still a couple of features to implement:
1. the event handlers aren’t assigned until the entire body is loaded, and this takes a while. this means you can open up the picture in the image display, but won’t be able to drag it/close it until all the images in a gallery have finished loading. i’ll have to fix it somehow. probably just move the onload statement into the image display div. even more importantly, in IE, it appears to prevent the page from loading (impairs functionality) - fixed.
1b. maybe print a “Loading” message in the display window until all images are loaded? otherwise, you can’t move the div around until the page has finished loading. I think another option might be to create the div node in the javascript so that the init() function doesn’t have to be tied to the onload statement.
2. if you close the image display, and then re-open it by opening a new picture, it opens where it was last. this is a problem if you open a picture at the top of the page, and then scroll down and open a picture at the bottom of the gallery. the image display will still re-appear at the top, which might be off the screen. i’ll have to change it so that if the box is off the screen, make sure it appears somewhere within the current view (practical, low-hanging fruit)
3. add captions to the image display (low-hanging fruit).
4. add prev/next links to the display (feature)
5. add image cross-fading functionality, make sure it’s optional. (totally frivolous feature and might kill some CPUs).
it would also be cool if i could get images to fade into each other during the transition, but that may be a bit ambitious… i’ll have to check and see what css has on that for me.
