Tutorial: Opening custom content in prettyPhoto

September 28th 2010

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

53 Responses to “Tutorial: Opening custom content in prettyPhoto”


  1. min says:

    There is a problem with the display maps with seo urls. Clicking link to map in footer on main page (htttp://www.xxx.com/), its ok, but clicking link on any subpage (url looks …xx.com/subpage/), prettyphoto display nothing.

  2. Paul says:

    There is another problem: since the height and width are set to certain numbers, if the prettyPhoto container is smaller than that size, the map will overflow. And if I set both of them to 100%, the map just disappears.

    Now my solution is to hide the link of triggering the map when the client screen is not big enough. Hope can help those who are in the same trouble.

  3. George Donaldson says:

    Link to What?? Open a google map Map does not display?

Leave a Reply