缩放图像上的 Fancybox 超链接

Question

我曾经有一个锚定到图像的 hyperlink。但是我现在当我点击图片时它需要先放大所以我使用了花式框，然后放大图像必须有 link.

可能吗？下面是我的代码

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

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

    <a href="image.jpg" data-fancybox data-caption="www.google.com" data-width="2048" data-height="1365">
        <img class="fancybox" src="thumbnail.jpg" alt="" />
    </a>

    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>
</body>
</html>

Answer 1

为了将来参考，这是可能的，但您需要为您喜欢的盒子创建一个表格，而不是直接图像。

<html>
<head>
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>

<a href="#divForm" id="btnForm">  <img class="fancybox" src="thumbnail.jpg" alt="" /></a>

<div id="divForm" style="display:none">
    <a href="https://www.google.com.ph/"><img class="fancybox" src="thumbnail.jpg" alt="" /></a> 
</div>

<script type="text/javascript">
    $("#btnForm").fancybox();
</script>

</body>
</html>

PS各位，在座的人都在努力学习。这对某些人来说可能很容易，但对其他人来说却不那么容易。如果没有什么积极的补充，或者如果你不理解这个问题，你可以提出而不只是对问题投反对票。

缩放图像上的 Fancybox 超链接

Fancybox hyperlink on zoom image

html

javascript

jquery

fancybox