Archive for the ‘jQuery’ Category

August 26th 2010

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:

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!

July 13th 2010

I recently wanted to test if I was able to give a 3D aspect to wall as a proof of concept, so I fired up textmate, started coding and ended up with this. I only used JavaScript and CSS(3). I also need to point out that this demo only work in Safari as I used a proprietary attribute “-webkit-perspective”.

First things first

Check out the following video to have an idea how it should look in your Safari browser. Check out the project page to test it out by yourself: http://no-margin-for-errors.com/demos/3d-wall/

You can also check out this other version, featuring more objects:  http://no-margin-for-errors.com/demos/3d-wall-products/

The basics

The way I laid down the HTML is fairly simple, I have a container and inside of it, I have an unordered list. The markup looks something like the following (tweaked for readability)

<div class="wall">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

The CSS

The CSS is also quite simple. There’s one very important property that needs to be applied to the container in order to be able to have the 3D effect in Safari or else the wall would look flat as it does in the other browsers. That property is the “-webkit-perspective” property. You can read more about it on the official Apple Safari developer documentation. After that, all I need to do is to rotate the unordered list (ul) on the “y” axis depending on the direction the user is sliding. That’s done using the “-webkit-transform” property.

The JavaScript

If you take a look at the JavaScript, you’ll see that it’s fairly simple. The only really important thing you need to do is to calculate the amount of degrees you which to rotate the list depending on the velocity of the drag. All of the angles calculations are done in the “perspective” function.

function perspective(){
	clearInterval(wall_interval);

	// Set an interval for the anim.
	wall_interval = setInterval(function(){
		if(wall_direction == 0){ // User stopped dragging
			if(wall_angle > 0 || wall_angle < 0 ){ // Bring it to neutral state
 				wall_angle  = wall_angle/1.1;
 				$('ul').css('-webkit-transform','rotateY('+(wall_angle*-1)+'deg)');
 			}else{ // Once neutral, cancel the interval
 				clearInterval(wall_interval);
 			}
 		}else{
 			wall_target_angle = wall_speed * wall_max_angle / wall_max_speed; // Calculate the angle based on velocity
 			if(wall_direction > 0 && wall_angle > wall_target_angle) { // Give the angle depending on the scroll direction
				wall_angle--;
			}else if(wall_direction < 0 && wall_angle < wall_target_angle){
				wall_angle++;
			}
			$('ul').css('-webkit-transform','rotateY('+(wall_angle*-1)+'deg)'); // Apply it
		}
	},20);
}

Bottom line

The proof of concept worked! It can be done today, just not widely supported. I was also quite impressed at how fast I’ve been able to build it, the rough has been done in about 2 hours, the rest of the time was spent tweaking the animations/styling the page. I didn’t document the code (I did comment it tho), feel free to take it and re-use bits of it.

This project sparked an idea?

Feel free to buy me a beer, or a coffee, or candies, or a car!

June 17th 2010

I’m working on a project where I need to inject qui a bit of HTML. The examples will feature jQuery but it works with any library as it is simply string handling in javascript.

So the problem we face is that a string of content on a single line is hard to read. Something like that:

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

It’s really not easy to maintain as you  have to figure out where in the HTML structure you want to add new elements.

So here’s the tip

To keep the HTML cleanly formatted simply add a backslash after every line. This way you escape the new line feed and the javascript thinks everything is on a single line. Here’s an example:

$(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

It’s a very nice way to keep the HTML structured to make sure the code is easily maintainable.

Hope you liked it

April 23rd 2010

Tiny new version I’ve just released. Basically it consists of 3 things:

• Bind events only when the loader is showed
• Fixed loader position when users scroll
• Added error control on loader path and alerts you in the event the loader image is inaccessible.

It is a suggested update but not critic.

Head over to the project page for more details.

April 9th 2010

April 8th 2010

Here’s my first book review ever, the first of, I hope, many more!

First of all I must say that I’ve been quite late and lazy on getting around all the new feature of jQuery 1.4+. Sure I was all excited to hear about the new stuff, but didn’t really into it deeper than the method names. I must say this book arrived in time for me as it allowed me to get deeper understanding of all the new methods.

What it is

Well…it’s a reference guide. It’s a book containing all the jQuery methods of version 1.4, see it as the paper version of the jQuery documentation. It contains all the methods, I didn’t notice any missing.

It also dissect all of them by explaining their purpose, the parameters they accepts, what they return or what they do. Every method is also completed by a nice working example so you can get an idea of what it look like used in a real project.

What it is not

It is NOT a book for someone who thinks it’ll contain tutorials and example of small working scripts. All it does is describe all the methods, gives you example on how to use them and it ends there.

There’s at the beginning of the book a dissection of a “typical” jQuery script explaining how everything ties together. It’s well explained and well presented but it’s not significant enough for someone to consider the buying the book upon that single chapter. There are other books that do a far better job at dissecting and giving you practical example.

Well who is it for then?

Well, I’d say this book is aimed at intermediate/advanced jQuery developer. It’s a book for someone who wants to know all the possibilities jQuery offers you. As I said before, this book cover all the method, it won’t tell you: “You want to call something upon every ajax calls you make in your application, well here’s how”, instead it’ll explain the .ajaxStart() method and it’ll be your job to figure out how to use it and when to use it.

That’s specifically why I think it’s aimed more toward intermediate/advanced developers, those who need a “paper jQuery API bible” more than a beginner that needs to be taken by hand and explained all the possibilites. It’s your job to figure out the possibilites based on what you’ll find in the book.

Would I recommend it?

Depending on your skill level, I think it’s a nice addition to the jQuery documentation found online. I personally went through it during transit while I had no access to a computer and it allowed me to discover methods I wouldn’t have noticed by browsing the jQuery doc.

Head over here if you’re interested in buying it: https://www.packtpub.com/jquery-1-4-reference-guide/book

March 15th 2010

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!

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!

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.

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.