prettyPhoto-Media_banner

prettyPhoto Media WordPress Plugin

Lightboxes, or modal overlays, are commonly used to present large images and other media on a website. Although there are numerous plugins in the WordPress Plugin Directory that offer a similar functionality, I decided to create my own.

prettyPhoto

The lightbox script of my choice is prettyPhoto, mainly because it is visually appealing, exceedingly versatile and yet still relatively lightweight (~ 21 kb minified, ~6 kb minified & gzipped). prettyPhoto is a jQuery lightbox clone that supports a wide range of different media types including images, videos (YouTube, vimeo or the like), Flash, iframes and inline content, making it a “full blown media lightbox”.

prettyPhoto is being developed by Stephane Caron, who kindly agreed to change the licensing terms of his code to make it GPL compatible following a request by the WordPress plugin support team. As the developer states, prettyPhoto is “totally free to use (…) in all projects, even commercial ones”. For detailed information on prettyPhoto please visit the project page.

Please consider donating to the developer to support prettyPhoto.

WordPress Plugin

The prettyPhoto Media plugin offers a convenient way to add the prettyPhoto lightbox / modal overlay functionality to any WordPress post or page.

Main Features

  • includes the latest prettyPhoto v3.1.4 script (pulled from https://github.com/scaron/prettyphoto)
  • fully customisable through the plugins settings page
  • configurable ‘hook’ attribute tag, support for HTML5 compliant ‘data-‘ attribute
  • option to automatically transform built-in WordPress galleries (linked to images) into prettyPhoto slideshows

Download

You can download the latest version of the plugin from the WordPress plugin directory:

Download prettyPhoto Media v1.4

Demonstration

Various content types

Large Image
YouTube Video
vimeo video
iframe content

63 thoughts on “prettyPhoto Media WordPress Plugin”

  1. HI,
    For your prettyPhoto Media Plugin for wordpress, is it possible to add an option to use it on all jpg images and not just images in galleries?

    Thanks,
    David

  2. Hi David, if I did get you right, that should at least not be completely impossible, although I have not thought about filtering specific filetypes in galleries.
    What is currently on my roadmap for the plugin is a better and easier WordPress integration in general. A solution would of course be manually adding the images and individually setting the gallery attribute.

  3. Hello. How do I remove the social tags at the bottom of the popup?

    How do I use alternate text instead of the file name?

    Also the vertical spacing for the arrows and photo #/# seems off in the squared corner themes.

    Thank you for your work.

    1. Jonathon, thanks for pointing that out, there currently is no option to remove the social tools. I will include that into the next update.
      The prettyPhoto title is defined by the ‘alt’ attribute and the additional description reads from the ‘title ‘attribute’. You can add these attributes from the WordPress media editor (-> edit image).
      The spacing issue must be somehow CSS related, you can for instance copy the styles from the prettyPhoto.css file (usually located in /wp-content/plugins/prettyphoto-media/css) to a new file (or your theme’s stylesheet) and modify it to your liking. Make sure to deactivate the ‘Load stylesheet’ option to avoid loading the default styles. Please note that I am not the author of the prettyPhoto script (or the theme files).

  4. Hi, excellent plugin. I tested similar plugins for displaying youtube videos in a lightbox-type pop-up but yours was the one that worked and offered very straightforward implementation.

    Folks, it’s as easy as adding ‘rel=”prettyPhoto”‘ and an href=”www.youtube.com/watch?v=XXXXX” to an tag to get it going.

  5. Hi I installed your app on my wordpress site to open up youtube videos however when I click the link all it does is goto the page….

    1. Sam, did you add the prettyPhoto hook to the anchor?
      Please make sure your YouTube link is formatted similar to this example:
      <a href="http://youtu.be/WddWYfcs4ls" rel="prettyPhoto">video link</a>

  6. Love this plug in! Is there any way to add Pin It (Pinterest) to each image in a gallery like you can for Twitter and Facebook?

    1. Thank You, Stefanie. That’s a great idea but I think this would require rewriting the social tools feature in the prettyPhoto script.

  7. Is there a way of adding personal videos eg. .flv from my own server not youtube or vimeo?

    1. .flv files can not be directly embedded in a web page since this would require some sort of external player. As it stands, prettyPhoto does not support such a feature.

  8. Great plugin, thanks much. One questions — is there a way to get the file name to not appear at the top left of the image when the file is enlarged? Looking at the .css but afraid to mess with it.

  9. Hello, I have added the plugin to my website. However, when I click on the image it shows it on another page. The gallery however has the rel=”prettyPhoto[gallery-5]” tag added to the images. What could be the problem

      1. i’m having the same issue. how can i check if the script has been loaded and initialised properly?

  10. Great plugin! Is it possible to launch the slideshow from a single image and not have to show the gallery grid? eg from your example above, launch the slide show from “Be on daisy” but hide all of the other gallery grid images on the page. I hope this makes sense.

    Cheers,

    david

    1. That would definitely be possible, but it would require some extra code to initialise prettyPhoto.

  11. Hi… I might missed it in the settings, but do I have to manually add the REL tag to images or is there a way for it to happen automatically?

    I’d like all images by default to open with prettyPhoto without me having to add the code

    1. There is a setting that allows you to enble prettyPhoto automatically for images in galleries, however you will have to add the corresponding tag to single images manually.

  12. I have been manually-coding prettyPhoto into WordPress sites the past few years. Your

    plugin makes implementation easier. Thanks for taking time to develop it.

    However, your plugin doesn’t work if the selector string on the “prettyPhoto Media Settings” page is set to anything other than the default “prettyPhoto” string. I corrected that problem by changing Line 61 in prettyPhoto-media_functions.php from:


    $out .= '$(\'a[' . prettyphoto_get_option( 'hook' ) . '^="prettyPhoto"]\').prettyPhoto(';

    To:


    $out .= '$(\'a[' . prettyphoto_get_option( 'hook' ) . '^="'. prettyphoto_get_option( 'ppselector' ) . '"]\').prettyPhoto(';

    -Bob

  13. Thanks for fixing that issue so quickly.

    Another issue is that even though tag content-type specification is optional with HTML5, it is required by HTML4 and any version of XHTML. Furthermore, some script minifiers don’t minify without it, because of language uncertainty. Consequently, Line 58 in prettyphoto-media_functions.php should be changed from:
    $out = '' . "\n";

    to:
    $out = '' . "\n";

    -Bob

  14. The comment editor obviously removes code inside angle brackets which changed both the text of my previous post and my recommended Line 58 changes. Anyway, if you look at Line 58 you will see that type=”text/javascript” should be added inside the script tag.

    -Bob

  15. The prettyPhoto Media plugin fails when webpage code is minified with “Autoptimize,” Minify, or YUI compression. It also fails when used with various other plugins. That happens because the jQuery library included with WordPress loads in “no conflict” mode. (See: jQuery noConflict wrappers)

    Replacing jQuery $ shortcuts in prettyphoto-media_functions.php, jquery.cookie.js, jquery.prettyPhoto.js, jquery.prettyPhoto.min.js, and pp-defaults.js with noConflict wrappers corrects that problem. I would be pleased to send you modified and tested files if you let me know where to send them.

    -Bob

  16. Question. If I activate the prettyPhoto plugin for a WP theme that is already purposing prettyPhoto as it’s built in lightbox, would changing the settings for the plugin in the Admin panel override the default settings built in? Tested this and it didn’t seem to change anything from these built in settings. Advise please. Thanks.

    1. I really don’t think that this would work out. To me it sounds as if prettyPhoto would be initialised twice that way, which would not make any sense at all. Furthermore, please note that the prettyPhoto script included in the plugin has been (slightly) modified.

  17. Hey I just installed prettyphoto. My question is probably really dumb but I can’t figure it out. I have a photo on my page but when i click it nothing happens. Any ideas as to what I’m doing wrong. Sorry for being so ignorant.
    -Jake

  18. Can you add rel tag automaticly please? I want to use this plugin but I have a lot of image and it impossible to add this tag foreach manualy!

      1. linuxgine, please do not submit your issues to the prettyPhoto repository on github. The repo solely contains the original prettyPhoto script, a jQuery plugin. prettyPhoto-media is built on top of that and just handles the integration with WordPress. Anyway, I will look into your proposed additions and see if i can add this functionality.

        1. A new version of my code :
          http://pastebin.com/66As7CcC

          Now, my code add automatically rel=”prettyPhoto” attribut when you have one image in a post or rel=”prettyPhoto[0]” attribut when you have more than one image in a post.

          Best regards.

  19. I have installed the pretty photo plugin however I am unclear how to make the gallery work ? Its probably the simplest thing I am overlooking. But as for right now I cannot figure it out ?

    1. Hi,

      Make sure the href comes before the rel attribute. That seems to have been my problem.
      Good luck.

    2. It appears that you should use rel, data-rel does not seem to work for me. But it’s works with rel.

  20. Congratulations on such a great plugin. I would like to know if there is a way that when people click “like” instead of liking the post it likes the photo that the person in clicking like for. In other words lets say that the gallery belongs to post named “gallery 1″ and you have 25 pics, currently if you open a picture and click like, the rest of the pictures will have the like button pressed as well, and on facebook what gets shared is the “gallery 1″ page insted of the specific picture.

    1. I am not happy with that behaviour, too. Unfortunately this is how it is implemented into the prettyPhoto plugin and it is unlikely to be changed any time soon.

        1. The Twitter button by default retrieves the URL of the current page, ignoring the prettyPhoto hash. Appears a bit strange to me as well, but please remember that I am not the author of the original jQuery plugin.

  21. Ate you familiar with any other plugin that works well with a facebook “liking” a picture?

  22. Is there a way to make the size of the box percentage based instead of fixed width using your plugin? Say I want the box to appear as 50% of the screen width instead of a fixed width from your settings.
    Any ideas?

  23. Can you please tell me if there is any solution for prettyPhoto plugin loading/shownig on mobile device in landcape mode?

    Thanks!

    1. I haven’t explained the problem…when you load website on mobile phone and when you click on image and click on “expand the image” is shows the full image size that is too large for the phone screen. If there is any fix to calculate the window width and height it would be great.

  24. I bought a Template that included the PrettyPhoto plugin. The gallery works but I can’t add pictures and I deleted the Template Pictures and they were individually shown but I want Gallery 1 Gallery 2 etc… With their own respective pictures inside. How would I make this happen? I really am stuck using this plugin as the template makes alot of other plugins not work, so I must make this one work or I can’t show Galleries. Thanks!

  25. Hi,
    Is there a way to make each thumbnail to open-up a full gallery of single images instead of just showing all images?

  26. Hello
    j’ai un petit souci que je n’arrive pas à résoudre avec le plug in.
    J’essaye d’utiliser la fonction
    first image
    ceci pour permettre aux internautes de passer d’une photo à une autre directement dans la lightbox mais je ne comprends pas où créer la [galleryid]
    Désolé de cette question qui peut paraitre simple mais j’avoue que là je n’y arrive pas
    Merci de votre aide
    Cdt
    Fred

  27. Hi! I really like PrettyPhoto, and I really like your plugin. Very well done with all the options being so readily changeable through the WP admin pages.

    I have one little suggestion: add a switch to optionally disable PrettyPhoto altogether when the user agent is a mobile device like an iPhone, Android, Blackberry, etc. – while it seems to work reliably on Android, I’ve seen odd results on from iPhones, and the lightbox probably doesn’t make much sense on these tiny screens.

    Thanks & keep up the good work.

  28. Hello,
    Great plugin for desktop use. How do I disable it on mobile devices? It doesn’t display or function well at all on my iphone.

    Many thanks

  29. Hi gang!

    Thanks for this awesome plugin! Love the layout! But unfortunately it won’t attach a thumbnail when I hit the facebook Like button on a certain gallery image.
    In fact Facebook Like button shares the whole gallery URL instead of the single image. The Twitter button works fine and it shows a link like:
    http://example.com/pagename#prettyPhotogallery-134/1/

    I found the code where the facebook and twitter mark-up is located (prettyphoto-media_settings.php)and was wondering how to correct that:

    $facebook_markup = ”;

    thanks!
    g

  30. Hi :) Tnx 4 your great plugin. Just a short question: I want the Facebook like button appears in english language, even if my website is in italian. I added the “locale=en_US?” in the iframe facebook link (jquery.prettyPhoto.min.js and jquery.prettyPhoto.js), but nothing changed… What can I do? Thank you very much :)

  31. Hi – this is a great plugin. I realized that the display WordPress image galleries by default with prettyPhoto is not working since the most recent update (WP 3.5). Is there help available?
    Thanx in advance.

  32. Hi! Big thanks for the plugin.
    Need Help in WordPress not working height and width. Change the height and width to what does not.
    The resulting image is not placed in the lower part of the screen and hidden, look here.

  33. I noticed that the plugin isn’t working anymore for video lightboxes, I am assuming it’s related to the latest WP update. Is there a known conflict with other plugins or anything that I can do to make it work again? Will this be fixed soon?
    Thank you so much!!
    Claudia

  34. Actually, this site is running WP 3.5 and as you can see, everything is working as expected. For those who experience incompatibilities, please check the scripts included with your current theme or other plugins for conflicts (try disabling/re-enabling one by one).

  35. Hi…
    We recently began using a social media wall on our site(s). In the instructions from that plugin, it specifically suggests your PrettyLightbox plugin to add jquery lightbox functionality to the social media feeds it generates. In Addition, it gives a sample code that needs to be added in order for things to function properly. It does not (however) provide any indication of where one might place that jquery code.

    Can you possibly help us figure out where we should be placing this code?

    code sample:
    jQuery(window).load(function(){
    jQuery(“.dcsns-youtube .section-thumb a, .dcsns-vimeo .section-thumb a”).prettyPhoto({
    autoplay_slideshow: false, overlay_gallery: false, social_tools:false, deeplinking: false, theme:’pp_default’, show_title: false});
    });

    Hoping for a response,
    cheers.

  36. I see that Facebook and Twitter are options for showing in the lightbox, how can I get or add Google+ to show?

Comments are closed.