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.
CSS tip: Float an image without text wrapping under it.
December 10th 2009
I thought I’d share this little CSS tip that can be useful to some of you.
Let’s say you have this content that contains a thumbnail, you want to float the thumbnail but don’t want the text to wrap under it like below.
Instead you want the thumbnail to float and the text beside it, in it’s own column, like below.
Well that’s fairly easy to do, your markup should look something like this:
<div class="content">
<img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p>
</div>
Now what you actually do, is that instead of floating the thumbnail, you “position:absolute” it inside the content and add padding to the content so the text displays beside the thumbnail.
You CSS should look something like that:
.content {
padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */
position: relative; /* So the thumbnail is relative to this */
}
.content img {
left: 0;
position: absolute;
top: 0;
}
This should produce the result below. What actually happen is that the thumbnail which is absolutely positioned don’t take the padding of it’s container into account. That’s why it can be positioned over the padding.
Working demo
Check out my working demo to see it in a real world example.
Bottom line
So by using this technique you’re always sure your text will never wrap under your thumbnail, that’s one less thing to worry about!
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!
pointer-events, a property I wish we had now.
December 1st 2009
Mozilla announced it’d support pointer-events in Firefox 3.6. While the specification has apparently been part of SVG for a while, I never really heard of it before today.
The pointer-events CSS property basically specifies if the mouse event should be sent to the current element, or the element underneath it. Might not look very useful at first, but it makes a whole lot of sense when you’re working with “complicated” designs.
Real world example
Lets say you have that fairly simple design, a content area and a sidebar. The content area has a drop shadow that goes over the sidebar area. Something that look like the following.
The problem with the design is that in order to display the shadow over the sidebar, you have to bring it’s z-index up and since it goes a bit over the sidebar, there’s a small part of the content area that goes over the link and blocks the click. See below outlines in yellow.
Up until now, you really didn’t have much choices. In order to enable the click on the link, you’d have to include the shadow as a background image in the sidebar. The content area wouldn’t go over the sidebar anymore, but the drop shadow would’nt be over the content as the designer intended it to be.
Well with the pointer-events, you just have to see the value to “none” in the CSS and that means any click event sent on that element will automatically go to the element underneath it, in that case, the link in the sidebar.
.content {
pointer-events: none;
}
What now?
Unfortunately, this isn’t part of any CSS specification (yet). Mozilla decided to implement it in Firefox 3.6 and they are the only one right now. However, that’s a nice step forward and I really do hope others starts implementing it, because it’s really small, but can save quite some time in the long term.
