Fancybox hyperlink on zoom image

I used to have an hyperlink that is anchored to an image. But I now when I click the image it needs to zoom in first so I used Fancy box, then the zoom in image must have the link.

Is it possible? Here is my code below

<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

For future reference, it is possible but you need to create a form for your fancy box and not a direct image.

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

Advertisement

Answer