花式框单击不打开，需要双击

Question

你好我想在fancybox中打开某个div 我喜欢这个

<script>
$('a#img_main_squre').click(function(e){        
  $.fancybox(this,{
    href: '#first_lightbox', 
    modal: true
   });
      e.preventDefault();   
});

</script>

<div style="display:none">
 <div id = "first_lightbox">  
   <div id = "lightbox_image">
     <img src="{{ settings.content_module_img1 | img_url: "medium" }}" />
   </div>
   <div id= "lightbox_content">        

     <img src="{{ settings.content_module_image1_logo | img_url: "small" }}" />
     <span>{{ settings.first_headline }}</span>
     <span>{{ settings.second_headline }}</span>         

   </div>  
 </div>

<div class="product-single__photo-wrapper" >
  <a href="first_lightbox" id="img_main_squre">
    <img src="{{ settings.content_module_img1 | img_url: "small" }}" />
  </a>  
</div>

我已经尝试了 SO 上几乎所有可能的解决方案，但其中 none 有效我正在使用 jQuery 1.11.8 和 fancybox -v 2.1.5

我想在点击 #img_main_squre

时在 fancybox 中显示隐藏的 div 'first_lightbox'

Answer 1

您需要在 click 之外对其进行初始化。因为在第一个 click 事件中它正在初始化，而在第二个 click 中它为你工作。

<script>
    $(document).ready(function(){ 
       //initialize outside click
       $('a#img_main_squre').fancybox({
          modal: true
       });
    });
</script>

当您在基于 modal 的机制上工作时，您需要 target 使用建议的 # 约定的模态，而不需要将 href 放入 fancybox。

 <a href="#first_lightbox" id="img_main_squre">

Answer 2

您是否尝试过使用文档中的内联示例？

link 应该是 <a href="#first_lightbox" id="img_main_squre">（注意 href 属性中 id 之前的散列），javascript 就是这样：

$('a#img_main_squre').fancybox({
    modal: true
});

花式框单击不打开，需要双击

fancy box not open in single click,require double click

javascript

jquery

fancybox

shopify