60+ 必须拥有的jQuery插件

jopen 8年前

一个强大的jQuery插件集合。几乎所有这些插件都是一个网页设计师需要拥有的。

这个jQuery插件集合包含了:图片库展示插件,排版插件,导航插件,幻灯片和相册插件和许多其他类型的插件。

Best jQuery Plugins for Image Galleries

Photo gallery is a need every second website. But as ever, creating impressive image galleries is no walk in the park…. but it can be so if you use these jQuery plugins. Most of these links do not include just a jQuery plugin but also its tutorial.

Responsive Thumbnail Gallery Plugin

This can work as slideshow as well, or a photo album. Depends on how you use it.

60+ 必须拥有的jQuery插件

Grid Navigation and Gallery

I loved this gallery. Versatile, stylish yet elegant.

60+ 必须拥有的jQuery插件

Classic JavaScript Gallery

A routine image gallery. Everybody needs it.

60+ 必须拥有的jQuery插件

Scroller Gallery

The above one was a routine kind of a gallery…. this one isn’t!

60+ 必须拥有的jQuery插件

Moleskine Notebook Booklet

Flipping book style album.

60+ 必须拥有的jQuery插件

Making a Really Cool jQuery Gallery

A custom gallery that scans a computer folder for images and creates a slick gallery using the images in the folder. It uses PHP, CSS3, jQuery and Lightbox plug-in.

60+ 必须拥有的jQuery插件

Slider Gallery with jQuery

This is somewhere in between a gallery and a slideshow, but since it takes up a full webpage, it will be considered a gallery.
The screenshot tells all about the output result so no need to define it.

60+ 必须拥有的jQuery插件

SIDEWAYS – JQUERY FULLSCREEN IMAGE GALLERY

This gallery became very a popular a year ago. The reason being that it contains amazing effects and it is also perfect usability wise.

60+ 必须拥有的jQuery插件

Galleria

It is simple, yet elegantly stylish. Traditional stuff never goes out of style and that’s why this plugin is still a hit.

60+ 必须拥有的jQuery插件

Polaroid Photobar Gallery

Polaroid effect is made by slightly rotating the images. It works as an album and as a gallery as well.

60+ 必须拥有的jQuery插件

Best jQuery Plugins for Typography

At the beginning of the time, webpages didn’t have pictures at all… and that trend is coming back.  That is because images cannot adjust according to screen resolution, nor are they search engine friendly.
On the other hand, text adjusts itself like water adjusts itself according to its contain. Text can squeeze, expand, move around, break and rejoin. These days every one is focusing on typography based flat designs for better usability.

Check out: Beginner’s Guide to Using Typography in Responsive Design

FitText

A cool little script that changes the content height/width to fit the best on the screen.

60+ 必须拥有的jQuery插件

Lettering.js

CSS doesn’t give complete down-to-the-letter controlling but no tension, we have jQuery for that. Lettering.js provides controls for:

  • Kerning Type
  • Editorial Design
  • Manageable Code
  • Complete Control

60+ 必须拥有的jQuery插件

Kerning.js

CSS3, meet kerning. Kerning, meet CSS3. You can Kern, stylize, transform and scale your web
type with real CSS3 rules, automatically. All you have to do is add: in to your webpage.

60+ 必须拥有的jQuery插件

Arctext.js

If you used any vector design software, you’d know what it means to fit text along a path. This plugin does exactly that. Fits your text along a arc, circle or such another shape.

60+ 必须拥有的jQuery插件

jSlabify

If you’ve ever worked in newspapers, you’d know what slabbed text is.

Don’t know what slabbed text is? Check out the screenshots.

60+ 必须拥有的jQuery插件
60+ 必须拥有的jQuery插件

HATCHSHOW

This is my favorite jquery plugin related to typography. And I recommend you to use it.

 

60+ 必须拥有的jQuery插件

 

Best jQuery Plugins for Photo Slideshow

These slideshows add ‘wow’ factor in your websites. But it’s not just about the ‘wow’ factor, a slider can add huge amount of user interactivity and that’s why they are loved by clients.

Rotating Image Slider with jQuery

I think the screenshot says it all. The shape and stacking of the pictures is where the beauty of this jquery plugin lies.

60+ 必须拥有的jQuery插件

gSlider

A lightweight multipurpose image slider.

60+ 必须拥有的jQuery插件

Create Beautiful jQuery Slider Tutorial

This is a tutorial that explains how you can develop an impressive jQuery slider. Of course, you can get the code and use it as a plugin.

60+ 必须拥有的jQuery插件

Create an Image Rotator with Description (CSS/jQuery)

This is a very useful image rotator, slideshow, featured content container etc. etc. etc.
It contains image size image, thumbnails of the rest, titles of the rest and image description as well as the title of the current slide.

60+ 必须拥有的jQuery插件

jQuery Slider Shock

Simple effect, highly interactive. Perfect for online magazines and large portals. You can also customize it as a image gallery.

60+ 必须拥有的jQuery插件

Elastislide – A Responsive jQuery Carousel Plugin

This is a carousel, not particularly a slideshow but this can work as a slideshow strip so I added it.

60+ 必须拥有的jQuery插件

