This isn’t such an issue with the escape key, but not being able to use the left and right, for example in text inputs, is a pain.

The changes below add an additional option to Fancybox called useNextPrev which you can set to false to stop Fancybox adding listeners to these keys. I haven’t included the escape key as I think it’s far less of an issue.

The call to Fancybox after these changes would look something like this:

$('a.fancybox').fancybox({useNextPrev:false});

Changes needed to the fancybox javascript file:

replace:

} else if (e.keyCode == 37) {
	e.preventDefault();
	$.fancybox.prev();
 
} else if (e.keyCode == 39) {
	e.preventDefault();
	$.fancybox.next();
}

with:

} else if (currentOpts.useNextPrev && e.keyCode == 37) {
	e.preventDefault();
	$.fancybox.prev();
 
} else if (currentOpts.useNextPrev && e.keyCode == 39) {
	e.preventDefault();
	$.fancybox.next();
}

replace:

	$.fn.fancybox.defaults = {
		padding				:	10,
		margin				:	20,

with:

	$.fn.fancybox.defaults = {
		padding				:	10,
		margin				:	20,
		useNextPrev			:	true,

And there you have it. By default Fancybox will use the left and right keys, but you now have the choice to stop it.

Combined add and fire / show / open
Yes I know you can do this with $.fancybox(content, options)

It’s tough to add the fancybox listener and fire it at the same time, for example onclick or using a live event. That annoyed me in some circumstances. Previously I have resorted to adding fancybox to anchors on hover so it could fire onclick:

$('a.fancybox').mouseover(function()
{
    $(this).fancybox();
});

But that’s not cool. So I added the option to the core.

 
// replace
	$.fn.fancybox = function(options){
		$(this)
 
// with
	$.fn.fancybox = function(options)
	{
		if(options === 1)
		{
			options = {now:true};
		}
 
		$(this)

and

 
// replace
		});
 
		return this;
	};
 
	$.fancybox = function(obj) {
 
// with
 
		});
 
		if(options.now)
		{
			$(this).click();
		}
 
		return this;
	};
 
	$.fancybox = function(obj) {

You can fire it in two ways. If you are also including options then fire it on add by including now:true as an option like:

 
$(this).fancybox({
 
    now:true,
    showCloseButton : false,
    enableEscapeButton : false
 
});

or if you are not setting options then fire it on add like:

 
// note the (1)
$(this).fancybox(1);

Either way, fancybox should now open / fire / show as soon as you attach it to an element.

And for my next trick….

Stop lightbox vertical movement

The default behavour is for fancybox to centre itself on vertical or horizontal scroll or window resize. I needed (see the final tweak) the box to stay still vertically even if I scrolled, but stay centre horizontally.

To implement this I made this change:

 
// replace
 
		to.top	= view[3] + ((view[1] - ((wrap.height() - titleh) + (shadow * 2 ))) * 0.5);
		to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
 
		to.top	= Math.max(view[3] + margin, to.top);
		to.left	= Math.max(view[2] + margin, to.left);
 
// with
 
                if(currentOpts.centerTopOnScroll)
                {
		    to.top	= view[3] + ((view[1] - ((wrap.height() - titleh) + (shadow * 2 ))) * 0.5);
		    to.top	= Math.max(view[3] + margin, to.top);
                }
 
		to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
		to.left	= Math.max(view[2] + margin, to.left);

and then add that new option to the defaults:

 
// replace
 
		centerOnScroll		:	false,
 
// with
 
		centerOnScroll		:	false,
		centerTopOnScroll	:	true,

You can then include the new option centerTopOnScroll:false to keep the top position static even on horizontal scroll.

The final change I have made is:

Clone the position and dimensions of an element

This tweak allows you to specify an element to clone. The original lightbox created will then be in the position and have the dimensions of the specified element. I bolded original because you can then alter the dimensions and positions yourself using jquery or by updating the content.

To implement this:

 
// replace
 
			final_pos = fancybox_get_zoom_to();
 
			fancybox_process_title();
 
// with
 
			if(currentOpts.clonePosition)
			{
				// get final_pos from the element we are cloning
				var pos = currentOpts.elementToClone.offset();
 
				final_pos = {
								height:currentOpts.elementToClone.outerHeight(),
								width:currentOpts.elementToClone.outerWidth(),
								left:pos.left,
								top:pos.top
							};
			}
			else
			{
				final_pos = fancybox_get_zoom_to();
			}
 
			fancybox_process_title();

and

 
// replace (after the previous change for vertical scroll)
 
to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
to.left	= Math.max(view[2] + margin, to.left);
 
// with
 
if(currentOpts.clonePosition)
{
	to.left = currentOpts.elementToClone.offset().left
}
else
{
	to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
}
 
to.left	= Math.max(view[2] + margin, to.left);

You then have the choice of including new options:

 
clonePosition:true
elementToClone:$('#element') // a jquery element

So there you have it.

Combined add and fire / show / open
Stop lightbox vertical movement
Clone the position and dimensions of an element

Read the original post by Jamie Thompson

 
(function($){
$.getScript = function(url, callback, cache){
	$.ajax({
			type: "GET",
			url: url,
			success: callback,
			dataType: "script",
			cache: cache
	});
};
})(jQuery)

$('#hover_div').hover(function()
{
/* something to do on mouseenter */
},
function()
{
/* something to do on mouseleave */
});

Great when you want a simple way of doing something when your mouse enters or leaves the selected element(s).

But then I needed to unbind the listener from the elements and I couldn’t for the life of me work out how.

/* WRONG */
$('#hover_div').unbind('hover');
 
/* WRONG */
$('#hover_div').unbind('mouseover').unbind('mouseout');
 
/* update 2: WRONG - but hopefully in the next release */
$('#hover_div').unbind('mouseenter mouseleave');
 
/* CORRECT */
$('#hover_div').unbind('mouseenter').unbind('mouseleave');

So there you go. That’s how to unbind hover().

That would be most of you then.

I can’t stand its special ways of doing things, so when I find an easy work around it makes me happy.

The latest one I have had to find and put into practice is a method for disabling some Select dropdown options in a form. Internet explorer doesn’t support the disabled attribute on option elements. The following code will only work in standards complaint browsers (not in IE 6 or 7):

<select id="select_1" name="a_select">
	<option>Please select...</option>
	<option disabled="disabled">----------</option>
	<option>One</option>
	<option disabled="disabled">Two</option>
	<option>Three</option>
</select>

But there is a simple(ish) workaround we can use. Replace the disabled option elements with empty optgroup elements. This looks good in all browsers except for Safari which won’t show the option using the below code:

<select id="select_1" name="a_select">
	<option>Please select...</option>
	<optgroup label="----------"></optgroup>
	<option>One</option>
	<optgroup label="Two"></optgroup>
	<option>Three</option>
</select>

By adding a little css styling magic and you end up with an identical outcome in all other modern browsers.

You can then enable and disable using javascript. Many people have written code which makes an option look like it’s disabled, waits for a click on the option element and then bluring it or focusing the next / previously selected option to make it act like it’s disabled.

I have come up with functions used with jQuery to disable / enable a select option by converting it to an optgroup and back. It is tested in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9 (although the opgroups jump to the bottom)

The code

$(document).ready(function()
{
	$.fn.extend(
	{
		optionDisable:function()
		{
			var ths = $(this);
			if(ths.attr('tagName').toLowerCase() == 'option')
			{
				ths.before($('<optgroup>&nbsp;</optgroup>').css({color:'#ccc',height:ths.height()}).attr({id:ths.attr('value'),label:ths.text()})).remove();
			}
			return ths;
		},
		optionEnable:function()
		{
			var ths = $(this);
			var tag = ths.attr('tagName').toLowerCase();
			if(tag == 'option')
			{
				ths.removeAttr('disabled');
			}
			else if(tag == 'optgroup')
			{
				ths.before($('<option />').attr({value:ths.attr('id')}).text(ths.attr('label'))).remove();
			}
			return ths;
		}
	});
});

Fixes and explainations

Safari requires a   in the optgroup tag to make it visible, and because of this Firefox 2 then required the height:ths.height() to stop it showing a blank line below the optgroup.
Two small fixes.

Additionally (as kindly pointed out by Luenyar below) this will not work if the options you are playing around with are already in an optgroup. That said, it will work but will create unwanted optgroups.

I almost forgot to mention that the functions are chainable!

Example

And to put it into practice you could use the following code snippets:

/* a specific option */
$('#a_select').children(':eq(2)').optionDisable();
 
/* the selected option */
$('#a_select option:selected').optionDisable().text('I am a disabled option!');
 
/* enable all options in a select */
$('#a_select').children().optionEnable();

Update: Be sure to read all the excellent comments for further thoughts and improvements

As I began to work on PagePlay more and more the javascript needed to be more and more clean and easy to adapt for when we add new functionality.

The last piece of easy to use goodness I have been working on is the photo editing functionality. When PagePlay first launched it would automatically resize your photos to the width of your template and you could edit the title and alternative text, but the photo would just be a resized version of what you uploaded and the thumbnail version would just be square versions of that photo.

The new photo editing toolbar allows you to select which part of the photo you want to use for each version needed on the site. You can choose your thumbnail, your content (standard) version and then when the new pageitems come in such as photobanner you will be able to crop again from the original for them.

The whole of PagePlays front end functionality is based on the jQuery javascript library and for the photo editing stuff I have gone with a very new and in development (currently on 0.9.5) but powerful plugin called jCrop. It has most of the functionality I needed and is simple enough for the end user to understand. It’s more useful feature for me was it’s (almost complete) ability to deal with scaled images.

So if you are looking for an image cropper and you already know a little about the jQuery library I suggest you give jCrop a look.