What you need:
(1) "dragByHeading" set to "true"
(2) anchor in the header (eg: to close the lightbox, like it is used with standard hs.skin.contentWrapper)
(3) the innerHTML of the anchor is an image
IE9 sends the mouse down/click/up event to the image instead of the anchor - other browsers seem to send it to the anchor, since I have not experiences the same with them.
Since the mouse down/click/up event is sent to the image, the applied highslide event handler "mouseClickHandler" is called, detecting a drag event.
Instead of closing the lightbox upon clicking, a drag action is performed.
THe following fixes this. The drag is stopped as soon as the event is sent to an element inside an anchor.
Code: Select all
--- highslide-full.js.orig 2012-03-31 20:08:15.000000000 +0200
+++ highslide-full.js 2012-03-31 22:07:55.000000000 +0200
@@ -707,11 +707,12 @@
if (!e.target) e.target = e.srcElement;
var el = e.target;
- while (el.parentNode
+ while (el.parentNode && el.tagName.toLowerCase() != "a"
&& !(/highslide-(image|move|html|resize)/.test(el.className)))
{
el = el.parentNode;
}
+ if (el.tagName.toLowerCase() == "a") return true;
var exp = hs.getExpander(el);
if (exp && (exp.isClosing || !exp.isExpanded)) return true;