Monday, June 25, 2012

World’s top 10 most popular fashion designers


World's top 10 most popular fashion designersWhen it comes to fashion, everyone has different tastes. However, these top 10 fashion designers have been adored by women all around the globe. They have proven their incredible talents and risen to the top of the fashion world. Their shows and art work speak for themselves.
To see the world’s top 10 most popular fashion designers:
1. Betsey Johnson
Betsey Johnson
2. Tom Ford
Tom Ford
3. Giorgio Armani
Giorgio Armani
4. Donatella Versace
Donatella Versace
5. Ralph Lauren
Ralph Lauren
6. Marc Jacobs
Marc Jacobs
7. Valentino Clemente
Valentino Garavani
8. Coco Chanel
Coco Chanel
9. Alexander McQueen
Alexander McQueen
10. Kate Spade
Kate Spade

Top Ten Worst Fashion Trends 2012

In this article we’re going to be sharing some very fascinating worst trends of the past year 2011. We all love to know the latest fashion trend, the most ‘In’ trend currently and so on, but this article is about the worst fashion trends introduced by the designers. I wonder what were they thinking when they came up with the following designs? I’m sure you’ll be surprised to see what those designers came up with, correction: people. I don’t think they should be calling themselves designers because what you’re about to see will definitely amuse you. So, let’s find out the top ten worst fashion trends 2011-2012.

10. Floral Printed Button-Down Shirt (MEN)
Even Peter Brady wasn’t able to pull off these shirts back in 70’s and even today nobody can pull off these shirts. This trend is absolutely BAD! Trust me guys, you all will look as if you’re wearing your Grandma’s table cloth. Always remember, the only flowers you should have or carry should only be on your date, not on your clothes for God’s Sake!


9. Day-Glo Animal Prints
Absolutely No! Day-Glo and cheetah never go together. Ok, when was the last time you saw a neon spotted cheetah wandering in Africa? I strongly suggest you people to leave this crazy trend in the past when it was introduced in 2011.



8. The Romper
Who came up with this pathetic idea? I seriously want to know! There is absolutely no way that this dress and even the trend will look hot. You’re just going to end up as if you miss the old days when you were an infant.


7.  Ice Skate  Heels
It appears that Kristi Yamaguchi and Manholo Blahnik decided to turn into a shoe alliance. We all love adventurous fashion, but this one right here is a complete joke. These shoes will only help you when you forget to bring your skates when you’re out for ice skating. All you need to do is jump on to the ice with these bad boys on! Hilarious I must say!


6.  The Sheer Skirt
Now there is so much left for the imagination! Every single person can see what exactly you’re trying to expose here. Every time I lay my eyes on this skirt, I start to wonder…… well let’s keep this for another post :)


5. Spiked Heels 
If you’re going to a war, only then these stilettos are perfect. What kind of a man would be dating a woman wearing these stilettos? Yes, men like heels but not the ones which can cause serious injuries to the sensitive and delicate areas of their bodies. One of my favorite ‘worst’ fashion trends of this past year.


4. The D-veep Neck Tshirt
This past year our dear boys moved from bad to worse by trading the bedazzled Ed Hardy t-shirts for an ugly looking Deep V Neck t-shirt. It’s about time they realize that tight t-shirt will not make them look sexy or tough. Definitely a total failure these t-shirts!


3. Harem Pants
Either the pants are short or long, sequins or not, it doesn’t matter at all. Harem pants only makes you look like as if you’re carrying an unwanted load. Can’t believe designers can be so lame!


2.  Bandage Dress
This past year, Hever Leger’s bandage dresses definitely didn’t take the right turn. Every fashionistas around were trying their best to fit in into a terribly tight frock. I can’t believe how did this trend even start? This very dress will not make your body look good by any means, but it will definitely help you not to breathe or move if that’s what you’re looking for.


1.     Spider Lashes
Please never try this at your home! This particular trend is total fashion disaster for people to follow. Women who didn’t follow this trend are the most sensible women around I must say. These long ashes definitely have the ability to accidently hit someone in the eye. A total fashion disaster!

