Tutorial: Open prettyPhoto from an image map.
April 19th 2011
Here’s one question that keeps coming back and here’s the ultimate guide to open prettyPhoto from an image map. The solution is really easy and pretty straightforward but let me break it up for you to make sure it’s clear.
Demo »Other tutorials »prettyPhoto page »
The setup
The setup required to open prettyPhoto from an image map is nearly the same as for any other type of content. You first need to include the scripts and CSS on which prettyPhoto rely. To do so, you just need to copy the following code in the head section of the page(s) on which you want to install prettyPhoto.
<script src="path/to/your/js/jquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="path/to/your/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <script src="path/to/your/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
If you are accustomed to working with prettyPhoto, you might have noticed that this hasn’t change. The only difference is in the initialization and this is what I’ll discuss next.
The initialization
This is where you need to make one slight change to be able to open prettyPhoto from image map. By default, when you initialize prettyPhoto, you target anchors (<a> element). Since image maps uses the <area> tag, you need to modify the initialization target to area. This can be done in the following way, just put this script before your </body> closing tag.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
});
</script>The image map
Now all you need to do is add the attribute rel and set it to “prettyPhoto” on all you <area> tags. prettyPhoto will then open the image linked. Note that you can use rel=”prettyPhoto[you_gallery_name]” to open the images in a gallery.
<img src="images/thumbnails/image_map.jpg" width="387" height="85" usemap="#image_map" border="0"> <map name="image_map"> <area rel="prettyPhoto[image_map]" shape="rect" coords="6,11,72,73" href="images/fullscreen/1.jpg"> <area rel="prettyPhoto[image_map]" shape="rect" coords="84,7,148,73" href="images/fullscreen/2.jpg"> <area rel="prettyPhoto[image_map]" shape="rect" coords="161,8,226,73" href="images/fullscreen/3.jpg"> <area rel="prettyPhoto[image_map]" shape="rect" coords="236,7,301,76" href="images/fullscreen/4.jpg"> <area rel="prettyPhoto[image_map]" shape="rect" coords="311,8,380,76" href="images/fullscreen/5.jpg"> </map>
Bottom line
The only difference resides in the initialization. If you want to customize prettyPhoto using custom settings, you can do it just you would have done it any other way.
If you have any question, feel free to comment.
Related Posts
If what you were reading interested you, those might too! Check them out!
I am trying to load videos and stills using pretty Photo. When loaded into the site, the video’s have a good chuck of the borders cut off and the player does not show buttons for video controls and is also expanded within the player so the close button that does appear is half on the player and half gone. this is most predominate in Safari. In firefox the video links flash in the background behind the image.
Any advice would be appreciated.
@stuart: Please ask your question in the forums http://forums.no-margin-for-errors.com/
this is a great resource. You offer such great support. If I should receive any money from this project, I will surely donate!
I am using the the initialization script in my WordPress site that you provided and I get an error stating: $(“area[rel^='prettyPhoto']“).prettyPhoto();});” is not a function
The PP from my image map works fine until I place it into my home page of WordPress. I’m using PP in conjunction with NextGen Gallery in my interior pages all is well.
Any suggestions?
Thanks so much!
You show different themes but never show anything on how to use them or where to download them…..
I am definitely going to use this on 2 of my projects and see how that goes. Thanks!
Hi!
This article is very useful. I’m using this technique in many of my designed sites.
Thanks a Ton!
Is there a way to display the title of image from a map? I tried to put alt attribute in area tag but nothing displayed.
Cheers
Fabio
How can I use or download this item? Is there any film on youtube?
I was just looking for a resource like this for my site!
Thanks! good job!
Thanks so much for the resource. If I make any money I will donate to you! Really nice of you to let us try this!!
I’m trying to get this to work on my wordpress site. Is there something that has to be changed in the plugin files?
PItty nice effect and easy to set up
How do I get the thumbnails to show and what is an image map LOL. I am getting so frustrated. I am about to pull my hair out trying to figure this out. Please provide some assistance.
Thank You,
Marc
Thanks from Russia, with love.
thank for sharing this…really appreciated!!
Thank you very much for sharing with us. It’s much more useful than the classic jquery lightbox
Great tool, so useful in giving the site a little extra umph. Now to implement it correctly…
I need it, thank you.
I have it working thanks.
how do I add description and hyperlinks.
You do realy good job
Thank you for prettyphoto and INK