Shopify Question posted in
The Shopify help center can be found here.

fancy box not open in single click,require double click – Shopify

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

Tags:

2

Answers


  1. 0

    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 href="#first_lightbox" id="img_main_squre">
    Login or Signup to reply.
  2. 0

    Have you tried to use the inline example from documentation?

    The link should be <a href="#first_lightbox" id="img_main_squre"> (note the hash before the id in href attribute) and the javascript will be just this:

    $('a#img_main_squre').fancybox({
    modal: true
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search