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.

60 Responses to “Tutorial: Open prettyPhoto from an image map.”


  1. This is the best tutorials i ever open for the prettyphoto.

  2. Richardrobert says:

    An photo map is honestly a completely beneficial tool. It lets in you to draw more than one clickable regions on an photo and have them every hyperlink to a distinctive location. suppose pretty actually of a geographic map, and being capable of click extraordinary regions to visit greater precise maps of that place. Assignment Help Online UK

  3. wings io says:

    Your message is very meaningful, the content is also pretty and impressive, I like this article.

  4. if this is resolved… what is the solution??? help!!!

  5. fami tofu says:

    Out there, they’re picking up each other. In his heart, he silently welcomed the rain. Who are we now? basketball games

  6. Both of us don’t go a similar way, despite the fact that our ways are as yet parallel. Life goes round, the day is long. When will we meet?

  7. Akki12 says:

    There are more interested games are this website if you are agree to continue the website and play the more games in this website only one click to you have play the more games and you are get the more information are cool maths games this website mostly useful website if you are agree to enjoy the more games.

  8. Write assignment Samples with professional writers. Contact us today to avail up to 20% Discount. Ordering for the first time? It’s your lucky day, apple decision making offers up to 30% off on your first order. Our experts are working on all over the world and still now they solve 1000+ assignments.

  9. We the Best Assignment Experts are always ready to help those students who are facing problem for their coffeeville case study solution. We are offering data structure assignment solutions help through online and our work cost is very minimal.

  10. game says:

    the agme

Leave a Reply