How to reference an expanded Highslide object through jQuery

Question

I am trying to create a small function that will allow a user to click anywhere on a webpage to close an expanded image created through highslide. A bug that popped up was when the image can't fully expand, you have the option to expand it to full size or leave it in the bounds of your browser, however, I have the highslide element triggered to close on any click event. I came up with this work around that still has some issues.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="/hs/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="/hs/highslide/highslide.css" />


<script type="text/javascript">                                                                                                                                                                                                                
var mState=false;                                                                                                                                                                                                                              
$(document).click(function() {                                                                                                                                                                                                            
  hs.Expander.prototype.onMouseOver = function() {                                                                                                                                                                                             
    mState = false;                                                                                                                                                                                                                            
    console.log('over') };                                                                                                                                                                                                                     
  hs.Expander.prototype.onMouseOut = function() {                                                                                                                                                                                              
    mState = true;                                                                                                                                                                                                                             
    console.log('out')  };                                                                                                                                                                                                                     
  console.log(mState);                                                                                                                                                                                                                         
  if (mState) hs.close();                                                                                                                                                                                                                      
}); </script>

<a href="/pub/opdc/p0000/tall.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/pub/opdc/p0000/tall_t.jpg" alt="Highslide JS" align="right"></a>

I am only just learning java script/jQuery and highslide so I apologize for bad practice. Console.log is strictly for debugging and will be removed.

My question is specifically as follows. I want to reference the expanded highslide image through jQuery so I don't have to use highslide's mouse events. I am finding them to be to unpredictable and I don't have the time right now to suss out exactly how they work and why I am not seeing the results I want.

Hopefully that all made sense, thank you in advance for any and all assistance.

Answer 1

For those interested in having fun with this little mind puzzle of a problem, this is the final and active code I am running on my websites now for added "click to close" functionality without using the dimmer method.

<script type="text/javascript">
  var mState=false;
  hs.Expander.prototype.onMouseOver = function() { mState = false; }
  hs.Expander.prototype.onMouseOut  = function() { mState = true;  }
  jQuery(document).click(function() {
    if (mState) {
      hs.close();
      mState = false;
    }
  } );
</script>

For this code to work you need to use highslide-full.js. I hope this helps someone out or provides you with some fun like it did with me.

Answer 2

Maybe I'm missing something, but I don't understand why you're trying to reinvent the wheel. Highslide JS already has this functionality built in. If you set the dimming opacity to any non-zero value, clicking anywhere on the page will close the expander.

<script type="text/javascript">
   hs.dimmingOpacity = 0.75;
</script>
<style type="text/css">
.highslide-dimming {
    background: black;
}
</style>

If you don't actually want a dimmed background, just set the value to something like 0.0001.

Answer 3

Here's how you can do it without having to drag jQuery into the mix, using only the tools that Highslide JS provides, and without having to be "offended" by using a sneaky shortcut:

hs.addEventListener(document, 'click', function(e) {
   e = e || window.event;
   var target = e.target || e.srcElement;

   // if the target element is not within an expander but there is an expander on the page, close it
   if (!hs.getExpander(target) && hs.getExpander()) hs.close();
});

(Originally posted six years ago by Torstein, the Highslide JS developer.)