缩放图像上的Fancybox超链接

时间:2017-07-20 06:13:20

标签: javascript jquery html fancybox

我曾经有一个锚定到图像的超链接。 但我现在当我点击它需要先放大的图像所以我使用了Fancy框,然后放大图像必须有链接。

有可能吗?这是我的代码

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

1 个答案:

答案 0 :(得分:0)

为了将来参考,您可以创建一个表格,而不是直接图像。

<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,这里的人都在努力学习。对某些人来说可能很容易,但对其他人则不那么重要。如果没有任何积极的补充,或者你不理解这个问题,你可以提出问题,而不仅仅是投票。