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上尝试了几乎所有可能的解决方案，但它们都没有工作我正在使用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

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

链接应为<a href="#first_lightbox" id="img_main_squre">（请注意href属性中id之前的哈希值），javascript就是这样：

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

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

2 个答案: