JavaScript and jQuery plug-ins continue to simplify the task of presenting images and photos on the internet in a fully customizable style. Below, we showcase the top jQuery plug-ins with vast customization options and capabilities – allowing you to make use of iframe Content, Videos, Ajax Requests and SWF Movies. These include Fancy Box, Pretty Photo, Shadow.js , Light box 2 where the picture becomes enlarged and is in focus along with the rest of the screen. These are light weight plug-ins with limited options and reduced loading time.

Here are our favorite Lightbox Effect plug-ins that present images beautifully:

Lightbox 2

Lightbox 2 can display your images over your darkened webpage below it. You will be able to add a professional look to your website with decreased page load times. Lightbox2 functions on all web browsers. No additional plug-ins are needed. On the downside, if a browser does not support JavaScript, then this effect will not function. Some of the best features of Lightbox 2 include:

• You can use this plug-in for displaying overlay images on the web page using flexible, powerful jQuery Selectors.
• This plug-in does not require use of additional mark-up.
• Lightbox2 can be configured to allow you to define when you want to call it.
• An elegant and remarkable plug-in with many customizable options.

PrettyPhoto

This plug-in is a complete lightbox clone that not only supports images but also provides support for iframe, Videos , YouTube and Flash. Setup is quick, simple and compatible with nearly all popular web browsers. PrettyPhoto is regarded as a rubust, full-featured media light box. Some of its premium abilities include:

• This plug-in can automatically display WordPress image galleries as PrettyPhoto Slideshows.
• Fast, simple setup through the plug-in’s settings page in the WordPress admin.
• This plug-in has a configurable “Hook” attribute tag that renders support for the HTML5 complaint data attributes.

fancyBox

fancyBox allows you to showcase SWF movies, multimedia content, Ajax requests, HTML content and images in an Mac-styled “Lightbox” which will float over the webpage. If you want fancyBox to respond to mouse wheel/touch events, simply include the Mouse Wheel plug-in on the webpage. With the help of this plug-in you can add navigation and display grouped items. This plug-in lets you add a shadow under the zoomed item with ease. fancyBox has these great features:

• Fancy transition support with ease.
• This plug-in lets you add a nice drop-shadow under the item that is zoomed.
• Completely customizable via CSS and plug-in settings.

ShadowBox

This amazing web-based media viewer app supports all popular media publishing formats, allowing you to showcase a wide range of media items. It’s compatible with all popular web browsers, and your users never leave the page they were originally viewing. This highly customizable plug-in is completely coded in CSS and JavaScript. ShadowBox’s best features include:

• Shadowbox.js is neat and compact. You can edit it to include jus the features you want, allowing you to minimalize the script to be super light-weight.
• Shadowbox uses a smart plug-in detection mechanism so users don’t get confused with broken image or puzzle-piece icons if the required plug-ins are not installed.
• Shadowbox is highly customizable with host of options.

Understanding the Differences between the Four Plug-ins listed above:

1. Feature Overview:

Let us compare these four plug-ins in terms of featuring Grouped Images, Image Slideshow, Inline Content, HTML Content, Multilingual Support and Video. To better understand, “Grouped Images” means you can group together all the images and navigate through them using “previous” and “next” buttons. A “Slideshow” means you can possibly group all the images and the web browser will automatically navigate through them without requiring the user to click anything. The Slideshow feature is usually has a “play/pause” feature. “Video” feature comparison implies that it can display flash content within the Lightbox or Video in the player within the Lightbox.

• Lightbox 2 supports Image Slideshow, Images, Grouped Images, Videos, Inline Content, HTML Content and Multilingual Support.
• Shadowbox supports Images, Image Slideshow, Grouped Images, Videos, Inline Content, HTML Content. Multilingual Support is likely to be added upon full release.
• FancyBox supports Images, Grouped Images, Inline and HTML Content. Support for Image Slideshow and Multilingual Support is still in progress.
• prettyPhoto supports Images, Grouped Images, Image Slideshow, Inline and HTML Content, Flash Content, Ajax Content. Multiligual support is not available.

2. Browser Support:

This feature plays a vital role in determining the power and strength of these scripts. If not compatible with popular browsers, then their features and benefits are useless. Here’s what these tools support:

• Lightbox 2 provides support for all popular browsers, including: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera, Sea Monkey, Epiphany and many more on various operating systems such as Mac, Windows, BSD , Linux.
• Shadowbox also provides support for all the popular browsers namely Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera, Sea Monkey, Epiphany and lots more on various operating systems such as Mac, Windows , BSD , Linux.
• FancyBox supports a majority of popular web browsers, but has some compatibility problems with Internet Explorer 8.
• prettyPhoto has been tested thoroughly and performs well using Firefox 3.0+, Google Chrome 10.0+, Internet Explorer 6.0+, Safari 3.1.1+, Opera 9+.

3. File Size:

The plug-in file size dramatically affects feature load-time. See how these plug-ins compare when it comes to size

• Lightbox 2 JavaScript prototype and the scriptaculous are nearly 172 kilobytes combined.
• Shadowbox can be used with jQuery or Prototype or Mootools or YUI or ExtJS or Dojo – size varies based on your configuration.
• fancyBox uses jQuery JavaScript with a file size around 94 kilobytes.
• PrettyPhoto also uses jQuery JavaScript Library and is approximately 94 kilobytes.

4. Ease-of-Use:

One of the most important factors when selecting your Lightbox tool is ease-of-use:

• Lightbox 2 requires two simple steps. You must first set up the jQuery Framework by including the Lightbox CSS file and secondly, you must activate Lightbox 2 by adding the appropriate attribute to the “Link” tag.
• Shadowbox requires you to include the CSS file and the JavaScript Files within the tag of your webpage code and after that call the Shadowbox.init method. You then must specify the links that you want to open in your HTML.
• fancyBox has a five-step process to install and configure the plug-in. You must first ensure that you are using a valid Doctype, then include all the required JS Files, add the FancyBox CSS File, create the link elements and finally, run the jQuery Selector.
• PrettyPhoto requires you to include the PrettyPhoto CSS, PrettyPhoto JavaScript and jQuery Library in the head section of the web pages that you want to use PrettyPhoto in. Then you must initialize PrettyPhoto.

Of all the above scripts discussed the ease of use for Lightbox2 is pretty straightforward and simple.

With CSS Style sheet language being so simple and plain makes the World go round on the web but yet it has a few restrictions and becomes difficult to manage in few scenarios. LESS is a well groomed language that eases the task of web developers by providing them the privilege of using dynamic CSS. For instance if a developer wants to make use of Dark Peach Color on any particular web page then he or she will have to use #FF9F94 code wherever he or she needs a Dark Peach Color but rather wouldn’t it be easier if they have the privilege of storing the color value in any particular variable and use that variable instead so that when they want to change color of those WebPages they can simply change the value of the variable at one place and the changes would be reflected at all the other places where that variable has been used. In other words LESS is adds some programming logic into CSS making it a better and powerful tool.

Introduction to LESS

LESS is a Style sheet Language that is termed as the superset of CSS i.e. all the CSS code that is used on any webpage is completely valid when using LESS code and art from this there are a few novel elements that are added to LESS which will not be valid with the Standard CSS. This makes LESS more paramount and eminent style sheet language because your existing CSS code is anyhow valid LESS code thereby reducing the efforts of learning curve to using LESS. The advent of LESS Style sheet language has added loads of dynamic features to the already existing CSS style sheet language. LESS makes your life hassle free when it comes to coding the web pages as it allows you to write style sheets with a modular state of mind by introducing variables, function like elements , operations and as well a mix of JavaScript.

Using LESS

LESS can be used into coding the web pages in 2 different ways. Te first one is to pre compile the LESS code and then make use of the resultant CSS file and the other is to create a LESS file that can be converted on-demand by means of a JavaScript file. If you are frightened as to what compile here actually means then do not be scared it’s pretty simple.

Understanding LESS Compilation

Despite the fact that this method of using LESS is a little difficult it is preferred in few scenarios. LESS functions by taking the entire LESS code that you rite and after that converts it to CSS file. Regardless of doing this on-demand in this method the LESS file is converted and CSS output is saved which can be used instead of using the on-demand conversion every time when the web page loads. If you are working on Windows operating system then you can make use of Winless that will detect all your LESS files automatically and as and when you save them Winless will convert it to the CSS file which will have the same name as that of the LESS file and in case of Mac operating system similar functionality will be performed by LESS.app which is an application specifically designed for Mac OS.

Understanding the Usage of LESS JavaScript File

The very first thing is that you have to grab the JavaScript file from the LESS official website. Once you have the file the only thing that you need to do is to link it to your web page just like you link any other .js file. After this you need to create a file that has .less extension and link to your webpage using the below mentioned code:

<link rel="style sheet/less" type="text/css" href="SampleStyle.less"/>