Creating a Rotating Billboard System with jQuery and CSS

The vintage style of billboards in the sports stadiums.

60+ 必须拥有的jQuery插件

jQuery Banner Rotator

I loved the navigation within this slideshow, and that navigation is the reason I added it in this list.

60+ 必须拥有的jQuery插件

Best jQuery Plugins for Navigation

Navigation is the backbone of any web design. It is the hub of all interactivity with the user. And that’s why it has to be paid so much attention.

My suggestion is that in navigation, don’t go for style but usability. However, I’m adding navigation jQuery plugins for style as well as usability.

jQuery Facets

This isn’t really a navigation menu but a navigation panel. Check out the demos, you’ll know what I’m talking about.

60+ 必须拥有的jQuery插件

Floating Social Toolbar With jQuery And CSS

This should be one of the perfect examples of jQuery plugins for navigation. This creates floating bar so it always has high visibility.

60+ 必须拥有的jQuery插件

Create a Cool Animated Menu with jQuery

This contains Photoshop tutorial to learn how to design this menu, then coding tutorial for development of the tutorial and then it also includes downloads for both of these tutorials. Excellent resource for learning web designers.

60+ 必须拥有的jQuery插件

NavDoc

This resource contains two types of impressively designed menus. Smooth Ajax adds the spark, blue is the color, rest is history.

60+ 必须拥有的jQuery插件

Page Scroller

There’s a premium version which includes API and skins. otherwise its free.

60+ 必须拥有的jQuery插件

Expanding Image Menu

This is another one of those navigation panels, this can be used to display featured content as well. You roll over the mouse pointer and it expands.

60+ 必须拥有的jQuery插件

Elastic Thumbnail Menu

For giving the website a cool funky look, this navigation should be the very best solution.

60+ 必须拥有的jQuery插件

Slide Down Box Menu

You can see the result navigation in the image, what else do I need to say 60+ 必须拥有的jQuery插件

60+ 必须拥有的jQuery插件

Outside the Box

If you are fed up with the routine kind of navigations, then go for this. This is nothing like routine. It is designed mimicking the Mac OS X styling.

60+ 必须拥有的jQuery插件

Image Menu with jQuery

This is my favorite navigation menu from the selection. The image expands on mouse pointer hover. The text is very visible, large.

60+ 必须拥有的jQuery插件

Best jQuery Plugins with Parallax Effect

Parallax has taken the web by storm. Everybody is talking about and everybody wants it in their website. These are a few plugins which you can easily add in any website add that parallax spark everyone is chasing.

By the way, published 50 Best Parallax Scrolling Examples, do check them out if you like parallax effect.

Scrolling Parallax

Women and programmers hate bugs. Probably different kind of bugs, but bugs nonetheless. I won’t go into details, just check out this plugin. It helps to control bugs.

60+ 必须拥有的jQuery插件

Scrolly

A classical parallax scrolling effect. This is a plugin you could need when a client demands parallax effect and you don’t need a quick way to meed his/her demand.

60+ 必须拥有的jQuery插件

Spritely

You can find the live demo on the page. Just check out the header.

60+ 必须拥有的jQuery插件

Plax

The best thing about this jquery plugin is that it is very well documented so you never have trouble of finding, fixing or editing and updating the code.

60+ 必须拥有的jQuery插件

Parallax Slider

Excellent result, easy to implement. What else do you want?

60+ 必须拥有的jQuery插件

Misc. jQuery Plugins

These are mixed types of jQuery plugins that can add a lot of usability and/or dynamism to your website.

Cloud Zoom

It displays a large of the image on hover.

60+ 必须拥有的jQuery插件

Mosaic

Displays various styles of hovers over images and albums.

60+ 必须拥有的jQuery插件

liteAccordian

I loved this one for displaying featured content on a website.

60+ 必须拥有的jQuery插件

Image Sliding Effect

Hover over any image and it slides away.

60+ 必须拥有的jQuery插件

Lens Image Zoom

Almost like Cloud Zoom, but this one is a little funky while that one was pretty elegant.

60+ 必须拥有的jQuery插件

Activity Indicator

Customize-able lightweight image/component loaders.

60+ 必须拥有的jQuery插件

Minimal Social Share

A lightweight plugin which adds a social media sharing bar.

60+ 必须拥有的jQuery插件

jRumble

A very cool animation effect. Works great on banners and objects that hover over the main web page (such as “follow us on 推ter”).

60+ 必须拥有的jQuery插件

Form wizard

Cool form maker plugin with plenty of themes and styling options.

60+ 必须拥有的jQuery插件

Quovolver

This little plugin stylizes quotation marks in your content.

60+ 必须拥有的jQuery插件

Filters

jQuery filters that set the sorting order of the content.

60+ 必须拥有的jQuery插件

Website Tour

A very unique plugin which describes using the website.

60+ 必须拥有的jQuery插件

Apple.com like Search Suggestions

The title says it all…

60+ 必须拥有的jQuery插件

Custom 油Tube Player

Though I’m against using a custom player, since every one can recognize the 油Tube player but a custom player might be just a little confusing for the visitor… but nevertheless it sounds intriguing.

60+ 必须拥有的jQuery插件