Creative Art

Light box is nice tool to displays images using modal box. jQuery is very popular for modal dialogs because of its very easy implementation and it make website more friendly and interactive. In this article I collected the best and Efficient Lightbox based on the jQuery Javascript library. jQuery lightbox A jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup. fancybox FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. lightbox2 Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers. PrettyPhoto 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. Facebox Facebo

Nivo Slider is the world’s most popular jQuery image slider, and it’s completely free! Nivo Zoom is popular jQuery plugin that allows you to zoom the image. This plugin comes with 5 different zoom types, Optional overlay support, Supports HTML captions, Simple clean & valid markup, Loads of settings to tweak and others. The plugin is lightweight (4kb compressed), focused only on images and comes with a bunch of settings. Nivo Zoom, by default, doesn’t use overlays but can display the bigger image with an overlay where the opacity and colors of it can be customized. Features Specify position of larger image relative to the thumbnail Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position Optional overlay support Supports HTML captions Simple clean & valid markup Customizable settings Lightweight: Packed version only weighs 4kb For more details Visit

Tabbed panels are very useful and one of the most popular way to place a lot of information on a page without losing usability. Here is listed popular JQuery Tabs tutorials and plugins which you can use in your project. Tabs with Next/Previous : View Live Demo Smooth tabbed menu in jQuery : Simple plug-in that allows for a large number of tabs to fit into a small space View Live Demo Slick Tabbed : This script allows you to create a slick tabbed content area using CSS and jQuery . View Live Demo Simple Tabs w/ CSS & jQuery : This jQuery plugin supplies an easy way to create tabbed menu with our lovely jQuery library View Live Demo AJAX Tabs: This tabbed panel allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it. View Live Demo

A simple solution for automatically resize iframe height depending on content. In page call jQuery library and in head script part past below script. $(function () { $('#myIframe').load(function () {    this.style.height =    this.contentWindow.document.body.offsetHeight + 'px'; }); });

There are lots of jQuery plugins for slider, but jCarousel is a best jQuery plugin for controlling a list of items in horizontal or vertical order. It works with all major browsers. To use the jCarousel component, include the jQuery library, the jCarousel source file and a jCarousel skin stylesheet file inside the tag of your HTML document.

jQuery.dotdotdot is an advanced cross-browser ellipsis for multiple line content. It adds an ellipsis after cut off text to indicate that there is more text than currently visible. Not only on a single line of content, but also particularly on multiple lines of content. To use add jquery library and script file in header and on document ready call function. For more details Visit

Steps: Open the newly created page and click on edit page link. On edit page select “Manage Permission” tab from left menu. It will reload the right hand side of the page, now from right hand panel search for select drop down “Default Landing Tab” label and select the appropriate tab from select drop down, this tab will be loaded in place of default wall when visitor is not a fan or not logged in. 

jqPagination is a effective jQuery plugin for quickly creating a pagination interface and functionality for your web site or application.. The plugin is controlled with the special class names and attributes of HTML elements (for defining the prev, next buttons or setting the max pages). It has a pretty unique, simple-yet-functional feature which is the ability to clicking on the pagination item and setting the page to be displayed manually . jqPagination has a single callback which is ran when a pagination request is made and returns the page number to be displayed. Its design can be customized easily and the plugin degrades nicely when JavaScript is disabled. Demo

jQTouch Zepto/jQuery is a Open Source plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, Android, iPod Touch, and other devices. Demo Sencha Touch Sencha Touch is HTML5-based framework for developing mobile web apps aimed at next generation, touch enabled, devices. It’s currently compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices. Demo Zepto.js Zepto.js is a minimalist JavaScript framework for modern browsers, with a jQuery-compatible syntax. Demo JQuery Mobile Framework A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Demo

jQuery Geo is an open-source popular framework for map/geolocation related actions. The plugin uses the open source map servers like Open Street Map, WMS and Esri ArcGIS for pulling the map data. The maps created are mobile-friendly and have lots of built-in methods for customization. jQuery Geo is very well-documented and supported with a bunch of examples. show mapping data and handle direct user interaction with the map use geospatial functions like calculating bounding boxes, measuring the distance between geometries, etc. Demo

jQuery News Ticker Many websites today including news ticker to display your latest headlines or to show other features in a tiny space. jQuery News Ticker is useful plugin, inspired from the BBC news ticker, that simplifies creating them. News Ticker enables users to show unordered lists, RSS feed, HTML file, or content in a simple yet slick customizable interface.It support for loading content via an RSS feed. Demo   Download

In this article we listed best chart libraries that you can use in your projects. Most of them are free for personal and commercial use.   Jquery GraphUp Plugin “GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.” and only 4kB.   Demo . jQuery Highcharts Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle. Demo jqPlot jqPlot is a plotting and charting plugin for the jQuery. jqPlot produces beautif

Nivo Slider is the world’s most popular jQuery image slider, and it’s completely free! Nivo Zoom is popular jQuery plugin that allows you to zoom the image. This plugin comes with 5 different zoom types, Optional overlay support, Supports HTML captions, Simple clean & valid markup, Loads of settings to tweak and others. The plugin is lightweight (4kb compressed), focused only on images and comes with a bunch of settings. Nivo Zoom, by default, doesn’t use overlays but can display the bigger image with an overlay where the opacity and colors of it can be customized. Features Specify position of larger image relative to the thumbnail Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position Optional overlay support Supports HTML captions Simple clean & valid markup Customizable settings Lightweight: Packed version only weighs 4kb For more details Visit: http://nivozoom.dev7studios.com/