Top 10 Best Fashion Designers in the World 2012

Fashion designers are the people who not only design clothes, but also design dreams. The list for the best fashion designers is created based on the success and fame earned by a designer. The following list consists the names of the most famous and incredible designers in the world. Here, in this article we’re going to be sharing the top most amazing designers we all know. Without wasting any more time, let’s find out the top ten best fashion designers in the world 2012.

10. Marc Jacobs
Jacobs belongs to a Jewish family and is the head designer of “Marc by Marc Jacobs, “Louis Vuitton”, “Diffusion Line” and “Marc Jacobs.” While he was studying at the Parson College of Design, he sold out his first ever stack of knit sweaters and with in no time he became the first of celebrities. In 2010, he was also mentioned in the list of 100 most influential people in the world, by Time Magazine.

9. Betsey Johnson
She is famous for her feminine and whimsical designs all over the world. She truly holds a deep knowledge of costumes. Her name was also mentioned in the “Fashion Walk of Fame” back in 2002 and right after that she expanded her business by introducing new line of handbags, scarves, accessories and hats into her specialization.

8. Kate Spade
She is the co-founder of the brand “Kate Spade New York,” she holds a graduate degree in journalism from Arizona State University. She is widely known for her designer handbags and is considered to be one of the best bags around.

7. Tom Ford
Tom is widely famous for overhauling ‘Gucci’ in its bad days. Tom Ford is the founding father of the brand ‘Tom Ford’ which totally dominates the accessory and menswear market.

6. Ralph Lauren
Ralph Lauren is an incredible designer world has ever seen. He is widely known for his excellent designing and for the brand he introduced ‘Polo Ralph Lauren.’ In 1972, he earned his fame when he introduced a notable short sleeve shirt with the Polo logo on it. He is definitely one of the best designers around.


5. Coco Chanel:
She is definitely a leading figure in the fashion industry. She was a French designer and was famous for her famous brand ‘Chanel.’ Up till now, she is the only single fashion designer to be named on the most important people of the century by Time Magazine.

4. Giorgio Armani
Giorgio Armani is known to be the only designer who changed the trend of fashion industry after creating the brand “Armani” back in 1975. Armani is also the first ever designer to ban models who has a Body Mass Index under 18. He is truly a living legend and a great fashion designer.

3. Valentino Garavani
He is the founder of the famous brand ‘Valentino Spa.’ He is an Italian designer and an incredible living legend without any doubts. He is best known for designing clothes for some of the famous celebrities around the globe. Princess Margaret, Queen Paola of Belgium, Jacqueline Kennedy and Elizabeth Taylor are some of the famous and regular customers of his.

2. Donatella Versace
He is the Vice President and the chief designer of the Versace Group. Donatella is the first ever fashion designer for using an A-list celebrities to promote her designs on the catwalk, rather than going for nameless models. When promoting her brand in Hollywood, she chose Madonna, Jennifer Lopez, Christiana Aguilera, Demi Moore and others to serve the purpose of promoting her brand.

1. Calvin Klein
The short of version of Calvin Klein (CK) is famous and popular almost all over the brand by everyone. In 1968 this brand was founded by Calvin Klein, a famous American fashion designer. He initiated his career by opening a store of men and women’s coat in New York City. Since then, he hasn’t looked behind and has expanded his business with an incredible pace and has been ruling the fashion industry very strongly. He truly deserves to be the number 1 fashion designer in the world 2012.

Friday, June 22, 2012

Using JavaScript and CSS with your WordPress Plugin

A lot of plugins nowadays are more reliant on JavaScript and Cascading Style Sheets. It is important to separate your JavaScript and CSS into separate files so that the plugin is easier to maintain. This portion of the series will cover how to load JavaScript and CSS files for your plugin.

Add your JavaScript

