CODEWITHSUNDEEP
popupshopify
user49799
user49799

Reputation: 109

How to add popup in product shopify?

I am using the default debut theme and i am trying to open the fancybox popup on the click of image. I have uploaded the css and js using the assets folder and i have included the css and js into the theme.liquid before head tag close. Also added the script in my custom.js script.

I have given the piece of my code below. Any one can help me on the same please?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My page</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>
    <script src="custom-scripts.js"></script>
</head>
<body>

    <a href="image.jpg">
      <img src="thumbnail.jpg" alt="" />
    </a>

    

</body>
</html>

Upvotes: 0

Views: 897

Answers (2)

ZealousWeb
ZealousWeb

Reputation: 1751

You just missed the single thing to add in the a tag parameters that we need to follow as per the Fancybox 3 Guide line.

 

       <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>My page</title>
        
            <!-- CSS -->
            <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
            <!-- JS -->
            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script src="jquery.fancybox.min.js"></script>
            <script src="custom-scripts.js"></script>
        </head>
        <body>
        
            <a href="image.jpg">
              <img src="thumbnail.jpg" alt="" />
            </a>
        
            
        
        </body>
        </html>
    
    /* Here is the thing that you missed  */
     <a href="image.jpg" data-fancybox>
              <img src="thumbnail.jpg" alt="" />
     </a>
     
        /* And for the gallery to open multiple images */
        <a href="image_1.jpg" data-fancybox="gallery" 
        data-caption="Caption#1">
        <img src="thumbnail_1.jpg" alt="" />
    </a>

Upvotes: 0

Onkar
Onkar

Reputation: 2584

According to Fancybox documentation to enable a gallery you need to update a tag parameters according to documentation

<!-- 1. Add latest jQuery and fancybox files -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>



<!-- 2. Create links -->

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>


<!-- 3. Have fun! -->

This attribute play role to activate fancy box gallery data-fancybox="gallery"

Upvotes: 1

Related Questions