如何通过 jQuery 引用展开的 Highslide 对象

Question

我正在尝试创建一个小功能，允许用户单击网页上的任意位置以关闭通过 highslide 创建的展开图像。弹出的一个错误是当图像无法完全展开时，您可以选择将其展开为完整大小或将其留在浏览器的边界内，但是，我触发了 highslide 元素以在任何点击事件中关闭。我想出了这个解决方法，但仍然存在一些问题。

<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>

我只是刚刚学习 java script/jQuery 和 highslide，所以对于不好的做法我深表歉意。 Console.log 严格用于调试，将被删除。

我的问题具体如下。我想通过 jQuery 引用扩展的 highslide 图像，所以我不必使用 highslide 的鼠标事件。我发现它们太不可预测了，我现在没有时间去弄清楚它们是如何工作的，以及为什么我没有看到我想要的结果。

希望一切都说得通，在此先感谢您提供的所有帮助。

Answer 1

也许我遗漏了什么，但我不明白你为什么要重新发明轮子。 Highslide JS 已经内置了此功能。如果将调光不透明度设置为任何非零值，则单击页面上的任意位置将关闭扩展器。

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

如果您实际上不需要暗淡的背景，只需将该值设置为 0.0001 之类的值即可。

Answer 2

对于那些有兴趣解决这个小难题的人来说，这是我现在运行在我的网站上添加 "click to close" 功能而不使用调光器的最终有效代码方法。

<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>

要使此代码正常工作，您需要使用 highslide-full.js。我希望这能帮助某人或为您提供一些乐趣，就像它对我一样。

Answer 3

以下是无需将 jQuery 拖入混音，仅使用 Highslide JS 提供的工具，而不必 "offended" 使用偷偷摸摸的快捷方式即可做到这一点的方法：

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();
});

（最初由 Highslide JS 开发人员 Torstein 于六年前发布。）

如何通过 jQuery 引用展开的 Highslide 对象

How to reference an expanded Highslide object through jQuery

javascript

jquery

html

image

highslide