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

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

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.

80 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

  11. ball games says:

    I d have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think.

  12. Your blog is very interesting.

  13. Quickbooks says:

    If you are searching for Quickbooks pro support phone number then just dial +1-866-502-0204. Our technical support team is 24/7 available for you to solve all of your Quickbooks server issues.
    Whenever you face an issue, call us today and take advantage of our unparalleled technical support, we try our best to fix your problem and provide you hassle-free working environment.

  14. Anon says:

    Added window output calculation function in %

    pp_settings = jQuery.extend({
    resiza_percent: 0
    var resiza_percent = settings.resiza_percent;
    var imageWidth = imageWidth – Math.round( Math.floor(imageWidth) / 100 * resiza_percent);
    var imageHeight = imageHeight – Math.round( Math.floor(imageHeight) / 100 * resiza_percent);
    // before

  15. Selena says:

    Exclente post! me gusto mucho y muy util ademas de instrucctivo. ! Gracias

  16. Selena says:

    Excelente post! super instructivo! gracias!

  17. there is enough information to figure it all out, but a simplified tutorial would be great!

  18. mrvinny says:

    Great info really very helpful to me and thank you for share with us.

  19. phyteney says:

    I was excited to uncover this site. I need to to thank you for
    ones time just for this fantastic read!! I definitely really liked every part
    of it and i also have you book-marked to see new information on your blog.

  20. Angelique Holtzmann says:

    I can say that I often wrote essays on similar topics. Sometimes I ordered texts for these essays, but I wrote most of it myself. By the way, if you need to order text for an essay or article, then I can advise you on one fairly reliable option. Here is the link http://bestwritersonline.com/ . Here you will find a list of excellent writing services, so be sure to take a look

  21. Benedict Camberpruff says:

    I can say that I often wrote essays on similar topics. Sometimes I ordered texts for these essays, but I wrote most of it myself. By the way, if you need to order text for an essay or article, then I can advise you on one fairly reliable option. Here is the link http://bestwritersonline.com/ . Here you will find a list of excellent writing services, so be sure to take a look

  22. Garmin Map updates is an ultimate destination to keep the maps and software updated. We are here to tell you how you can manage Garmin map updates correctly.

  23. Teddy says:


  24. datador says:

    Como vai ? você tem idéia de como ganhar dinheiro unindo o que você trata aqui
    , com a medicina ? Sei que a pergunta parece estranha ,
    mas este é um plano que tenho há tempos e depois de ver sua
    página a cabeça ficou a milhão

  25. The Roku streaming stick attributesa resolution up to 1080 full High Definition. Where ever the Roku stick is shipped, the remote control is shipped along with the device.

  26. kevin pietersen says:

    Analyzing computer problems may be a process which has become robotic within the. Device Manager, a native tool catalogs all of your computer’s hardware also because the software, Hardware development

  27. Great thanks for sharing it was very informative blog. A useful wording is a great way to highlight the significant aspects of the topic keep it up.

Leave a Reply