Raju Gautam

If you are using jQuery plugin called fancybox for displaying images in the overlay and you want to display some texts on the overlay, you can just set the title attribute of the anchor tag as follows:

Click to show image

Then your plugin implementation code should look like this:

$(document).ready(function() {
	$("# show-image ").fancybox({
		'titlePosition'	: 'inside'
	});
});

And another major problem that I faced recently is, I want to replace the title in the overlay with Cufon. Since the title in the overlay is rendered by the fancybox script, Cofon does not load and work for that. You need to replace the fonts after the overlay is completed. For this there is an event called onComplete in fancybox, where you can call the cufon refresh or replacement function like below:

$(document).ready(function() {
	$("# show-image ").fancybox({
		'titlePosition'	: 'inside',
		'onComplete' : applyCufon
	});
});
function applyCufon(){
	Cufon.replace('#fancybox-title', { fontFamily: 'Deutsch Gothic' });
}

Hope this will help you all who are really having problem with this.

I know most of the JavaScript programmers must have already tried to develop the plugins to extend the functionalities of jQuery. Developing a jQuery plugins is needed when we cannot easily do only with jQuery core framework. Since a couple of months, I have been working with jQuery for several sites and loving to work with this. Here I want to share something on how to develop a plugin for jQuery.

Starting with jQuert extending
There is a property that jQuery object itself has which is used to extend a new function to be a plugin of the jQuery. The property is ‘fn’ of jQuery main object.
Syntax:

jQuery.fn.pluginname = function(){
    // plugin codes go here
}

For example if we are going to develop a plugin named ‘helloword’ then we will do something like this.

jQuery.fn. helloword = function(){
    // plugin codes go here
}

Passing parameters
Parameters can be passed as follows:

jQuery.fn. helloword = function(param1, param2, …., paramN){
    // plugin codes go here
}

Parameters can be of array, object, string, numeric that are accessible in normal JavaScript. Normally for passing the options to the plugin, JSON is used. To understand JSON, please see my previous post.
Read More…

How to download & use jQuery

Developer – John Resig (http://ejohn.org/)
jQuery is a new kind of JavaScript Library.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Downloading jQuery

The library can be simply downloaded from its download page.
http://docs.jquery.com/Downloading_jQuery
There are two types of files for jQuery libraries and for other most of the plugins; compressed and non compressed. Compressed files are not easily human readable and non-compressed are normally readable and these can be easily modified hence are also called as source files.

Including jQuery library in the page
http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.js – non compressed or
http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js – compressed
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js – non compressed or
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js – compressed

Read More…

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. SON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};

In this example, an object is created containing a single member “bindings”, which contains an array containing three objects, each containing “ircEvent”, “method”, and “regex” members.
Read More…