simple lightbox tweak

[Irishcash33]

Hi,
I assume this is simple for a js coder. In lightbox, you click the thumbnail to activate the effect..
I want to activate it by rollover not click.
Is this easy?
Thanks

[rangana]

Normally, change the onclick event to onmouseover.

If the lightbox you have uses jquery, you can change the click() function to hover(onmouseoverFUNC(),onmouseoutFUNC()).

If nothing works, please provide a link to the page's demo to where you got the lightbox.

[Irishcash33]

THanks.
I searched the js docs and didn't find any onclick or click() that made sense to change.

Here is the site (http://www.wallstclothing.com/index1.html)
I want the shirts to be onrollover not click to get the lightbox...

Thanks

[rangana]

I'm sorry, but this goes out of my wits. It uses scriptaculous and prototype.

[jscheuer1]

That could be done, but first - if you want to link to the caption in the lightbox, (and for other bugs fixes and enhancements) - if you are going to use Lightbox 2.04 (which I see you currently are), you should use my 2.04a version:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/js/lightbox.js

introduced here:

http://www.dynamicdrive.com/forums/showthread.php?t=37030

Lightbox 2.04 is a bit of a departure from earlier versions, and although I felt it needed some work (hence my 2.04a version), I was very impressed at how it initialized the links. Instead of as in all previous versions (and as far as I know all imitators) where each link is altered onload, instead of that, an event for the page is set up that listens for clicks and then determines if a lightbox link was clicked or not. This has a great advantage in situations where content is added to the page after it has loaded.

Anyways, here is where that happens (in both my version and the original 2.04 version):


updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;

document.observe('click', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},

However, I just tried this:


updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;

document.observe('mouseover', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},

And though it worked, it made the page I was using it on at least less user friendly. You have to consider that the movement of the mouse is a less specific user action than a click, one that may be much more casually undertaken, without intent, and that covers a much larger area.