prettyPhoto – 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.9.8 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/ 53
prettyPhoto 3.1.1: Deeplinking, social sharing, win http://www.no-margin-for-errors.com/blog/2011/04/13/prettyphoto-3-1-1-deeplinking-social-sharing-win/ http://www.no-margin-for-errors.com/blog/2011/04/13/prettyphoto-3-1-1-deeplinking-social-sharing-win/#comments Thu, 14 Apr 2011 00:21:34 +0000 http://www.no-margin-for-errors.com/?p=938

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here’s yet another update that I’m quite proud of. This version introduces 2 new features.

Project Page »Support forums »

First new feature, deeplinking

From now on, every time a prettyPhoto window is opened, the url will be updated. That means that you will be able to share a link to a specific picture. Just follow this link for an example: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto[pp_gal2]/0/

As usual, this feature is customizable and can be disabled if you don’t wish to use it. The setting is called “deeplinking”. A complete list of settings can be found one the documentation page.

Second new feature, social sharing tools

Social is big, we all know it. So I’ve added social sharing tools straight in prettyPhoto. These tools in conjonction with the new deeplinking feature, allow you to share specific prettyPhoto picture all over the social web.

As usual, this feature is customizable and can be disabled if you don’t wish to use it. The setting is called “social_tools”. You can either customize the social tools markup of set it to false to disable the feature. A complete list of settings can be found one the documentation page.

Bug fixes

This version also fixes several bug, here’s the complete list:

  • Fix IE7 overlay_gallery overlay bug
  • Fix bug when opening percent based media then opening normal sized media, the second opened image wouldn’t be resized.

If you need any support, please visit the support forums.

]]>
http://www.no-margin-for-errors.com/blog/2011/04/13/prettyphoto-3-1-1-deeplinking-social-sharing-win/feed/ 38
prettyPhoto 3.0.2: Much needed bug fixes http://www.no-margin-for-errors.com/blog/2011/03/07/prettyphoto-3-0-2-much-needed-bug-fixes/ http://www.no-margin-for-errors.com/blog/2011/03/07/prettyphoto-3-0-2-much-needed-bug-fixes/#comments Tue, 08 Mar 2011 01:30:01 +0000 http://www.no-margin-for-errors.com/?p=781

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I know, I haven’t been really active lately, but don’t worry I was working on prettyPhoto for the past several months. This new version does not boast any new feature (*sad face*), but it does contains a lot of bug fixes. It is a recommended update for anyone running prettyPhoto on their site.

Where can I get it?

Head over the project page to download this new version 🙂

You can also follow the project on github to be up to date on the latest prettyPhoto development

Help it broke my site!

As usual, if you have any problem with this new release, please head over the support forums where you will be taken care of.

Fixes/Changes

  • Fixed: The overlay gallery is now only displayed on rollover to resolve issue where it always showed during slideshow
  • Fixed: Made the filetype check case insensitive
  • Fixed: Percent based sizes to be independant
  • Fixed: Issue with trailing characters after the filename
  • Fixed: An issue when opening big images in inline content
  • Fixed: Make sure the content never scroll over the top
  • Fixed: Initial prettyPhoto position
  • Fixed: Slideshow autoplay when closing – reopening prettyPhoto.
  • Fixed: Scroll issue in IE
  • Fixed: Width issue in IE
  • Fixed: prettyPhoto default size
  • Fixed: image preloading and image injection code
  • Fixed: Resize icon behavior
  • Changed: prettyPhoto now loops through the gallery instead disabling the next arrow on the last item
  • Changed: Namespaced events to play better with other plugins.
  • Changed: Keyboard event to only preventDefault on actions used by prettyPhoto

 

]]>
http://www.no-margin-for-errors.com/blog/2011/03/07/prettyphoto-3-0-2-much-needed-bug-fixes/feed/ 19
prettyPhoto 3.0.1: Bug fix for jQuery 1.4.4 http://www.no-margin-for-errors.com/blog/2010/11/24/prettyphoto-3-0-1-bug-fix-for-jquery-1-4-4/ http://www.no-margin-for-errors.com/blog/2010/11/24/prettyphoto-3-0-1-bug-fix-for-jquery-1-4-4/#comments Thu, 25 Nov 2010 02:29:17 +0000 http://www.no-margin-for-errors.com/?p=752

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
It occurred to me that jQuery 1.4.4 broke the API functionality of prettyPhoto. So I’ve just patched it and updated the files.