Your plugin might need to load the Prototype library or perhaps a custom script. This section will show you a few WordPress functions that will allow you to load scripts and avoid script conflicts.

The wp_register_script function

The wp_register_script function allows you to register your script for calling and can allow you to set pre-requisites. For example, if your script requires Prototype to have been loaded, you can specify this.
Here are the parameters for wp_register_script: wp_register_script( $handle, $src, $deps = array(), $ver = false )
  • The handle is a unique name that you will use to reference your script later. This variable is required.
  • The src is the absolute source to your JavaScript file. This variable is required.
  • The deps variable is an array of dependencies. For example, if your script requires prototype, you would list it here. This variable is optional.
  • The ver variable is a string version of the script. This variable is optional.
Say for example you had a script that was located at: http://yourdomain.com/wp-content/plugins/your-plugin-directory/js/script.js
Let’s make a few assumptions:
  • You want to name the handle ‘my_script_handle’.
  • Your script depends on the Prototype library.
  • Your version is 1.0
You would likely call the function in your plugin code initialization or after a wp_head action:
wp_register_script('my_script_handle', 'http://yourdomain.com/wp-content/plugins/your-plugin-directory/js/script.js', array('prototype'), '1.0');

The wp_enqueue_script Function

The wp_enqueue_script function does the same thing as wp_register_script except that the src variable is optional. If an src is provided, the enqueue function automatically registers the script for you, thus making the wp_register_script function somewhat unnecessary. However, the wp_register_script allows you to register your scripts manually so you can load all of your JavaScripts using one wp_enqueue_script function.
If we were to call the same custom script as before, it would be called like this:
wp_enqueue_script('my_script_handle', 'http://yourdomain.com/wp-content/plugins/your-plugin-directory/js/script.js', array('prototype'), '1.0');

A JavaScript Example

For the Devlounge Plugin Series plugin, we’re going to add in a dummy JavaScript file that will be used in a later post. The purpose of this file is to demonstrate how to use the wp_enqueue_script function.
  • This file is located at the following location: http://yourdomain.com/wp-content/plugins/devlounge-plugin-series/js/devlounge-plugin-series.js
  • The file is dependent upon prototype.
  • The version is 0.1
You might recall that in a previous post in this series, we added an action for wp_head. The function that was run as a result of that action was called addHeaderCode. Let’s modify this function to add in our new JavaScript:

function addHeaderCode() {
            if (function_exists('wp_enqueue_script')) {
                wp_enqueue_script('devlounge_plugin_series', get_bloginfo('wpurl') . '/wp-content/plugins/devlounge-plugin-series/js/devlounge-plugin-series.js', array('prototype'), '0.1');
            }
            $devOptions = $this->getAdminOptions();
            if ($devOptions['show_header'] == "false") { return; }
            ?>

            }


The above code does the following:
  • The wp_enqueue_script function is checked for existence.
  • The wp_enqueue_script is called with the src, dependencies, and version.
  • We use the get_bloginfo(‘wpurl’) to get the location of the WordPress installation and hard-code the rest.
When you go to a post and view-source, the devlounge-plugin-series.js will have loaded as well as the Prototype library, which is conveniently included along with WordPress (versions 2.1.x and up I believe).

Loading in the Cascading Style Sheets

I’ve added a new style sheet to my styles directory. Here are my assumptions:
  • This file is located at the following location: http://yourdomain.com/wp-content/plugins/devlounge-plugin-series/css/devlounge-plugin-series.css
  • I specified an ID called #devlounge-link in the CSS file.
  • You have added in the following code at the end of a post: Get the Number of Blog Comments
In the style sheet file, I have added in the following ID:

#devlounge-link {
    background-color:#006;
    color: #FFF;
}


Adding in the style sheet for the plugin is as simple as adding a line to the addHeaderCode function:

function addHeaderCode() {
            echo '' . "\n";
            if (function_exists('wp_enqueue_script')) {
                wp_enqueue_script('devlounge_plugin_series', get_bloginfo('wpurl') . '/wp-content/plugins/devlounge-plugin-series/js/devlounge-plugin-series.js', array('prototype'), '0.1');
            }
            $devOptions = $this->getAdminOptions();
            if ($devOptions['show_header'] == "false") { return; }
            ?>

            
        }
 
On line 2, I simply echo out a reference to the new style sheet.
Number of Comments Link

Conclusion

Within this post you learned how to allow your plugin to have external JavaScript and CSS files. As always, you can download the current version of the code and try it out yourself: Using JavaScript and CSS with your WordPress Plugin

How to load JavaScript in WordPress plugins

If you want to load some JavaScript files from your WordPress plugin you have at least two options.

Head hooks

When building up a page, just before the closing tag of the head element, a theme should call actions hooked on wp-head. Those actions only need to output what they want to include into the head element, like script files.
What if a theme does not do that? Well, I’d include it into the so called “known issues”. For example, my last WordPress plugin, won’t work in this case. I think it’s better not to find a workaround, so that theme authors understand that they must follow WordPress standards.
On the other hand, there is also an admin-head hook, which is the wp-head hook counterpart when building up admin pages. For example, you could use the following function.

 
function load_into_head() {  
    $ADMIN_VIEW = "alert( 'Hello Admin!' );"; 
    $USERS_VIEW = "alert( 'Hello World!' );"; 
    ?> 
 type="text/javascript">            if( is_admin() ) { echo $ADMIN_VIEW; } 
        else             { echo $USERS_VIEW; }  
    ?> 
    } 
 
add_action( is_admin() ? 'admin_head' : 'wp_head''load_into_head' ); 
 ?>

Script API

WordPress provides also a good Script API that will let you do anything you want with script files, following WordPress standards. These are the main functions:
  1. wp_deregister_script
  2. wp_register_script
  3. wp_enqueue_script
  4. wp_print_scripts (action hook)
  5. print_scripts_array (filter hook)
The general idea is that you write a function for loading your scripts using wp_deregister_script, wp_register_script, and wp_enqueue_script, and hook it on wp_print_scripts. If you also need to fine tune the order in which files are loaded or if they have to be loaded at all, then you can write another function and hook it on print_scripts_array.
deregister, register, and enqueue
wp_register_script let’s you create an alias and define dependencies for each script file. If a script file with the same alias was already registered, then your registration is ignored. This is a policy for conflict resolution (the first registration wins) that may help you, if you know it.
wp_deregister_script let’s you remove an alias. If the alias you give doesn’t exist, nothing happens. Tipically you use this function for forcing a new registration of an already registered alias: first you deregister and then register again.
wp_enqueue_script prepares the loading of a script. If the script was registered with some dependencies, this function automatically prepares their loading too, recursively, making sure each script will be loaded only once and before any script depending on it.
For example, jQuery 1.2.3 is registered by WordPress 2.5, but let’s say that you want to always download the latest version. You could use the following function.

 
function load_with_api() { 
    wp_deregister_script( 'jquery' ); 
    wp_register_script( 'jquery''http://code.jquery.com/jquery-latest.pack.js'false'' ); 
 
    //keep jQuery and Prototype compatible 
    $url = get_bloginfo('wpurl').'/wp-content/plugins/my-plugin'; 
    wp_register_script( 'jquery_no_conflict'$url . '/jquery_no_conflict.js'array'jquery' ), '' );     
    wp_enqueue_script( 'jquery_no_conflict' ); 
} 
 
add_action( 'wp_print_scripts''myOwnTheme_init' ); 
 ?>
 
