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.

Leave a Reply