Head over the project page to download the latest version.

]]>
http://www.no-margin-for-errors.com/blog/2010/11/24/prettyphoto-3-0-1-bug-fix-for-jquery-1-4-4/feed/ 33
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/ 68
prettyPhoto 3.0 is live. http://www.no-margin-for-errors.com/blog/2010/09/15/prettyphoto-3-0-is-live/ http://www.no-margin-for-errors.com/blog/2010/09/15/prettyphoto-3-0-is-live/#comments Thu, 16 Sep 2010 00:56:47 +0000 http://www.no-margin-for-errors.com/?p=708

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
prettyPhoto 3.0 has been in the work for quite a while now. The latest update (2.5.6) dates back from January. So it has been in beta for quite a while a it is now ready for prime time.

Project Page Documentation

Changes

I fixed some stuff, changed some setting but most important, I’ve added features that have been lacking for quite a while. See the full (color coded!) changelog below.

  • Added: Keyboard event bindings as a setting.
  • Added: Inline galleries.
  • Added: Multiple prettyPhoto with different settings on one page.
  • Added: Slideshows!
  • Added: Custom markup support (will write a tutorial soon)
  • Fixed: Vimeo video ID parsing.
  • Fixed: Double click causing a where prettyPhoto would open without the faded background.
  • Fixed: Bug when an image would not resize after opening an iframe.
  • Fixed: Image resizing issues when allow_resize is set to false. Images now center properly.
  • Fixed: “Image cannot be loaded” message bug. Removed the toLowerCase, a bug I introduced…can’t really say why I did that 🙁
  • Changed: Vimeo video now uses their new universal player. http://vimeo.com/blog:334
  • Changed: Default theme, now facebook.
  • Changed: Default speed, now fast, feel snappier.

To tie in with this release, I also created a new FAQs page. Some of you had recurring problem, so I’ll try to cover most of them in that page.

The future

Also, either subscribe to my RSS feed or my Twitter feed because I’ll be launching a “tutorial” series soon. These tutorial will be to help you cover more advance ground using prettyPhoto.

As usual, I hope you like to projet, feel free to comment, contribute, donate 🙂

]]>
http://www.no-margin-for-errors.com/blog/2010/09/15/prettyphoto-3-0-is-live/feed/ 37
prettyPhoto 3.0: Updated beta. http://www.no-margin-for-errors.com/blog/2010/08/26/prettyphoto-3-0-updated-beta/ http://www.no-margin-for-errors.com/blog/2010/08/26/prettyphoto-3-0-updated-beta/#comments Thu, 26 Aug 2010 17:41:54 +0000 http://www.no-margin-for-errors.com/?p=671

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Hey I’m not dead. Neither is prettyPhoto. My last update dates back to March 15th, I’ve been quite busy. Part of it is job, the other part has been Final Fantasy 13 😉

But the good news is, I have been working on prettyPhoto during that time. So today I release an updated beta version with several bug fixes that were in the previous version.

Here are the full details:

  • Added: Keyboard event bindings as a setting.
  • Added: Inline galleries.
  • Added: Multiple prettyPhoto with different settings on one page.
  • Added: Slideshows!
  • Added: Custom markup support (will write a tutorial soon)
  • Fixed: Vimeo video ID parsing.
  • Fixed: Double click causing a where prettyPhoto would open without the faded background.
  • Fixed: Bug when an image would not resize after opening an iframe.
  • Fixed: Image resizing issues when allow_resize is set to false. Images now center properly.
  • Fixed: “Image cannot be loaded” message bug. Removed the toLowerCase, a bug I introduced…can’t really say why I did that 🙁
  • Changed: Vimeo video now uses their new universal player. http://vimeo.com/blog:334
  • Changed: Default theme, now facebook.
  • Changed: Default speed, now fast, feel snappier.

