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.

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


  1. 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.

  2. Stephane says:

    @stuart: Please ask your question in the forums http://forums.no-margin-for-errors.com/

  3. Philip Dahl says:

    this is a great resource. You offer such great support. If I should receive any money from this project, I will surely donate!

  4. Dave says:

    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!

  5. Alan says:

    You show different themes but never show anything on how to use them or where to download them…..

  6. Fahim MD says:

    I am definitely going to use this on 2 of my projects and see how that goes. Thanks!

  7. Anjan Kumar says:

    Hi!

    This article is very useful. I’m using this technique in many of my designed sites.

    Thanks a Ton!

  8. Fabio says:

    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

  9. K.Pieter says:

    How can I use or download this item? Is there any film on youtube?

  10. SteG says:

    I was just looking for a resource like this for my site!
    Thanks! good job!

  11. john says:

    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!!

  12. Adam says:

    I’m trying to get this to work on my wordpress site. Is there something that has to be changed in the plugin files?

  13. PItty nice effect and easy to set up :)

  14. Marc says:

    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

  15. KPOT says:

    Thanks from Russia, with love.

  16. cardbaba says:

    thank for sharing this…really appreciated!!

  17. Anh says:

    Thank you very much for sharing with us. It’s much more useful than the classic jquery lightbox :)

  18. Brad says:

    Great tool, so useful in giving the site a little extra umph. Now to implement it correctly…

  19. sosi says:

    I need it, thank you.

  20. shelby says:

    I have it working thanks.
    how do I add description and hyperlinks.

  21. You do realy good job

    Thank you for prettyphoto and INK

  22. thanks for such a job

  23. mike says:

    Hi, just wonder if I could use loadajax inside image map, basically click to lanuch a html file using rel=”prettyPhoto[ajax]” .

    Thanks a lot!

  24. ki11ua says:

    Hello,

    What would i have to add if i would like to load a div in the prettyPhoto which is hidden in the page content?

    Thank you

  25. Manny says:

    Hi, this doesn;t work for me. Ít says that in XHTML 1.0 Strict the attribute ‘rel’ is not permitted for the area tag.

    Any help would be appreciated. Thanks.

  26. Arati says:

    This prettybox really work for my website.It has nice look.Thank you so much..You provide nice tutorial and source file.

  27. Pankaj Mishra says:

    Sir, thank you very much. The utility “prettyPhoto” has helped me a lot. I am new to website programming, and all I wanted to add this functionality to my site.Its a great piece of software. Thank you.

  28. Sentinnel says:

    Thanks a lot, Great information (i reach it too late)

  29. Carl says:

    Hi there. I have a somewhat odd question maybe… But once you have an image gallery going (from a template) how can I increase or decrease the speed at which the images change? I am setting up a small 2 page site and the home pages displays 8 images using prettyphoto, but the rate at which they change is way to slow.

    Please help if possible.
    Thank you.

  30. Mahesh says:

    Hello there,

    I have embed your video slider in my site. It’s really great. But when I click on image to open video file, page gets refresh automatically.
    I didn’t get why this happening??? I have also read all the documentation and tutorial on “http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/”.

    Please Help me to sort out this problem!!!

  31. paul says:

    Does anybody know how to resize pop up images from prettyPhoto lightbox clone?I cant get it work, searched google etc.. dont seem to get any luck though not a javascript guy.
    Tried several tips but didnt get it work.Please help.
    Thank you.

  32. Eric says:

    I cannot get “prettyPhoto” working with http://code.jquery.com/jquery-latest.js. Any help is appreciated.

  33. CENTiNEX says:

    Due tu prettyphoto using jQuery.browser , now deprecated in jQuery 1.9.0, prettyphoto do not work anymore.
    Try using an older version of jQuery, or use the migration plugin for jQuery, which enable back old (deprecated) things.
    https://github.com/jquery/jquery-migrate/
    This what cause the trouble : http://api.jquery.com/jQuery.browser/

  34. Nathan says:

    @Eric The newest release of jquery broke it. I used jQuery 1.8.3 and it started working again.

  35. Cort Lawrence says:

    I am using pretty photo, and it works great, but I am looking to have multiple (non-mixed) libraries full of pictures.

    Is this possible? Where can I hide a folder of photos?

    Thanks!

  36. Ziri says:

    hi i have question, on image map prettyphoto, where can I get this:

    the image map am working is not loading :((
    thanx very much on your time!

  37. Paul Buckland says:

    I love your lil script for pop up lightbox type images but how do I remove the twitter link etc as well as the white box at bottom and add a close button. I will gladly donate
    best regards

  38. Tom says:

    Hi,

    I am trying to make a portfolio website for myself and would like to use the box popup for youtube videos after clicking on a thumb but i can seem to figure that part out.

    any help would be grateful

Leave a Reply