One thing you ought to remember here is that you should link your LESS file before linking the .JS file. Having done this you can copy and paste your existing lines of CSS code directly into the LESS file or you can write new rules as per your requirements and it will work similar to normal CSS.

Understanding the LESS Variables Concept

If you want to write LESS code the very first thing that you will have to know is about using LESS variable and how they actually function. LESS code makes use of similar syntax style as that of CSS and hence it is easier to learn LESS coding. The functioning of variable in LESS is similar to that of the variables in PHP. Variables in LESS can be used for storing any value and after that the name of the variable can be used whenever required anywhere in the LESS code instead of using the value itself.

Syntax: @Trailer-Font: Times New Roman;

The above syntax defines a variable named Trailer-Font that will store the value of Times New Roman font so wherever you want to use the Times New Roman font you can directly make use of the Trailer-Font variable. Later on if you change your decision that you would be opting for Georgia font for Trailer instead of Times New Roman then you can simply change the value of the variable to reflect in all other places. Variables prove to be of great use especially when it is about defining the colors for a website. Variables scope in LESS refers to all the places where it is available. For example if you define a LESS variable at the very beginning of your LESS file then you can make use of that variable in any part of the LESS code you write after it. If you define a variable within a CSS rule in that case you cannot make use of this variable outside the CSS rule set.

Some Common LESS Examples One Should Know

1. Complementary Color Scheme
   In this kind of color scheme you can begin with using a single base color and after that make use of the darken or lighten methods or the color spin methods for expanding this into 5 or 6 variant colors that match well with each other. So when you want to generate complementing colors you just have to spin the color wheel to 180 degrees to have a look at the slight variations on the starting color.
2. Customized Border Radius
   If you continuously use Border Radius property in that case you would be interested in having the privilege to set a custom value for each corner. In order to achieve this with LESS you require more of a Robust Mixing which can be achieved by passing 4 variables assigning with the different values you want for each corner. The values for Border Radius will begin from top left and will go through around completely in a clockwise manner similar to the typical shorthand fashion.

Tips For Developers

USE EVERYTHING WORDPRESS HAS TO OFFER
WordPress’ core can do a lot for you, without you having to write a bunch of code. WordPress is much more powerful when you make use of its APIs and built-in functionality. “If you use WordPress as your framework,” says Trent Lapinski, “it will enable you to focus on developing an innovative plugin or theme.”

Read Full Article: http://wp.smashingmagazine.com/2013/03/20/practical-tips-top-wordpress-pros/

Weights and styles help our visitors to read our content, we should make sure they work! And getting weights and styles to work correctly using the @font-face declaration can be a bit crazy-making. Let’s look at two popular approaches to setting weights and styles with the @font-face declaration. I’ll show you why they are not the best solutions, and show you a third more effective approach to follow.

Full article: http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

http://wordpress.meetup.com

WordCamp
WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other.

http://central.wordcamp.org

What Is WP_Query?

The WP_Query class is one of the most important parts of the WordPress codebase. Among other things, it determines the query you need on any given page and pulls posts accordingly. It also saves a lot of information about the requests it makes, which helps a great deal when optimizing pages (and troubleshooting them).
The other role of WP_Query is to enable us to perform complex database queries in a safe, simple and modular manner…

Full article: http://wp.smashingmagazine.com/2013/01/14/using-wp_query-wordpress/

With the popularity for HTML5 Boiler Plate on the rage it is nowadays popularly known as “Rock Solid Default for HTML5”. HTML5 Boiler Plate has become the professional base for JS or HTML/CSS template for developing robust, fast or future proof website.HTML5 Boiler Plate has undergone 3 years of iterative development so that the users you can enjoy the best of the best features such as performance optimization, Cross Browser Normalization and various other additional features such as Flash & Ajax.HTM5 Boiler Plate does have any philosophy for development nor it is any framework rather it just has few tips and tricks which will help you get off with your web development project quickly & in a right footed manner.

HTML5 Boiler Plate offers a wide range of features of which the most important and the most common one is Cross Browser Compatibility & Normalization with various web browsers including Internet Explorer version 6, 7,8 in a very intelligent manner by including Internet Explorer specific classes for rendering maximum cross browser control, various utility classes such as .cleaarfix , .no-js, .png support for Internet Explorer 6, various Compression & Caching rules, optimization concept for Mobile Browsers, Google Analytics Support, HS Testing Support & Profiling feature, Modernizr Support, Local Fallback script for CDN hosted jQuery and lots more added features.