Quick easy steps to create facebook page tab are as follows. Step 1: Login to facebook account. Step 2: Open url https://developers.facebook.com/apps in browser. Step 3: In right hand section, find “create new app” button and click it. Add display name, namespace is optional and select agree checkbox. Step 4: Once its saved it will load next page where you can find settings in the “Basic” section of your apps in the Developer App under ‘Select how your app integrates with Facebook’. Click ‘Page Tab’ to expand the Page Tab settings, and the Page Tab fields will appear, here you have to add the tab name, and application url & Secure Page Tab URL e.g. http://phptechi.com/. secure url is mandatory now. Click on save changes. On same page you can find “App ID:” at the top copy it somewhere in notepad/ text editor. Step 5: Now open url in another tab http://www.facebook.com/pages/ and click on create page button and create page. Step 6: Adding an App/ page tab

There are so many jQuery grid plugins. Each having different features and capabilities. Below I listed the best jQuery grid plugins which you can use in your projects Flexigrid: http://flexigrid.info/ : Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. jQuery Grid: http://www.trirand.com/blog/ : jqGridView: http://plugins.jquery.com/project/jqGridView   jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Ingrid: http://reconstrukt.com/ingrid/ :Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables. DataTable : http://www.datatables.net/index : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations o

There are many way to get or promote your site become popular . One of the popular method is by submiting your site to rss feed. When feeds became popular, it worked to have one icon on your site to point your readers in one location. Demo

jQuery UI 1.8 just released. The biggest changes are, of course, the new widgets themselves. Core – the core of jQuery UI, required for all interactions and widgets Widget – the widget factory, base for all widgets Mouse – the mouse widget, a base class for all interactions and widgets with heavy mouse interaction Position – a utility plugin for positioning elements relative to other elements The Position Utility With this, you can position any element relative to any other, or even relative to the parent window or your mouse. The Button Widget With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.Traditionally buttons had an input type of submit, reset, image or button, but progressively developers are creating from elements such as anchor tags.  The Button widget makes this an attractive alternative for developers who want new styles to their website.

  3D Carousel is a powerful jQuery plugin enabling you to create 3D carousel with  great features. It can be fully customizable controlled by mouse.  jQueryCarousel uses JSON as source data provider. Demo

  There are lots of jQuery plugins for slider, but jCarousel is a best jQuery plugin for controlling a list of items in horizontal or vertical order. It works with all major browsers. To use the jCarousel component, include the jQuery library, the jCarousel source file and a jCarousel skin stylesheet file inside the tag of your HTML document. Demo

If you are looking for how to Full Screen Background Images then use Backstretch is a simple plugin. It is a simple plugin jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes. demo .

  If you are looking for multiselect a combo box then use jQuery UI MultiSelect Widget is pretty good . It is a configurable plugin for jQuery . It converts input with attribute multiple into group of checkboxes with ability to add new values also allows filtering within multiselect.  The plugins provides an optional header with check all / uncheck all / close links, Keyboard support and it is only 6kb. Demo

jQuery Date Picker plugin allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates. jQuery: $(function() { $('.date-pick').datePicker(); }); css: a.dp-choose-date { float: left; width: 16px; height: 16px; padding: 0; margin: 5px 3px 0; display: block; text-indent: -2000px; overflow: hidden; background: url(calendar.png) no-repeat; } a.dp-choose-date.dp-disabled { background-position: 0 -20px; cursor: default; } input.dp-applied { width: 140px; float: left; }

We ofeten need custom scrollbars to scroll the content.  Here I listed some best custom scrollbar which you can use in your future projects. jScrollPane jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS. Tiny Scrollbar Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface. jQuery Custom Content Scroller A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with c

Jquery autocomplete allows you to easily create autocomplete/autosuggest boxes for text input fields. In this article will share 10 Useful Jquery Autocomplete Plugins which you can use in your future projects. Ajax AutoComplete for jQuery Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields. It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root. jQuery Plugin: Auto Complete Auto-complete takes data from the user tries to the list of words corresponding to the form of user input. The operation depends on the selected input, and also provides TN-dropping from the inside, so all you need is style ready for them. No adjustment is required, but the path to your script Ajax must be right, and you need the style in

jQuery UI Dialog jQuery UI has always been my favorite tool for creating custom and rich User Interface.  JQuery UI Dialog is part of the jQuery UI which is a complete bundle of effects and plugins built on jQuery. It is customizable via css and can be implemented in any project without restrictions. You can use this dialog box in five different forms: basic dialog, modal dialog, modal message, modal confirmation, modal form. jqModal qModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, and makes a great base as a general purpose windowing framework. It can be customized and it can act as a dialog, notice, modalbox, confirm-box, iframe-box or it can even display inline divs in modal windows. NyroModal Modal popup windows provide a quick way to show data without reloading the entire page.  It has the ability to define many callbacks at different time in the process to allow you to ed

Tooltips are very importa in website design. In mouse hover out the extra information show hide without hampering basic design or the main information. Mostly Tooltip is hidden by default, when user hovers the cursor over an element it show extra information. jQuery make very easy to add an attractive tooltip to your website. Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute. qTip qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tons of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license! Tooltip Tooltip may be one of the most used tooltip plugins for jQuery. You can setup multiple tooltips on the same page that use different appearances as well as use PNG background images that render well in IE b

Rich-text editors are web components that allow users to edit and enter text within a web browser. There are many rich-text editors out there.  Here I listed best rich editor which you can use in your project. TinyMCE TinyMCE is an open source rich-text editor. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API.TinyMCE is very easy to integrate into other Content Management Systems. Demo FCK Editor FCKeditor is another wildly popular open source online rich-text editor. It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data. It's lightweight and doesn't require any kind of installation on the client computer. Demo NicEdit NicEdit is lightweight, no-fuss cross-platform rich-text edi