Download

So you want to test it? You can find the demo page here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/

I suggest you test it on your website, you can find a zip file here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/prettyPhoto_3.0b.zip

Please note that since it’s a beta, you should retest everything on your own to make sure nothing breaks.

Bug reports

Please report any bug in that thread in the forums. I’ll do my best to get them squashed to release that update as quickly as possible.

Thanks!

]]>
http://www.no-margin-for-errors.com/blog/2010/08/26/prettyphoto-3-0-updated-beta/feed/ 30
prettyPhoto 3.0: Beta http://www.no-margin-for-errors.com/blog/2010/03/15/prettyphoto-3-0-beta/ http://www.no-margin-for-errors.com/blog/2010/03/15/prettyphoto-3-0-beta/#comments Mon, 15 Mar 2010 17:50:11 +0000 http://www.no-margin-for-errors.com/?p=403

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here it is! The beta version of prettyPhoto 3.0. Why beta? Because there are several big changes in this version and before making it official, I really want it to be working properly. I tested the usual stuff myself, but I really want to throw it out to the community so you guys can test it.

Summary of changes

  • Ability to initialize multiple prettyPhoto with different settings
  • When opening a gallery in prettyPhoto an inline gallery is presented over the photo. See post thumbnail.
  • Slideshow! See settings in jquery.prettyPhoto.js
  • Changed defaut theme, “facebook” theme is now default.
  • Changed the default speed to fast, feels snappier now.
  • Code optimization, removed about 70 lines of crap.

Download

So you want to test it? You can find the demo page here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/

I suggest you test it on your website, you can find a zip file here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/prettyPhoto_3.0b.zip


Please note that since it’s a beta, you should retest everything on your own to make sure nothing breaks.

Bug reports

Please report any bug in that thread in the forums. I’ll do m y best to get them squashed to release that update as quickly as possible.

Thanks!

]]>
http://www.no-margin-for-errors.com/blog/2010/03/15/prettyphoto-3-0-beta/feed/ 115
prettyPhoto 2.5.6: Bug fixes (only!) http://www.no-margin-for-errors.com/blog/2010/01/05/prettyphoto-2-5-6-bug-fixes-only/ http://www.no-margin-for-errors.com/blog/2010/01/05/prettyphoto-2-5-6-bug-fixes-only/#comments Tue, 05 Jan 2010 01:49:38 +0000 http://www.no-margin-for-errors.com/?p=345

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Allright, I’ll be very honest with you. I introduced some bugs in prettyPhoto 2.5.5. Luckily those I’m aware of just got fixed!

I fixed:

  • A bug where the loader icon wouldn’t display properly;
  • A bug where the videos would still play when prettyPhoto was closed;
  • A bug where prettyPhoto wasn’t displaying properly upon re-initialization.

If you still see some bugs (hey, I’m human!) or need some support, check out the support forums.

Head over the project page to download it!

]]>
http://www.no-margin-for-errors.com/blog/2010/01/05/prettyphoto-2-5-6-bug-fixes-only/feed/ 23
prettyPhoto 3.0 feature requests. http://www.no-margin-for-errors.com/blog/2009/12/22/prettyphoto-3-0-feature-requests/ http://www.no-margin-for-errors.com/blog/2009/12/22/prettyphoto-3-0-feature-requests/#comments Tue, 22 Dec 2009 14:11:27 +0000 http://www.no-margin-for-errors.com/?p=334

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
With the recent release of prettyPhoto 2.5.5, I want to start planning the 3.0 release. I already have some stuff I want to implement and I’d like to get the community input to make sure everyone is happy. Here’s what planned so far:

1) Ability to initialize multiple prettyPhoto with different settings.
2) When opening a gallery, have the gallery opened inside prettyPhoto so the user can quickly navigate through items.
3) Slideshow!

Let me know what you’d like!

As for the estimated ETA…when it’ll be done.

]]>
http://www.no-margin-for-errors.com/blog/2009/12/22/prettyphoto-3-0-feature-requests/feed/ 60