Keeping jQuery and Prototype compatible is a needed functionality, because WordPress uses both and they both use $ as a global symbol. In fact, the jQuery file packed with WordPress includes the compatibility setting.
Fine tuning
If you want your scripts to be loaded in a particular order, with one script before or after another, maybe with respect to one that was registered by WordPress itself, or by other plugins, then you can write a function for the print_scripts_array filter.
For example, to load the jquery_no_conflict file just after the jquery file, you can use the following function.

 
function jquery_no_conflict_follows_jquery( $js_array ) { 
    if ( false === $jquery = array_search( 'jquery'$js_array ) ) 
        return $js_array; 
 
    if ( false === $jquery_no_conflict = array_search( 'jquery_no_conflict'$js_array ) ) 
        return $js_array; 
 
    if ( $jquery_no_conflict == $jquery + 1 ) 
        return $js_array; 
 
    array_splice( $js_array$jquery + 10'jquery_no_conflict' ); 
 
    unset($js_array[$jquery_no_conflict + ($jquery_no_conflict < $jquery ? 0 : 1)]); 
 
    return $js_array; 
} 
 
add_filter( 'print_scripts_array''jquery_no_conflict_follows_jquery' ); 
 ?>

Including jQuery in WordPress (The Right Way)

If you want, you can just download jQuery, put it on your server and link to it from your header.php file in the section. But that can cause you grief. For one thing, some plugins use the jQuery library, and they are going to load it as well. This can cause problems. How was your plugin to know you already had it loaded?
Another thing is that WordPress already includes a copy of jQuery. Here is how you can load up jQuery in your theme the smart (and intended) way. Put the following code in your header.php file in the section:
 




Your theme probably already has the wp_head function, so just make sure you call the wp_enqueue_script function BEFORE that. Now you are all set to call your own jQuery JavaScript file, AFTER the wp_head function.


You are ready to rock, but there are still some considerations. For example, safeguarding yourself from the future possibility of conflict with other libraries. You really shouldn’t be using multiple JS libraries to begin with, but… better safe than sorry.
To be super-safe, you can put jQuery into “no conflict” mode and use a different shortcut for jQuery. In this case “$j” instead of the default “$”. The standard “$”, for example, can conflict with Prototype. Here is an example of a safe bit of jQuery JavaScript:
 
var $j = jQuery.noConflict();

$j(function(){

    $j("#sidebar li a").hover(function(){
     $j(this).stop().animate({
      paddingLeft: "20px&"
     }, 400);
    }, function() {
     $j(this).stop().animate({
      paddingLeft: 0
     }, 400);
    });

});
 
Can you recognize this bit of code? We use it right here on Modern WordPress to do the cool “link nudging” in the sidebar!

5 Tips For Using jQuery with WordPress

Having used jQuery and WordPress together on a number of plugins and themes, I thought I'd share some tips that I have learned. The following are 5 clear, concise, and relevant tips that you should know when using jQuery in your WordPress Theme or Plugin.

1. Use wp_enqueue_script()

