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