Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript FancyBox Redirect To A Predefined URL When Click On Image

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>

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

Auto Load YouTube Video As A Popup With JQuery FancyBoxwindow.location.href target _blank
You Might Also Like:
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • Get Image Width Height With JQuery And JavaScript
  • Jquery checkbox checked
  • JavaScript Open A New Tab With JQuery
  • JQuery How to use DatePicker
  • Validate Date With JQuery And Date Object
  • JQuery Show Popup Once A Day
  • JQuery Create Textbox With Count Down Limit Characters
  • ASP.NET JQuery Autocomplete Textbox
  • JQuery Only Show One Div On Click And Close Other Divs
Hoan Huynh

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

Link7 years ago JavascriptFancyBox, JQuery2,419
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,455 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,836 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,652 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,986 views
C# Read Json From URL And Parse/Deserialize Json
11,719 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development