One reason I love Fancybox is how versatile it is. I was coding a website for a client and they wanted to have a Google Map on their contact page. The problem was that the contact page already had a ton of content; phone numbers, contact forms, etc. They didn’t want a separate page for the map though, so I came up with an idea. My thought was that if I made a small graphic of a map / button for the sidebar of the contact page, then I could use Fancybox to open the Google Map over the screen when the user clicked the button. This would keep the page looking oh-so-clean, while still having all the info for the user.
Check out the demo to see an example of this in action.
The demo shows an example of having a smaller graphic representing the map that opens the Google Map when clicked on.
In order to do this you need to first download Fancybox and hook it up to your page.
Next put this code in your head.
<script type="text/javascript">
$(document).ready(function() {
$("a#inline").fancybox({
'hideOnContentClick': true,
'overlayColor' : '#6b0202',
'overlayOpacity' : 0.8
});
});
</script>
The overlay color and opacity are optional, that’s for the dark red background when the map is overlaid over the webpage.
So what is actually happening on the page? The Google Map is in a div with an ID of mapBox. I’m using CSS to hide the div so you don’t see it on the page under normal conditions. Then the javascript is being used to show the div, and open it with the Fancybox styling. Here is the CSS to make this hapen:
#mapBox {
width:600px;
height:510px;
display:none;
*margin-left:-9999px;
*height:0px;
*position:relative;
*top:-500px;
*display:block
}
Looking at the code you’ll see there is some Internet Explorer specific code. This is because there is a problem getting the map to show up in IE without setting the box to display:block. The rest of the IE specific code is shoving the div with the map off the screen so you don’t see it until you open it in Fancybox. IE hacks are annoying, but this got the job solved so it functions correctly across browser, so I’m happy.
Here’s how the link in the XHTML looks (telling the div with the ID of mapBox to open when clicked):
<a id="inline" href="#mapBox" > <img src="blahblah" alt="blahblah" /> </a>
Grab the download of the demo, and have fun! Go Sox!
