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. […] This post was mentioned on Twitter by Kai Armstrong, Stephane Caron, Janek Todoruk, Christopher Magruder, Erick Aldana and others. Erick Aldana said: Tutorial: Opening custom content in prettyPhoto | Stéphane Caron … http://bit.ly/a5GscY […]

  2. Webspas says:

    What if I want to have this function alongside normal galleries in prettyPhoto? In my tests they simply can’t be together. Can someone help? (there aren’t much help in the forum…)

  3. […] was able to showcase everything from videos, images, flash, & now custom content (such as a Google map). Props to Stéphane Caron for coming up with such a sweet […]

  4. PA Parent says:

    Webspas: You can use another rel=””..

    $(“a[rel^=’popupMap’]”).prettyPhoto({…});

    and have .

    @scaron: Tell me if i’m wrong, but it miss the rel=”” in the example here ??

  5. PA Parent says:

    webspas: Sorry, seems that the A tag didn’t work,, but you have to have the rel=”popupMap” in the A tag :)

  6. Webspas says:

    Thank you very much PA Parent! I had tried some thing like that, but now it actually works!

  7. Webspas says:

    Is it necessary to use the uncompressed version to be able to use this custom content function?

  8. I don’t know if it’s necessary to use the uncompressed version… But you surely can download the uncompressed version and have it packed with packer (http://dean.edwards.name/packer/). It’s working for me.

  9. jenking says:

    how to add marker in google map?

  10. Lara says:

    Thanks for the awesome tutorial mate, it’s just what i was looking for.

  11. André says:

    Seems that I have a problem with that.

    I start the script by

    [code]
    $(“a[rel^=\’popup_movie\’]”).prettyPhoto({ custom_markup: \’\’, changepicturecallback: function(){ show_movie(); }});
    [/code]

    The trigger is [code][code]

    What I try to achieve, is to populate the div “movie_player” with a previous generated SWFobject:

    [code]
    var movie_flashvars = {
    ‘file': “media/Stuntshow_09_09.flv”,
    ‘image': “media/Stuntshow_09_09.jpg”,
    ‘logo.file': “content/media/watermark.gif”,
    ‘logo.position': “top-right”,
    ‘logo.hide': “false”,
    ‘skin': “player/youstunt.zip”
    };
    var movie_params = {
    ‘menu': “false”,
    ‘allowfullscreen': “true”,
    ‘allowscriptaccess': ‘always’,
    ‘wmode': ‘opaque’,
    ‘author': ‘sixtyseven’,
    ‘width': “512”,
    ‘height': “288”,
    ‘displayheight': “350”,
    ‘overstretch': “true”,
    ‘autostart': “0”,
    ‘bufferlength': “5”
    };
    var movie_attributes = {
    ‘id': “videoplayer1″,
    ‘name': “videoplayer1″
    };
    [/code]

    Last but not least the callback function:
    [code]
    show_movie() {
    swfobject.embedSWF(“player/player.swf”, “movie_player”, “512”, “288”, “9.0.0”,”clientscripts/expressInstall.swf”, movie_flashvars, movie_params, movie_attributes);
    }
    [/code]

    If I place div with the id “movie_player” on my page and call the function show_movie() manually, all works as expected: The div is populated with the movie I want.

    Could anybody help me out to get this working inside of prettyphoto? Any help is appreciated!

  12. André says:

    damn, the parser seems to ignore my [code] tags. But I hope you’ll get the idea.

  13. André says:

    Ah, and one last thing: If i use prettyphoto to display a hidden div with the movie in it, it works in FF but not in IE.

  14. TPo says:

    Very Cool!

    Has anyone tried loading a second prettyphoto from within the Google or Bing Maps code from a marker info window added to the initialize function in the example? I have been all over, and found some nice examples for v2 but nothing for a marker info window popup using Google Maps v3.

  15. Iv Souza says:

    Very good, but if I want to pass a parameter to the callback function, what do I do?
    Something like: changepicturecallback: function(){ initialize(‘myDiv’); }
    How I pass ‘myDiv’ by parameter ?

  16. sophie says:

    bonjour moi aussi j aimerais savoir comment on rajoute les marqueur sur une carte
    faut t il intégrer msid ? si oui comment ? ou faut définir les coordonnées du marqueur ? merci de votre réponse

  17. venkat says:

    #?custom=true&width=260&height=270 can i now will gmap work with out that link

  18. jp pretorius says:

    Nice, but pointless if you cant add a marker! Does anybody know how to do this please.

  19. kieran says:

    For all those who want the true Google Maps with a blip etc…
    Basicaly ignore the above tutorial and use:

    THE LINK

  20. kieran says:

    a href=”http://maps.google.co.uk/maps?q=CO1+1HF&ll=51.891219,0.899849&spn=0.008634,0.022724&oe=utf-8&client=firefox-a&gl=uk&z=16&iwloc=A&output=embed?iframe=true&width=640&height=480″ rel=”prettyPhoto”>Click here for map

  21. Robert says:

    How can I show one text?????

    Thanks

  22. Mattias says:

    For the folks asking about adding a marker, check the Google API docs @ http://code.google.com/intl/en-US/apis/maps/documentation/javascript/basics.html

  23. Den says:

    How can I apply prettyPhoto to show youtube video on my website?

  24. John says:

    I want to add Google Map Direction with the same plugin..Can u guys please give me the idea for that??

  25. John says:

    How can i add Google Map Direction to the same plugin, with One address would be my company’s address and the other address can be added by user…Please help me!

  26. Andrew says:

    Hi everyone,
    I have a question, just for an example, I open ‘google.com’ in my prettyPhotos, is there a way to automatically close the window as soon as I click on ‘google search’ in google?
    So in other words:

    I have site A where my prettyPhotos is installed, I go to google through the prettyPhotos, but when I click on ‘google search’ (or any other button) it will close my prettyPhotos automatically and open me this hyperlink in my main window.

  27. kaşe says:

    useful description of the gallery has been a successful web sites use it thank you very much

  28. laurisnet says:

    Hello,
    I didnt find ind documentation how to change main modal window size(width, height) when I am already opened it.
    It would be great feature for next versions to allow to change DIV size at runtime with API.

  29. Excellent! There were days I was looking how to make this thing with PrettyPhoto! Thank you so much!

  30. Henri Kuschkowitz says:

    Great work. I was having issues with getting html5 video to work using prettyPhoto and this solved it. For those tackling this issue as well, I realized that I had to have all my content on one line, no spaces. It would’t work otherwise. The video setup I used was based on the article Video for Everybody.

    I am now looking into having custom_markup for multiple items, like a gallery. Any thoughts?

  31. Henri Kuschkowitz says:

    Great work. I was having issues with getting html5 video to work using prettyPhoto and this solved it. For those tackling this issue as well, I realized that I had to have all my content on one line, no spaces. It would’t work otherwise.

    I am now looking into having custom_markup for multiple items, like a gallery. Any thoughts?

  32. I take pleasure in, result in I discovered exactly what I used to be having a look for. You’ve ended my four day lengthy hunt! God Bless you man. Have a great day. Bye

  33. Dario Subiela says:

    I have a list with a view map on each item, is it possible to make the link more dynamic, for example: Show Map

  34. Dario Subiela says:

    Dynamic link cont… Forgot that writing the link would actually display it as a link! – in the href is it possible to add “&ll=-42.4505, 145.546″ to the end of the link ref and dynamically get the map.

  35. You actually make it appear really easy with your presentation but I find this topic to be actually one thing which I feel I’d by no means understand. It sort of feels too complex and very extensive for me. I am looking forward in your subsequent publish, I will try to get the hold of it!

  36. Ehi Binitie says:

    great script have two issues.

    1) Trying to figure how to open up a piece of custom video embed code.
    2) Trying to figure out how top open up lightbox window automatically after a few minutes

    Any help would be appreciated!

  37. Christian Hill says:

    Is there a way to do this without the custom markup? Or a way to display multiple maps? If I embed the id of the map in the prettyPhoto initialization settings, I can’t display more than one map per page.

  38. Diego says:

    Muito BOM!!!

    Consegui usar tranquilamente..

    Só não implantei no meu site pq faltou aquela caixa de texto com o endereço exato do local…se tivesse isso..ficaria 100% o script.

    Pense nisso.

    De qualquer forma meus parabéns

  39. wido says:

    I love this script, it’s awesome. For all peoples who asked about add a marker:
    https://developers.google.com/maps/documentation/javascript/overlays#Markers

  40. Emiliano says:

    Hello… how can I pass variables to the iframe?
    page.html?custom=true&iframe=true&width=100&height=100&variable1=info_id
    Thank you very much!

  41. Paul D says:

    Hi his might be useful for some, regarding HTML5 video…

    I used the Inline content mode, this is the code:

    Note that I had to add some inline styling to hide the content, not sure why that was needed.
    Plus if you have more than one video on a page you need the preload=”none” HTML video attribute set, otherwise if you have many videos, they will all try and load at the same time, even though they aren’t immediately displayed.

  42. Paul D says:

    Sorry the code didn’t appear.

  43. Pedro says:

    Hi

    How can i translate the text of Gallery??

    I want translate the footer text , for example translate “1 of 10″ for “1 de 10. Fotos propiedad de CR Fotografía”

  44. JP Pretorius says:

    Has the marker issue been solved? I see a lot of people asking about this, nothing in the forums either. This PrettyPhoto is only useful to me if I can add markers.

  45. JP Pretorius says:

    My mistake, I see it was solved.

  46. rohit says:

    how i can open a prettyphoto lightbox when i click on google marker to display some content instead of infowindow

    any idea ??

    Thanks

Leave a Reply