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
JavaScript
x
20
20
1
<html>2
<head>3
<meta charset="utf-8">4
<title>My page</title>5
6
<!-- CSS -->7
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">8
</head>9
<body>10
11
<a href="image.jpg" data-fancybox data-caption="www.google.com" data-width="2048" data-height="1365">12
<img class="fancybox" src="thumbnail.jpg" alt="" />13
</a>14
15
<!-- JS -->16
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>17
<script src="jquery.fancybox.min.js"></script>18
</body>19
</html>20
Advertisement
Answer
For future reference, it is possible but you need to create a form for your fancy box and not a direct image.
JavaScript
1
21
21
1
<html>2
<head>3
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>4
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>5
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />6
</head>7
<body>8
9
<a href="#divForm" id="btnForm"> <img class="fancybox" src="thumbnail.jpg" alt="" /></a>10
11
<div id="divForm" style="display:none">12
<a href="https://www.google.com.ph/"><img class="fancybox" src="thumbnail.jpg" alt="" /></a> 13
</div>14
15
<script type="text/javascript">16
$("#btnForm").fancybox();17
</script>18
19
</body>20
</html>21