The traditional way to include jQuery in an HTML page is with the script tag. When working with WordPress, you should *never* do this. To avoid conflicts and other potential problems, you'll want to load jQuery using the following code:

 
function my_init() {
 if (!is_admin()) {
  wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');
 
You can replace my_init with something more meaningful, but choose a unique name to avoid conflicts. For plugin development, add the code in your plugin file, otherwise, add this code to your theme's functions.php file. The is_admin() check is to prevent script queuing on your admin pages.
WordPress References:

2. Load jQuery from the Google AJAX Library

Since WordPress includes jQuery, calling wp_enqueue_script('jquery'); will automatically load the jQuery file located in wp-includes/js/jquery/jquery.js.
If you want to load jQuery from the Google AJAX Library, you'll need to modify the code as follows:

function my_init() {
 if (!is_admin()) {
  // comment out the next two lines to load the local copy of jQuery
  wp_deregister_script('jquery');
  wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
  wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');

There are a number of reasons why you would want to use the Google AJAX Library to load jQuery, but remember, Google has been down before, so be ready to comment out the first two lines if necessary.
Note: As mentioned by Milan in the comments, there are existing plugins, such as Use Google Libraries, that will do this for you.

3. Load jQuery in the footer

Using the code in the previous two tips, jQuery will, by default, be inserted into the head of your HTML page. If you would prefer to have jQuery inserted at the bottom of your page, you'll need to use the $in_footer parameter for the wp_enqueue_script() function. The modified code:

function my_init() {
 if (!is_admin()) {
  wp_deregister_script('jquery');

  // load the local copy of jQuery in the footer
  wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);

  // or load the Google API copy in the footer
  //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);

  wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');
 
As with the choice to use the Google AJAX Library, there are reasons why you'd want to load jQuery at the bottom of your page. Note: if a script is loaded using wp_enqeue_script() that lists jQuery as a dependency and has $in_footer set to false, WordPress will place jQuery in the head instead of the footer, regardless of the $in_footer value for jQuery.

4. Add jQuery as a dependency

You've got jQuery loading and now you want to include a script that uses it. This is where the wp_enqueue_script() function really comes in handy. By passing an array of dependencies for the $deps parameter, WordPress will automatically manage the order and placement of your script tags.
For example, if you have a JavaScript file in your theme that leveraged jQuery, the following code would ensure that your file is loaded correctly:

function my_init() {
 if (!is_admin()) {
  wp_deregister_script('jquery');
  wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
  wp_enqueue_script('jquery');

  // load a JS file from my theme: js/theme.js
  wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
 }
}
add_action('init', 'my_init');
 
The previous code example would load jQuery from the Google AJAX Library, place it in the footer of your page and then include your theme.js file. The $deps array allows for multiple dependencies and helps you manage the scripts that are loaded on your site.

5. Proper jQuery coding conventions

All of the previous steps are nullified if proper jQuery coding conventions aren't followed. The most common issue I see with jQuery and WordPress is the misuse of the $ variable.
It is important to know that the version of jQuery that comes with WordPress automatically calls the jQuery.noConflict(); function, which gives control of the $ variable back to whichever library first implemented it. If you are loading a different copy of jQuery, you'll need to manually call jQuery.noConflict();, if necessary, from one of your JavaScript files.
As a general rule, you should not use the $ variable for jQuery unless you have used one of the shortcuts. The following is an example of how to shortcut jQuery to safely use the $ variable:

jQuery(function ($) {
 /* You can safely use $ in this code block to reference jQuery */
});

Thursday, June 21, 2012

Top 10 jQuery Modal Box Plugins

A list of the top 10 Modal Box jQuery plugins.


http://colorpowered.com/colorbox/
     
  • Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
  •  
  • Lightweight: less than 9KB of JavaScript.
  •  
  • Appearance is controlled through CSS so users can restyle the box.
  •  
  • Can be extended with callbacks & event-hooks without altering the source files.
  •  
  • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  •  
  • Preloads background images and can preload upcoming images in a photo group.
  •  
  • Written in jQuery plugin format and can be chained with other jQuery commands.
  •  
  • Generates W3C valid XHTML and adds no JS global variables & passes JSLint.

http://www.clearbox.hu/index_en.html
     
  • Multi-language support and more user settings
  •  
  • New animation called “grow”
  •  
  • Clearbox works BEFORE the page is fully loaded
  •  
  • Multi-line comment to any content
  •  
  • Rotate images, fancy OSD
  •  
  • Create galleries for Flash, Quicktime, Windows Media, HTML, inner content, etc.

http://flowplayer.org/tools/overlay.html
     
  • The overlay can contain any HTML and the whole thing can be styled with CSS.
  •  
  • This tool uses a simple and natural syntax and has an advanced programming API. You can extend it with callback methods or with your own plugins.
  •  
  • Auto-hiding functionality for next/prev links and for the image description element.
  •  
  • Automatic preloading of the images.
  •  
  • Standards-based syntax. Works even on browsers without JavaScript enabled.

http://fancybox.net/
     
  • Adds a nice drop shadow under the zoomed item
  •  
  • Groups related items and adds navigation (preloades images)
  •  
  • Can display images, inline, ajax and iframed content
  •  
  • Customizable through settings and CSS
  •  
  • Support fancy transitions by using easing plugin

http://www.shadowbox-js.com/index.html
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.


http://leandrovieira.com/projects/jquery/lightbox/
jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.


http://famspam.com/facebox
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.


http://nyromodal.nyrodev.com/
     
  • Ajax Call, Ajax Call with targeting content, Ajax call can change the modal size
  •  
  • Single Image
  •  
  • Images Gallery with arrow navigating
  •  
  • Gallery with any kind of content
  •  
  • Form, Form in iframe, Form with targeting content, Form with file upload Form with file upload with targeting content
  •  
  • Dom Element
  •  
  • Manual Call
  •  
  • Iframe
  •  
  • Error handling
  •  
  • Modal will never goes outside the view port
  •  
  • Esc key to close the window
  •  
  • Customizable animation, Customizable look
  •  
  • Modal title
  •  
  • Ability to block only one element
  •  
  • W3C valid HTML (Transitionnal)

http://www.intelliance.fr/jquery/imagebox/
simple limited lightbox


http://www.pirolab.it/pirobox/
jQuery piroBox plugin is simple images gallery, realized with jQuery library


http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

Top 10 jQuery Plugins

jQuery’s name can be somewhat misleading, as the library has little to do with queries. Since its release in January 2006, it’s author John Resig stated, “I was, originally, going to use JSelect, but all the domain names were taken already.”

Top 10 Jquery Plugins 2012
jQuery’s library is a single JavaScript file, which contains all of its common DOM, event, effects, and Ajax functions. One can include its various functions within a web page by linking to a local copy, or to one of the many copies available from public servers. jQuery has a CDN sponsored by Media Temple. Additionally Google and Microsoft host it as well.
The most popular and basic way to introduce a jQuery function is to use the .ready() function.
jQuery’s architecture, has paved the way for other developers to utilise its constructs in creating plug-in code to extend its functionality. There are thousands of jQuery plug-ins available on the web which cover a wide range of functionality, such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows, even a jQuery-based Commodore 64 emulator.
The important source of jQuery plug-ins is the Plugins sub-domain of the jQuery Project website; where there are alternative plug-in search engines that take more of a specialist approach, such as : listing only plug-ins that meet certain criteria (e.g. those that have a public code repository). The tutorials page on the jQuery site has a list of links to jQuery plug-in tutorials under the “Plugin development” section.
Inasmuch , jQuery’s syntax is designed to make it easier to navigate a document and provides capabilities for developers to create plug-ins on top of the JavaScript library. In this article we would like to present users with the Top 10 JQuery Plugins for the month of January, which will enable advanced effects and dynamic web pages for every site owner.

Enjoy !



1. jOrgChart : Create Interactive Organization Charts

jOrg Chart
Binary trees or tree menus have always been considered as a great way of displaying nested data in a user friendly and easy to explore interface.JOrgChart is a jQuery plugin which transforms nested unordered lists into menus but with an organization chart like output. jOrgChart supports for any depth, it will let you show/hide the sub-levels while clicking on any item, it also allows drag ‘n’ dropping elements from one node to another.
You can use unlimited contents inside each item, it supports any HTML elements (except

    and
  • ). This plugin is quite handy for visualizing hierarchical data such as chart, computer network, family tree etc.

    Download

    2. jQuery Collapse : Expanding and Collapsing Content

    jquery_collapse
    Expanding/collapsing panels are used to save space and display the content only when requested. JQuery-Collapse is an lightweight (Lesser than 1kb) plugin that enables expanding and collapsing contents.
    This plugin includes features like cookie persistence, ARIA compliance, and designed to be flexible and modular enough to be used in many different scenarios.
    It allows you to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events. This plugins supports all type of major browsers including IE6.

    Download


    3. TextExt

    TxtExt
    TextExt is powerful jQuery plugin that improves the functionality of text input fields. Text Ext is based on modular design and includes several features such as inputs, filtering, auto complete, Ajax and placeholder text. it can also display a custom arrow besides select field, show the items in them as suggestions while typing and more.
    Download


    4. FeedEk : Display RSS/ATOM Feeds

    feedek-jquery_rss_parser
    FeedEk is a jQuery plugin for parsing and displaying RSS and Atom feeds. This plugin can be used easily and can grab the feed items from any domain with a few lines of code. Users need to mention the feed URL, numbers of items to be displayed, description and publish date to be shown.

    Download


    5. Scrollorama : For Scrolling Effects


    Scrollorama
    Scorollorama is a jQuery plugin for creating eye catching effects in parallel to the scrolling of web pages. It helps you to animate the elements of your page by dividing the contents into blocks. The animations are achieved using CSS properties, time duration can be defined and it also allows users to set the exact position of the start/stop events.

    Download


    6. jQuery UI Bootstrap

    jquery_ui_bootstrap
    jQuery UI Bootstrap is a jQuery UI theme that is inspired from Twitter’s project and brings the slickness of it to jQuery UI widgets. With this theme you can not only use Bootstrap themed widget but you can use twitter Bootstrap side-by-wide with it without components breaking visually.

    Download


    7. Poshy Tip jQuery Plugin

    Poshy Tool Tip
    Poshy Tip jQuery plugin is a tooltip plugin that helps you to easily create stylish tooltips. With Poshy Tip users can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically.
    Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed.

    Download


    8. Jeditable – Edit In Place Plugin for jQuery

    edit-in-place-jquery
    Jeditable is an inplace editor plugin for jQuery. This plugin allows you to click and edit the content of different HTML elements with few lines of JavaScript code. It works in normal flow, user clicks text on the web page, block of text becomes a form, user edits contents and presses submit button.
    New text is sent to webserver and saved and form becomes normal text again. You can also get full control of Ajax request. Just submit to function instead of URL. Parameters passed are same as with callback. Jeditable is licensed under the MIT License.

    Download


    9. Minimit Gallery Plugin

    minimit-gallery
    Minimit Gallery is a highly customizable, library agnostic plugin that does galleries, slideshows, carousels, slides, practically everything that has multiple states in less than 10kb. Using Minimit Gallery you have more time to focus on the ideation and the dynamics of your interface, all the logic functionality instead is managed by the plugin. It’s designed for advanced JavaScript/Jquery programmers because you need to code all the animations and the css of the gallery. It has been tested on IE7+, Firefox, Safari and Chrome.
    Download


    10. jQuery- Ajax Autosuggest Plugin

    jquery-auto-suggest
    AUSU Ajax Auto Suggest jQuery Plugin has the usual functionality with a little extra flexibility: multiple instances, passing custom parameters, the id and the value are returned, keyboard-controlled, and a few others…
    Nearly anything you need from an autosuggest plugin can be done through the built-in options! The CSS file is small and very easily changed.
    It has been tested on mordern browsers (Firefox 3, Internet Explorer 8, Opera 11, Safari 5 & Chrome).
    It has also been tested on IE7 & IE6 without any issue.

    Download

Top 10 Useful jQuery Plugins Of June 2012

1) Slider Kit

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

2) JS AJAX PayPal Cart

AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.

3) Zoomooz

Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

4) JS How Off

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements.

5) RSS Driven Dynamic jQuery News Slider Plugin Dynamic News

Dynamic News is a jQuery news slider plugin that makes news integration to your web site very easy. Dynamic News plugin supports two ways to add news data.

6) File Upload

Allows to select multiple files at once and upload them simultaneously.

7) JSpeaker

This plugin will speak the text that’s in the selected object. It uses the google translate speak/listen function.

8 ) jQuery Watermark

This simple-to-use jQuery plugin adds watermark capability to HTML input and textarea elements.

9) jQuery Center Plugin

This simple plugin helps you centralize your DOM element against their parent element or the window. You can also specify the top of the DOM element by passing customized settings.

10) Funky Tool Tips

funkyTooltips is a jQuery plugin that allows you to easily generate tooltips for your html links and images.