jQuery has found its way into the hearts of many web developers due to its “write less, do more” motto. It really is very simple. Gone are the days when developers had to write endless lines of code to give a very small effect to their image galleries and text. Today, you could give any effect to images, text and everything else in a very seemless manner and integrate them into you websites.
jQuery has many features like event handling, animating and Ajax interactions for rapid web development and ofcourse it helps in increasing the website usability. In this post we are publishing Really Useful jQuery Sliders, Plugins and Resources for Web Developers. Some of these you may have already seen, others might be new to you. If you like any of these jquery and you plan to use them then please read the license agreement of the creator as they may change from time to time.
- 40 Brilliant and Advanced jQuery Effects To Use In Your Websites
- 25 Fantastic jQuery Techniques and Effects For Creating Awesome Websites
- Collection of mega drop down and multi level menus
- Nice jQuery Effects and Plugins for Gallery
- Creating Accordion, Dropdown and Sliding Menus in Mootools
Create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality. jQuery 2D Transformation Plugin is used for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements inside a specified wrapper element on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. The image could be blurred, the opacity could be changed. You could also pass any function that you want.
Use the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.
You could implement search by starting from the ground level or you could use Google Custom Search for the same to simplify all your search tasks. Using Google’s AJAX Search API, to create a custom search engine, with which you can search for web results, images, video and news items on your site. This helps you to embed some beautiful searches on your site.
A simple jquery/css banner rotator/slideshow with next/previous buttons, slides thumbnails and auto-play feature. It is too simple to implement. This could be a good start for a jQuery Beginner.
When designed and implemented with usability in mind, the accordion can be incredibly useful when organizing a good chunk of content. Simple accordion using CSS and jQuery for content.
You must have seen text effect on many flash websites. jTicker is a jQuery plugin that can be used for creating typing text effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.
Dynamic News is a jQuery news slider plugin that makes news integration to your web site very easy. Dynamic News plugin supports two ways to add news data. You can either enter your news via HTML markups manually or let Dynamic News plugin load the news from rss feed and build the necessary HTML markups automatically. One cool feature of Dynamic News slider plugin is the news preview or news summary pane, hovering over news headline will show news summary in a tool tip like pop up, which also provides link to news detail page. All the features of Dynamic News slider plugin are configurable. Its up to you whether you want to display news preview pane, display control bar, auto hide control bar or keep it always visible.
Here’s a simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover. Initially the second SPAN is hidden. When the A is hovered the SPAN “two” fades in using jQuery’s fadeTo effect, while SPAN “one” fades out. That creates smooth fading from one color into another.
The main point here is the math. It’s a simple table of products, and each product has an input box for quantity. Changing the value of that quantity box automatically triggers the math and totals are calculated. Row totals are calculated across, then order totals are calculated down. Quantities are totaled and multiplied by a shipping rate and all that is added together.
This is a jQuery based slider which auto-detects the number of “slides”. There are multiple animations per slide, which auto-plays, but has a start/stop button. Very easy to adapt. Totally Customizable
Very simple, minimally styled, jQuery powered dropdown menus. Cross browser friendly and maintains navigation “trail”. Each “level” is clearly marked in the CSS. Very minimal styling, easy to adapt.
Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space. The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width. A grid of cells expand both vertically (like a regular accordion) as well as horizontally to display the content they contain.
jQuery-based slider with lots of features: hashtag linking to direct slides, “infinite” sliding, easing, dynamically built (any number of slides), multiple navigation systems, API, and more. This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful. Also this slider is an actual plugin as well, which should make implementing it and customizing it much easier.
There are many sites on the internet which use the “View Source” button on many of their pages to give the users the code of a specific demo. This Fancy View Source Button helps you to make this routine thing more fancy, attractive and eye catchy. Using jQuery, Code Prettify, and CSS3 :target, we can make a button that pops up a nice looking view of the current pages source code.
As you click a different tab, the three columns of text fly upward at different rates and are replaced by new columns. It looks kinda like a slot machine. This could be helpful for many eCommerce sites also site which feature their pricing for various services they are to offer.
We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. It has features like Smart image preloading after the page is loaded, thumbnail navigation, etc.
This jquery-based slider does what the most jquery-sliders do, but adds a hashtag to the window location, so you can link to any content / position of the slider. Features include easy to implement, full styleable via css, mouse wheel integration, direct links to slider postion via hash tag, automatic generated number navigation, etc.
Most jQuery image sliders hover at around 8 kbs for minified versions, and around 15kbs or more for uncompressed development files, but what if there was a way to keep the simple fades, slides and features, and a couple other cool bits, but strip the bloated and corny diagonal-cross fades or spiral dissolves. This jQuery Image slider ensures all of that.