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.