Ad

Fancy Box Not Open In Single Click,require Double Click

- 1 answer

Hi i want to open a certain div in fancybox i did like this

<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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="first_lightbox" id="img_main_squre">
    <img src="{{ settings.content_module_img1 | img_url: "small" }}" />
  </a>  
</div> 

I have tried almost all possible solution available on SO, but none of them is working i am using jQuery 1.11.8 and fancybox -v 2.1.5

i want to display hidden div 'first_lightbox' in the fancybox while clicking #img_main_squre

Ad

Answer

You need to initialize it outside of click. Because on first click event it is getting initialized and on second click it working for you.

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

As you are working on modal based mechanism you need to target the modal using convention of # like suggested and not required to put href in fancybox.

 <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#first_lightbox" id="img_main_squre">
Ad
source: stackoverflow.com
Ad