Isotope 25 jQuery Slider/Image Gallery Tutorials and Plugins This post was originally published several years ago. As technology and trends have changed over the years, the content of the post became outdated. So we’ve updated the post with all new examples that will be more relevant for modern design and development. jQuery image galleries and sliders are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. jQuery Image Gallery/Slider Tutorials: Create an Image Rotator with Description (CSS/jQuery) This tutorial by Jake Rocheleau is a re-make of a popular tutorial originally written by Soh Tanaka. How to Create a Simple Multi-Item Slider This tutorial from Mary Lou teaches the process to create an awesome slider that is great for displaying products or other items. Triple Panel Image Slider In this tutorial from Mary Lou you’ll learn how to create a slider with a cool 3D effect. Building a jQuery Slideshow Plugin from Scratch Creating Touch-Enabled Slider with SwipeJS and jQuery Gamma Gallery
ColorPicker - jQuery plugin About A simple component to select color in the same way you select color in Adobe Photoshop Last update 23.05.2009 - Check Download tab Features Flat mode - as element in page Powerful controls for color selection Easy to customize the look by changing some images Fits into the viewport License Dual licensed under the MIT and GPL licenses. Examples Flat mode. Custom skin and using flat mode to display the color picker in a custom widget. Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color. Attached to DOMElement and using callbacks to live preview the color and adding animation. Download colorpicker.zip (89 kb): jQuery, Javscript files, CSS files, images, examples and instructions. Changelog Added: close on color selection example Added: restore original color option Changed: color update on key up event Fixed: colorpicker hide and show methods Fixed: reference to options. Fixed: RGB to HSB convertion
Moleskine Notebook with jQuery Booklet Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here: My Moleskine (PSD) For the navigation arrows […] View demoDownload source Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here:My Moleskine (PSD) For the navigation arrows we used the pixel perfect PSD provided by premiumpixels.com underSimple Little Arrows (PSD) Ok, so let’s get started! The Markup The HTML structure will be made up of the booklet plugin markup which includes the div with the id “mybook”. <div class="book_wrapper"><a id="next_page_button"></a><a id="prev_page_button"></a><div id="loading" class="loading">Loading pages... Let’s take a look at the style. The CSS
[SORT] jquery tinysort jQuery UI jQuery UI offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own. Play with the demos, view the source, build a theme, read the API documentation and start using jQuery UI today. Interactions Interactions add basic mouse-based behaviors to any element. You can create sortable lists, resizable elements, drag & drop behaviors and more with just a few lines of code. Interactions also make great building blocks for more complex widgets and applications. Widgets Widgets are full-featured UI controls that bring the richness of desktop applications to the Web. Effects Effects add support for animating colors and class transitions, as well as providing several additional easings. Utilities Utilities used by jQuery UI to build interactions and widgets.
Tipped 2 - jQuery Tooltips Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. Canvas graphics The entire skin of the tooltip, from shadow to loading icon, is drawn using Canvas. This means that tooltip styles can easily be changed without having to create any images. Canvas based tooltips also have the advantage that they look great in every browser, even in IE6! Javascript API With the powerful API provided by Tipped it's possible to quickly create and control tooltips customized to your site, all it takes is a few lines of Javascript. And more... Check out the demonstrations below or head over to the documentation to discover more awesome features.
Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework Posted by Scott on 01/05/2009 Topics: css jQuery ui design visual design We've updated our popular Date Range Picker plugin to use jQuery UI 1.7 and the new jQuery UI CSS Framework. Working Demo: Demo Page The demo above was generated with the following code: jQuery: $('input').daterangepicker(); An additional demo with arrows and a custom dateFormat: Demo Page Features and Updates Uses jQuery UI 1.7.1: The range picker now uses the latest version of jQuery UI's datepicker, and allows passing of native datepicker options. jQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready. Download (and help us improve) the code The date range picker plugin code is open source and available in a git repository, jQuery-UI-Date-Range-Picker. Developer Options The following options are available in this plugin: Development Notes This plugin is a work-in-progress, and we would love to hear your input on how it could be improved. Dependencies Setting Menu Presets
JQuery Weekcalendar 10 jQuery HTML Plugins Here’s another list of 10 jQuery HTML Plugins to spice up your HTML based websites ;-). Check it out and see what else you’ve never been bumped into. Have fun! 1. jQCandy floating-head-foot plugin This plugin is useful for HTML pages containing large tables that do not fit in the browser viewport. Source 2. jq-log jQuery logger can log any object with recursion to html element, or console. Source 3. jQuery plugin to easily create sticky side panel menu. Source 4. Is simple plugin which helps you to create beautiful slideshows in few moments. Source 5. Convert WIKI style text to HTML. Source 6. Script for flexible styling of lists (ol, ul). Source 7. jQuery Render Plugin Is Render html by template and JavaScript Object. Source 8. This plug-in is a simple port based on Steven Levithan’s replaceHtml function, designed to speed up the native innerHTML Javascript assignment property and as a replacement for jQuery’s html() function. Source 9. Source 10. Source AUTHOR: Sam Deering.
» Jquery Wizard Plugin » Worcester Web Site Development Blog After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here. The code: First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");} Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number. Step 1 Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam turpis duisi Step 4: XXXXXXXXEt nequ a quam turpis duisiStep 5: XXXXXXXX Et nequ a quam turpis duisi Step 2 Step 3 Step 4 Step 5 A Demo of the wizard
jQuery JavaScript Library QR Code generator JQuery plugin Hi everyone! Google has cool charts API that allows you to easy have chart on your page, so I decided to create a simple JQuery plugin to work with one of them :) I have HTC phone and sometimes I'm toooooooooooooo lazy to type in an address (with a lot of slashes, dashes, dots and other parameters) which I see on my PC monitor, so QR Code is really good thing that allows to simply generate an image and open this page on my mobile. Now the code: 1. You may need is an HTML element on page which will contain generated image, something like:<span class="qrContainer"></span> Google Chart API has some limitations for screen size, but I think most of developers won't create 800x600 QR Code. 3. </script> Here you can find an example of this plugin usage. Like this article?
[RANGE] DatePicker - jQuery plugin About Date Picker component with a lot of options and easy to fit in your web application. Last update 22.05.2009 - Check Download tab Features Flat mode - as element in page Multiple calendars in the component Allows single, multiple or range selection Mark dates as special, weekends, special days Easy to customize the look by changing CSS Localiation for months' and days' names Custom day to start the week Fits into the viewport License Dual licensed under the MIT and GPL licenses. Examples Flat mode, single selection, the week start monday. Flat mode, multiple selection, disabled dates, special day, the week start sunday. Clear selection $('#date3').DatePickerClear(); Flat mode, range selection, 3 calendars. Attached to an text field and usign callbacks to update the date selection with the value from the field. Flat mode, inside a custom widget and with custom design. Download datepicker.zip (55 kb): jQuery, Javscript files, CSS files, images, examples and instructions. Changelog The first release.