prettyPhoto - image map demo

This page has been made for demo purpose only.

Follow this link to read the related post: Tutorial: Open prettyPhoto from an image map.

Image Map

Click on one of the thumbnail to open prettyPhoto. The thumbnails are all in a single image and the links are put using an image map.

HTML Code

This is all the HTML needed. Simply add rel="prettyPhoto" to the <area> tags to let prettyPhoto know these links should open in it.

<img src="images/thumbnails/image_map.jpg" width="387" height="85" usemap="#image_map" border="0">



<map name="image_map">

  <area shape="rect" coords="6,11,72,73" href="images/fullscreen/1.jpg" rel="prettyPhoto[image_map]">

  <area shape="rect" coords="84,7,148,73" href="images/fullscreen/2.jpg" rel="prettyPhoto[image_map]">

  <area shape="rect" coords="161,8,226,73" href="images/fullscreen/3.jpg" rel="prettyPhoto[image_map]">

  <area shape="rect" coords="236,7,301,76" href="images/fullscreen/4.jpg" rel="prettyPhoto[image_map]">

  <area shape="rect" coords="311,8,380,76" href="images/fullscreen/5.jpg" rel="prettyPhoto[image_map]">

</map>
				

JavaScript Code

To initialize prettyPhoto with image maps, just put the following line of javascript before the closing tag of your </body>

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

  $("area[rel^='prettyPhoto']").prettyPhoto();

});

</script>