prettyPhoto 2.5.6: Bug fixes (only!)
January 5th 2010
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!
prettyPhoto 3.0 feature requests.
December 22nd 2009
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.
Just in time for the holidays, prettyPhoto 2.5.5!
December 21st 2009
It’s here, new prettyPhoto! Added new features, modified the settings, optimized the code a bit.
New features
Inline content support. You now just have to link to the ID of the element you want to open in prettyPhoto and prettyPhoto will do the rest.
I also added support for Vimeo, just link the the video page and prettyPhoto will do the rest.
New theme! I’ve bundled a new theme inspired by the facebook modal box.
Settings changes
Added wmode as a setting. You can now specify if your flash movie needs to be opaque or transparent.
Added autoplay as a setting. You can now specify if you want the movies to start playing as soon as they are opened in prettyPhoto…or not!
prettyPhoto markup, flash markup, quicktime markup and inline content markup are now in settings. So if you ever need to modify flash params, add bits of HTML you can change these settings and you’re set.
How to upgrade?
As usual, just replace the javascript and css file with the new one. Add the facebook theme images in case you want to use that theme and you’re set!
Where is it?
The project page is here, the support forums are here, the donations are here.
target=”_blank” XHTML replacement.
December 16th 2009
As you must already know, using target=”_blank” to open a page in a new window doesn’t validate in XHTML.
There’s a javascript workaround tho. This example is based on jQuery since it’s always included in my project and it’s my library of choice but it could be easily converted to any library.
The basics
To replace the target=”_blank” you should use the rel attribute. This attribute is used to specify the relationship between the document that contains the link and the document it refers to. So your links should have the attribute rel=”external” to specify the link is not a link inside your website but to another website. There are plenty of values possible for you rel attributes, I invite you to read about microformats.
Now rel=”external” doesn’t mean target=”_blank”. Adding that attribute won’t open the links in new windows, it’s only a more semantic way of specifying the relationship between pages. Since some of you might not want to open rel=”external” in new windows, browser vendors didn’t implement it as being the same as a target=”_blank”. That when javascript comes into play.
The javascript
$(function(){
$('a[rel="external"]').attr('target','_blank');
});
Easy isn’t it?
You actually need to either put that in a script of his own or at the bottom of you webpages. $(function(){ … }); is actually the short document.ready call in jQuery. Once the document is ready, it’ll traverse through each link and add the attribute target=”_blank” to them. This way the W3C validator doesn’t see them and you page still validates.
Working markup
Here’s a working example with jQuery loaded.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('a[rel="external"]').attr('target','_blank');
});
</script>
</head>
<body>
<a href="http://google.com" rel="external">Google!</a>
<a href="http://no-margin-for-errors.com" rel="external">My site!</a>
</body>
</html>
Your opinion?
What do you think about this technique? I personally stopped caring about my pages not validating when I use target=”_blank”, but I know some people really want to see their page validates whatever the price.
prettySociable 1.2. Small small small update.
December 3rd 2009
I’ve just released an updated version of prettySociable. It consists on a bug fix where the “drag to share” container wouldn’t be position properly in the case the shared element has a border and/or padding.
I also added a little animation to the label, just to say it’s not only a bug fix push 
If you never experienced the bug yourself and don’t care about the label animation, this update is not necessary.
The updated files can be found on the project page.
If you have any problem with prettySociable, a request, or just want to say thank you, check out the dedicated forums. They are quite empty right now, come on, go ahead!
prettySociable 1.1
November 10th 2009
Here’s an updated version of prettySociable. It now supports bit.ly url shortening so you can easily track how many people clicked on the shared links. I also fixed a but where the “hover” would not display correctly on images that are not floating.
Head over the project page to download the new version: http://no-margin-for-errors.com/projects/prettySociable/
Check the forums for support: http://forums.no-margin-for-errors.com/?CategoryID=9
Feel free to comment if you have any suggestions!
Announcing prettySociable
October 28th 2009
I’m at it again. Here’s my latest plugin, prettySociable. It’s meant to make sharing easy while being fun for the user. It was inspired by the sharing on mashable.com. Come back soon for a wordpress plugin, a friend of mine is working on it.
Head over the project page for a demo: http://no-margin-for-errors.com/projects/prettySociable/
Feel free to leave you comments here, or on the forums.
prettyPhoto 2.5.4.
October 17th 2009
Only a bug fix for the theme fallback for IE6. I messed the version check so all IE falled back to the white square theme.
Download is over here: http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/#download
All projects are now back up
October 15th 2009
The last 2 are back:
It’s prettyDarnCool. Now time to bring back the most important blog posts.
Demystifying the jQuery selectors optimization
April 28th 2009
Lately, I’ve been experimenting a lot with jQuery selectors. I wanted to find the best way to select elements depending on the situations. I’ve found some information online, but most of them didn’t have number and even worst, they were wrong.
So I’ve built a little demo page where you can run the tests yourself, that way you’ll be able to confirm the numbers. Please note that you need a browser that supports script profiling, that can be Firefox with Firebug or Safari/WebKit (those are the one I use). The version of jQuery I used is 1.3. These test are representative of browsers that supports getElementsByClassname (Firefox, Webkit, Opera), the numbers might be off in browsers such as IE6/IE7, lets look at the future, not the past 
So to get started, it’s not true that the more precise you are in your selectors, the better. Some people tends to think (I was one of them) that $(’div.element’) was a better selector than only $(’.element’) because you target more preciselly what you are looking for. It’s not true, not only does jQuery execute more calls, but it’s also longer to process. Now lets say you want to be even more precise, not only you know the classname, but you also know this is the first element you’re looking for, your selector would be $(’div.element:first’). It’s even worst than only specifying the type.
So unless you really have to be really precise with your selectors, you should use a simple classname selector instead of the other 2.
Now, let’s move to selecting items at a specific position, once again, the simpler the better. Here are the cases I tested : $(’.sample-elements:first’), $(’.sample-elements .last:last’), $(’.sample-elements div.last:last’), $(’.sample-elements div:first’), $(’.sample-elements div:eq(2)’).
And I kept the best for the end, ID selector. If you can, this really is the way to go: $(’#second’). Not only is it the faster way to select an element, but it’s also the one that executes the less calls.
So that’s it for selectors, but what if you need to use complicated selectors.
What I usually do when I know I’ll have to use the same complicated selector multiple times, I store it in a global variable with a custom namespace. for example, this selector $(’.sample-elements div:eq(2)’) would translate to $third_sample_element. I add a dollar sign before it so I know this is a jQuery object. By doing this, you’ll do the complicated calls once, your object will then be stored in that variable and no more calls will be needed.
This kind of optimization is not “needed” when you develop small apps, but once you go into more compliated stuff, those small changes can really make a difference. And once you know the tricks, it’s really simple to put them into practice
Experimented it yourself? Have your own trick? Share them!
