时间戳

首页 > 解决方案 > 如何在产品 shopify 中添加弹出窗口？

popup - 如何在产品 shopify 中添加弹出窗口？

问题描述

我正在使用默认的首次亮相主题，并且我试图在单击图像时打开fancybox 弹出窗口。我已经使用 assets 文件夹上传了 css 和 js，并且在 head 标签关闭之前，我已经将 css 和 js 包含到了 theme.liquid 中。还在我的 custom.js 脚本中添加了脚本。

我在下面给出了我的代码。任何人都可以帮助我吗？

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

标签： popupshopify

解决方案

根据 Fancybox 文档启用图库，您需要a根据文档更新标签参数

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

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/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! -->

该属性起到激活花式盒子画廊的作用data-fancybox="gallery"

推荐阅读