The simplicity, advanced features and strong support are common arguments for developers preferring jQuery against other JavaScript-frameworks. In fact, jQuery is one of the most popular JavaScript frameworks, with powerful tools that can significantly improve the user’s interaction with Web applications.
To help you improve your skills, in this article we present 40+ Fresh And New jQuery Plugins Of Slider’s And Gallery’s that have been created recently and that could make the development of your next website an easier and more interesting experience than the last.
jQuery Slider’s And Gallery’s
Moving Boxes Carousel with jQuery
Many of the concepts presented in those tutorials are the same with this slider, so I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!
Sliding Boxes and Captions with jQuery
From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.
Creating a Filterable Portfolio with jQuery
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
jQuery Infinite Carousel
This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself.
De-Constructing Accordion and Hover Effects with jQuery
The two key effects Tim is using are a simplified accordion and a hover effect. It’s worth noting that the hover effect only works in WebKit (Safari & Chrome), but I’ll show you how to create the effect using jQuery too.
Create a gallery by using z-index and jQuery
In this tutorial you will learn to combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures.
Making a Content Slider with jQuery UI
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.
BBC Radio 1 Zoom Tabs
This tutorial explains how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
How to create a sliding image/reveal content with jquery
Someone asked me about this effect a while ago and i thought i should make a tutorial about this. Since is the first time i’m doing this i expect a lot of criticism. So first let’s have a look on what we will be creating:
Portfolio Layout Idea Using jQuery
The iPhone unlock screen in xHTML, CSS and jQuery
I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I’m going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.
Create an Amazon Books Widget with jQuery and XML
It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.
Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
Creating a polaroid photo viewer with CSS3 and jQuery
Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).
jQuery Slideshows With the Cycle Plugin
jQuery also has an outstanding developer community with loads of plug-ins that you can use to expand jQuery’s capabilities while simplifying the process of development. The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element.
Simple jQuery Spy Effect
It’s the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I’ll explain how to produce.
How easy to create a slide tabbed box using jQuery
There are so many kinds of tabbed menu nowadays. Still I really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust me it only takes a few minutes (I’m not such a hard-working developer to write something longer then that ). As the main tutorial is about Javascript with jQuery, so I will just move quickly through the CSS.
How to Load In and Animate Content with jQuery
In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.
QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler
QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.
AD Gallery – a jQuery gallery plugin
A highly customizable gallery/showcase plugin for jQuery.
A jQuery Plugin to Create an Interactive, Filterable Portfolio
The plugin is configurable to work with just about any markup. Here is an example of what we used for the filters and the portfolio items.
Create Beautiful jQuery slider tutorial
This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.
Create Featured Content Slider Using jQuery UI
There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.
How to Make a Slideshow with a Transparent PNG Frame
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
Image Rotator with Description
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
Fancy Thumbnail Hover Effect
Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful.
Supersized 2.0 Released – Now with Transitions & Controls
A full screen background / slideshow jQuery plugin.
Create Content Slider using jFlow
There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.
Build a Content Slider with jQuery
There are a ton of tutorials already out there about creating content sliders with jQuery.So why bother writing another one? While I don’t think that the existing tutorials areincorrect, bad, or otherwise unacceptable, I haven’t found one that met my needs.
Photo Slider Tutorial
A simple and easy to use jQuery plugin that creates a beautiful photo slider.
jQuery TOOLS / Scrollable
This plugin makes it extremely easy to add scrolling functionality to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the only library you need.
jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget.
slideViewerPro – Image Slider
slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.
loopedSlider
loopedSlider is a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.
Pikachoose
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing.
Agile Carousel
Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!
Easy Slider
Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with CSS alone. So, basically you link to plugin file, set the content up and style it with CSS.
Feature List
This plugin is managed to implement quite quickly. The script requires two arrays of items – for tabs and output. When user clicks on one of tab the script finds corresponding output item by index and starts fading. A CSS class current is added to the current active tab.
Galleriffic
Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.
Spacegallery
Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.
Creating a Slick Auto-Playing Featured Content Slider
Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.
jQuery.popeye
Then came Lightbox. Finally, an unobtrusive script allowed to display enlarged versions of thumbnail images embedded in web pages without leaving that web page or breaking the layout. The “simple” solution was to add a semi-transparent overlay to the page, on which the enlarged image is centered.
s3Slider
GALLERIA
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
Found something missing in this post?
While compiling this stuff on this post, it’s possible that we miss some other great jquery plugins. Do not hesitate to share it with us in Comments so that we can add instantly.
Categories
Pages
Text Ads
Subscription Options
Popular Posts
Community Feeds
Recent Posts
Friends & Sponsors
Recent Comments