I have a good solution at this
link which seems using downloaded resources. I have copied the exact code and pasted on a local html file but it doesn't function as expected (in an overlay with a close button).
Question: How can I revise the attached code just to use online resource?
Code to be revised:
<!doctype html>
<html>
<head>
<title>Fancybox example</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<link rel="stylesheet" href="plugins/fancybox/jquery.fancybox.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="plugins/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="container">
<h1 class="col-lg-9">Fancybox example</h1>
</div>
</header>
<div class="container">
<h5>Author: Julian Hansen, October 2015</h5>
<div class="left-col">
<a class="fancybox" href="http://datapassion.net/images/MMEImage.jpg"><img width="78" height="60" alt="Head shot." src="http://datapassion.net/images/MMEImageTumb.jpg"></a>
</div>
<span class="contactBlue"> Location:</span><br/>
Los Angeles, CA
<a id="A2" class="fancybox" href="http://datapassion.net/images/location.png"><abbr title="see location map...">90024</abbr></a>
</div>
</div>
<footer>
<div class="container">
Copyright Julian Hansen © 2015
</div>
</footer>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="plugins/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script>
$(function() {
$('.fancybox').fancybox();
});
</script>
</body>
</html>
Select all Open in new window
This worked. On a new question I will try to use google map for zip 90024 instead of location.png.