Nivo Slider - The Most Awesome jQuery Image Slider jQuery & WordPress Image Slider The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. The jQuery plugin is completely free and totally open source, and there is literally no better way to make your website look totally stunning. If you don’t believe us, check out the list of features below and you soon will. Beautiful Transition Effects The Nivo Slider makes displaying your gallery of images a beautiful experience, by using amazing transition effects ranging from slicing and sliding to fading and folding. Simple and Flexible Setup The Nivo Slider was designed to be as simple to setup and use as it could possibly be. Small, Semantic & Responsive The Nivo Slider is also designed to have as small an impact as possible on your page load times, so the packed version only weighs 15kb. Free to Use & Abuse The Nivo Slider jQuery plugin is open source and released under the MIT license. Powerful & Simple Slider Creation Multiple Slider Types Slider Themes
Beautiful Background Image Navigation with jQuery In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in […] View demoDownload source In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. On top of that we will have sub-menus that appear with their semi-transparent background sliding in. Note: There is a new version which let’s you customize things better:Sliding Background Image Menu with jQuery We will be using the amazing Background-Position Animation Plugin by Alexander Farkas. The photos that we will be using are from Pat’s beautiful B&W collection on Flickr. We tried to make this one cross-browser compatible and voilà! The Markup The CSS
Animate Image Filling Up Using jQuery | Build Internet! The Photoshop Portion – Preparing Your Image(s) Step one requires that you use your decision making skills to figure out what image you want to use. For this example, I have selected a character which I found in this wonderful Vectortuts+ tutorial. Next we’re going to want to drop it in to Photoshop for some basic preparation. We’re are going to end up with three images, in order to understand what role each will play, please check out the helpful diagram below. If any of the following confuses you in any way, take a look at the images I have included in the downloadable files, it should be easier to understand once you see the final products. What we’re looking to get first is a base image (in this case the actual character), which is a simple matter of saving a cropped image to the size you want. We will skip the middle layer for a moment and look at the top image, which will act as a frame. The CSS The HTML The jQuery This is by far the easiest cut and paste job ever. Google+
30 Fantastic New jQuery Plugins-Speckyboy Design Magazine With jQuery now being used in over 40% of all web sites, the demand for up-to-date and feature-rich plugins has never been greater. Thankfully, the community has always met its popularity head on by offering a constant influx of new jQuery plugins that constantly push the boundaries of functionality even-further. We haven’t actually had a good look at plugins in quite a while, so today, we thought we would bring you up-to-date with some of the latest and greatest. CodeExplorer CodeExplorer is an enitrely unique code formatting plugin that will not only format the code with colors and spacing, but will also display it in an entire folder structure. Subway Map Visualization Plugin The amazing Subway Map Visualization plugin allows you create, interactive subway map visualizations with HTML. Website Tour with jQuery Website Tour with jQuery allows you to, as its name clearly states, create a tour on a website with jQuery. jQuery Embedded Help System Flurid – The Fluid CSS Grid Isotope MobilyMap
jTruncate - Text Truncation for jQuery Overview Welcome and thanks for visiting! This is the official home page for the jTruncate plugin for jQuery. In a nutshell, jTruncate provides simple yet customizable truncation for text entities in your web page. Download The latest version of jTruncate can be found at the following links: Testers wanted! To date I have tested jTruncate in FF2, IE6+, and Safari 3 (for windows). Documentation jTruncate Options jTruncate allows you to customize nearly every aspect of the truncation operation. length: Defaults to 300 The number of characters to display before truncating. minTrail: Defaults to 20 The minimum number of "extra" characters required to truncate. moreText: Defaults to "more" The text to use for the "more" link. lessText: Defaults to "less" The text to use for the "less" link. ellipsisText: Defaults to "..." The text to append to the truncated portion. moreAni: Defaults to an empty string The speed argument for the show() method (as specified here). lessAni: Defaults to an empty string Examples
jeromeetienne.github.com/jquery-qrcode/ jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. Show, dont tell, here is a example How to Use It Let me walk you thru it. Then create a DOM element which gonna contains the generated qrcode image. Then you add the qrcode in this container by jquery('#qrcode').qrcode("this plugin is great"); This is it. see it live. Conclusion jquery.qrcode.js is available on github here under MIT license.