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

62 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?

  4. João Paulo says:

    How would Catch the value of Longitude and Latidute starting from hum attribute?
    var latlng = new google.maps.LatLng(value attribute);

  5. Clara says:

    Hello! Sߋmeone in my Myspace ցroup shared tɦis site with uus ѕo I cme to take a look.
    I’m ɗefinitely enjoying tɦe infߋrmation. I’m bookmarking ɑnd աill be tweeting tҺіs to my followers!
    Exceptional blog аnd superb design.

  6. Yaser says:

    how to add this plugin to bootstrap 3

  7. Bob Dietrich says:

    Excellent page! Each single day I am personally learning a bit more about NodeJS. It truly is definately the only real language to educate yourself on long-term. I have completed the BackSpace.Academy Amazon web services (aws) Certified Developers route. They have expanded a different Realm of apps for myself. Now I have to spare the time to get programming!

  8. Jason says:

    Hey therᥱ! I’ve been following your website for some time now and finally got the bravefу tօ
    go ahead and giive ʏyou a shout out from Humbe Tx! Juѕt wanted to
    mention keepp սр tҺe fantastic work!

  9. Daniela says:

    It’s possible to have the plugin responsive? I’ve to use with bootstrap
    Thank’s
    Daniela

  10. תמונות אמיתיות ואותנטיות של נערות לווי אמתיות תוכלו לצפות באתרינו בכתובות 1800800

  11. 1800800 הינו מכון יוקרתי המספק שירותי סקס וליוי במרכז ישראל, אזור ת”א והסביבה.

  12. פרזידנט אסקורט מציג סרטי סקס אדיר חזק לסביות

Leave a Reply