Tutorial – Stéphane Caron – No Margin For Errors http://www.no-margin-for-errors.com Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.13 Tutorial: Open prettyPhoto from an image map. http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/ http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/#comments Tue, 19 Apr 2011 12:44:49 +0000 http://www.no-margin-for-errors.com/?p=960

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
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.

]]>
http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/feed/ 51
Tutorial: Opening custom content in prettyPhoto http://www.no-margin-for-errors.com/blog/2010/09/28/tutorial-opening-custom-content-in-prettyphoto/ http://www.no-margin-for-errors.com/blog/2010/09/28/tutorial-opening-custom-content-in-prettyphoto/#comments Tue, 28 Sep 2010 12:59:20 +0000 http://www.no-margin-for-errors.com/?p=716

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Over time it became clear that people want to use prettyPhoto for a very wide variety of things. prettyPhoto is a jQuery lightbox that already opens images, videos, flash. While I want to keep the code as small as possible and cover most of the people needs, I also want to make sure everyone is happy with prettyPhoto. That means I cannot add every request to the code base. That’s why I’ve included a new setting called “custom_markup” in the latest release. This tutorial will cover the basics on how to use this new setting and make the most of it.

Please note that in order to be able to tinker with prettyPhoto to achieve similar results, you need some basic JavaScript knowledge.

After you have completed that tutorial you should be able to open a Google Map in prettyPhoto. As usual, if you have any questions, feel free to leave a comment.

Demo Download

The prettyPhoto setup

The first thing you need to do is download the latest version of prettyPhoto that can be found here. Then you need to initialize it just like you would for any other use, only difference is that need to pass an additional parameter, the “custom_markup” parameter. As the name state, this parameter should container the markup needed for the content you want to open in prettyPhoto. This content needs to have sizes defined or else the content wont resize properly.

Here’s an example using Google Map:

$("a[rel^='prettyPhoto']").prettyPhoto({
	custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>'
});

So now, in the content area of prettyPhoto, you will find a div with the id “map_canvas“.

The Google Map setup

Since this demo will use Google Map, you also need to make sure that all the JavaScript needed is included in the page. In that case, the following code is needed.

<!-- Google Maps Code -->
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>
<!-- END Google Maps Code -->

As you might have noticed, the code needed to initialize Google Map is wrapped into an “initialize” function. This function will be used in the next step.

The magic

So prettyPhoto has been initialized, the code needed for Google Map is there, what now? First you will need to modify the prettyPhoto initialization settings, you will use the “changepicturecallback” setting. This setting is a callback, a function that’s called after the prettyPhoto code has been executed. In that case, the callback is called every time prettyPhoto is opened or every time a new picture is shown. So what you want to do is call the Google Map “initialize” function. Here’s how:

$("a[rel^='prettyPhoto']").prettyPhoto({
	custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
	changepicturecallback: function(){ initialize(); }
});

You then only need a link to trigger the opening of prettyPhoto. Here’s what it looks like:

<a href="#?custom=true&amp;width=260&amp;height=270">Open a google map</a>

All the parameters are required or else the opening won’t work.

Bottom line

So that’s how you open custom content in prettyPhoto. For working examples, check out the demo pages or download the package.

Demo Download

]]>
http://www.no-margin-for-errors.com/blog/2010/09/28/tutorial-opening-custom-content-in-prettyphoto/feed/ 67