A good step that any web developer can make in the direction of succeeding in a wed development project is to make use of HTML5 Boilerplate Website Template. If you aim at creating robust & fast websites then HTML5 Boiler Plate template is a must use for your web development project. Moreover HTML5 Boiler Plate is regarded as a collection of front end HTML5 development best practices. If people want to take the best out of HTML5 then HTML5 Boiler Plate is a must have for all the web developers.HTML5 Boiler Plate is just the perfect tool if you want your website to be converted as an exemplar of Markup Language.

HTML5 Boiler Plate came into existence when Paul Irish thought of putting together all the best practices that existed in the Web Community as a Single Template.HTML5 Boiler Plate template mainly target at accomplishing two important things. The very first thing that the HTML5 Boiler Plate aims at targeting the older or non W3C complaint browsers such as Internet Explorer 6, 7 & 8 versions. The second best thing HTML 5 Boiler Plate aims at is to target on optimizing the code so that it can run quickly and smoothly which is achieved with the creation of Build Scripts. With the advent of Build Scripts now it makes perfect sense to Web Developers to streamline & optimize their code for high profile & commercial applications as much as they can.

Want to understand how HTML5 Boiler Plate modifies your project code then here they are:

• HTML5 Boiler Plate combines & minimizes use of CSS.
• With the use of optipng & jpegtran HTML5 Boiler Plate ensure to optimize the PNG’s and JPG’s.
• HTML5 Boiler Plate makes use of the Inline Cascading Style sheets by using the @import keyword in the CSS.
• With the use of YUI compressor it combines & minimizes JS (JavaScript).

HTML5 Boiler Plate does not include everything by default as all the features might not fit everybody’s requirements. There are several ways in which you can customize your HTML5 Boiler Plate Template and one such method is DNS pre-fetching. This is a technique in which the browser is informed about the domain names that are being referenced on Website so that it is easy for the Client to resolve the DNS for any specific host by caching mechanism thereby when need to use them they can get a better turnaround time for any request.

Generally HTML5 Boiler Plate has certain Implicit Prefetches which are automatically done by the browser. If your browser encounters an anchor in the HTML which does not share the same domain name as that of the current browser requests from the Operating System of the client and caches the IP address of the new domain. This process works in a very simple manner, the client will first check the cache and after that lacking a cached copy will make a request to the DNS server. Generally this request will take place in the background and will not by any chance block the rendering page. The main benefit of this technique is that when any foreign IP address is needed it will by now be present in the client cache without having any impact on the loading of the foreign content. If the number of request is less it will help in loading the page faster. This perception can more often be analyzed on Mobile Platforms where there is high DNS latency.

One can disable implicit pre-fetching by using the below tag in their Source Code:

<meta http-equiv="x-dns-prefetch-control" content="off">

Nevertheless this will disable implicit pre-fetching but however using this tag will yet pre-fetching any kind of explicit DNS Prefetch Links. As well using tag might make your site slower at times.

If you disable the implicit Prefetches but want to have certain specific explicit Prefetches because the browser will completely scan the entire HTML code for foreign domains. If there are any resources which might exist outside your HTML in that case you can make use of Explicit Prefetches to queue up a domain name for being prefetched.

Almost all the browsers like IE9, Mozilla, Google Chrome, Opera, Safari support DNS Pre-fetching mechanism. With the latest version of HTML5 Boiler Plate i.e. versions 4 there have been great advancements and several bugs also have been resolved. Few of the changes and enhancements that have come with the latest version are:

• Enhancement in the console.log protection
• Renaming of the JS files, CSS files and Subdirectories.
• Changes in the code format to achieve Consistency.
• Having a separate Normalize.css instead of including it in the rest of the CSS.
• Inclusion of a better image replacement technique

In this article, I’m going to take a look at how you can be a top WordPress professional — this advice could apply to developers, but equally to bloggers, support reps, designers and everyone in between.

Read full article: http://wp.smashingmagazine.com/2012/12/05/become-top-wordpress-professional/comment-page-1/

You may have a need to share advertisements, product information or, if you are a designer, your photo gallery. Whatever the reason, this article will show you a way to create an embeddable content plugin to share your WordPress content with other websites.

Full tutorial: http://wp.smashingmagazine.com/2012/11/15/embeddable-content-wordpress/

Order Email Template with Christmas theme, write in your order details “MERRY CHRISTMAS”, and pay only half price for it.

Wish Merry Christmas to your family, friends and partners!