FancyBox Redirect To A Predefined URL When Click On Image

This article will let you know How to redirect to another page (a predefined url) when people click on image in FancyBox popup with JQuery.

I applied this script for a client when they want to have a promotion banner which is automatically displayed in a popup. And when customers click on the banner, they will be redirected to a promotion page.

FancyBox Redirect To A Predefined URL When Click On Image

FancyBox Redirect To A Predefined URL When Click On Image

JQuery + FancyBox – Redirect To A Predefined URL When Click On Image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FancyBox Redirect To A Predefined URL When Click On Image</title>
<meta name="robots" content="noindex, nofollow" />
<!-- Add jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancyapps-fancyBox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancyapps-fancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
 
<script language="javascript">
	$(document).ready(function () {
		$('.fancybox_popup').trigger('click');		
	});
</script>
</head>
 
<body>
<p>
	You now can see a clickable image which is automatically loaded in a popup; when click on this image, you should be redirected to a predefined url.<br>
	<a class='fancybox_popup' href='http://4rapiddev.com' data-images='logo.png'>Click here</a> to see it again.
</p>
<a style='display:none;' class='fancybox_popup' href='http://4rapiddev.com' data-images='logo.png'></a>
<script language="javascript">
	$('.fancybox_popup').click(function () {
		var a = this,
			images = [],
			data = $(a).data('images').split(','),
			options = {
				padding: 38,
				nextEffect: 'fade',
				prevEffect: 'fade',
				type: 'image',
				afterShow: function () {
					$("img.fancybox-image").click(function () {
						window.location.href = a.href;
					});
				}
			};
		$.fancybox.open(data, options);
		return false;
	});
</script>
</body>
</html>

Sep 8, 2014Hoan Huynh

Source Code Demo page

Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

Link6 years ago JavascriptFancyBox, JQuery1,945