CoffeeScript
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. Fortunately, adding a jQuery gallery does not have to be difficult, even if you don’t have much experience with JavaScript and jQuery. In this post we’ll see tutorials and plugins that can provide you with the resources that you need to get a gallery of slider on your site. 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 Triple Panel Image Slider Building a jQuery Slideshow Plugin from Scratch Gamma Gallery
Building a jQuery Step-by-Step Form
Introduction A couple weeks ago I was asked to build a long form for accepting camp applications. I know as well as you do how annoying and tedious web forms can get. I have developed a nice way to give the user a step-by-step form by using jQuery. Demo By popular request I have added the demo. The HTML Open a blank HTML file and paste the following in: Above we have created a short form with 3 steps, which in reality could have many more. We will hide/show these <div>’s depending on where we are in the signing up process. Now onto the jQuery magic! The jQuery Setup All we are doing here is hiding all the divs by default and enabling the first one as soon as the page loads. Next/Previous buttons Creating the next/previous buttons is really the hardest functionality to code. This has not yet put the code into our document… so let’s append the above HTML to every step: Now we need to code the actual functionality of the buttons: How do we validate each step? The Completed Source Be Sociable, Share!
Making a Content Slider with jQuery UI - Nettuts+
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view. jQuery UI is the official library of widgets and utilities built on top of jQuery; it’s very easy to use, highly configurable and robust, and extremely easy to theme. To follow the tutorial you’ll need a copy of the latest version of the library; it can be downloaded using the jQuery UI download builder at Although we can choose any of the themes available, I’d recommend using the default theme of smoothness. jQuery UI includes a copy of the current version of jQuery, so we don’t need to download this separately. Getting Started Save this as slider.html in the slider folder. The Underlying Mark-up
Create jQuery Pop-Ups
If have to quickly scramble to display a pop-up for a single link then feel free to use the pop-up window generator. However, it would be better to use jQuery to easily integrate pop-up behavior for any link you choose. By using this jQuery code you can add this pop-up functionality to your website in a very maintainable and easy to use way. Note: this code is just for jQuery driven popup windows not modal overlay windows. The Benefits of using jQuery for Popup Windows You never have to paste javascript into html links - all you have to do is add a class to turn the link into a popup window link.You can define multiple classes easily in the javascript so that just by changing the class name you can display the right pop-up sizes for your website.There's no javascript in the href html so updating your site or removing the popup functionality is a breeze if you have to make changes in the future. jQuery Popup Code Instructions <a href=" class="popup2">jQuery Popup</a>
Better Check Boxes with jQuery and CSS
Martin Angelov In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable. The first step is to lay down the structure of the underlying HTML document. index.html <! The main container element – the #page div, holds our form. Notice the HTML5 data attributes, specified on some of the labels. And here is the markup of our replacement checkboxes: <span class="tzCheckBox checked"><span class="tzCBContent">ON</span><span class="tzCBPart"></span></span> When our plugin is called, it will loop through the checkboxes, and insert the HTML code you can see above after each one, while at the same time hiding the original. Checkbox Replacements Explained Now lets move on to the styling. We are using a single transparent PNG background image to style the checkbox replacements. jquery.tzCheckbox.css jQuery
CSSREMIX
Event Pooling with jQuery Using Bind and Trigger: Managing Compl
Managing Complexity in the UI As everyone knows, the more dependencies you have in a system, the harder maintaining that system is. Javascript is no exception- and orchestrating actions across complex user interfaces can be a nightmare if not done properly. Luckily, there’s a great pattern for orchestrating complex interaction in a disconnected way. No, it’s not the Observer pattern. Problems with the Observer Pattern The observer pattern is great for some things, but it still requires a dependency between the observer and the subject. observer pattern Event Pooling Event pooling is simply a variation on the Observer pattern, where a “middle man” is used to orchestrate the publish/subscribe system. Event Pool This provides some cool functionality- especially because if you need to reference the subject (called the publisher), you can get a direct reference via the event pool. Show me Code! We have an UpdateOutput() function that updates the span: This is wired up via the bind function:
Spacegallery - jQuery plugin
About Again another image gallery. Click on the images bellow to see it in action. Download spacegallery.zip (205 kb): jQuery, Javscript files, CSS files, images, examples and instructions. Changelog The first release release. Implement Attach the Javascript and CSS files to your document. Invocation code Prepare a block level element with some images inside. Options A hash of parameters.
