• Thiết kế website bán hàng miễn phí 2018

45+ Incredible jQuery Plugins Making Images more Dynamic and Elegant

This article will introduce you to more than 45 jQuery plugins providing enhancements to how you can display images on your web pages. This is essential for creating dynamic state of the art web solutions and jQuery makes it simple and elegant. If you know other great jQuery plugins or would just like to share another great way of working with images in web development, them please drop a comment.

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.

The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment). Also, it’s only 2.3kb!

Supersized 2.0

best-jquery

Supersized cycles images with transitions and preloading. It offers several useful features fx. Transistions: Fade, Sliding (Up, Down, Right, Left), and None. It automatically resizes images to fill browser while maintaining image dimension ratio.

MopBox

best-jquery

MopBox displays a box that can be moved by dragging. The box have an awesome scroll-bar to change the display. It has been tested and works with all current major web browsers. This plugin requires jQuery UI to enable draggable, resizeable features. Demo

jQuery Panel Gallery

best-jquery

jQuery Panel Gallery is a compact image gallery that can easily be configured. Not one image needs to be sliced or edited to work with this plugin. The plugin handles everything itself. You can even configure fading transitions per image.

jQ SlickWrap

best-jquery

If you’ve ever felt the need to wrap stuff around an irregularly-shaped image using CSS’s float, you may have been somewhat disappointed to find out that it’s forced to wrap around the image’s bounding box, rather than the actual contents of the image. This fixes that.

Full Screen Image Gallery Using jQuery and Flickr

best-jquery

The Full Screen Image Gallery plugin is full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It comes packaged with a flickr search engine, thumbnails, captions, and with a preloader. It basically loads image links one by one and replaces it with a full screen image gallery and it scales the image using CSS only (with some JS for IE6).

CrossSlide

best-jquery

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.). This is a great solution for creating dynamic effects fx. in a header.You simply have to see the effect for yourself demo here.

Spacegallery – jQuery plugin

best-jquery

Space Gallery uses a fresh method for displaying a slideshow of images. When you click on the gallery it will, with a nice transition effect, rotate to the image behind. The gallery and its transitions can be easily customised with fairly extensive array of functions.

Highslide JS

best-jquery

Highslide JS is an open source image, media and gallery viewer written in JavaScript. It is an excellent, unobtrusive lightbox-style script with a multitude of uses. It is free for non commercial uses.

These are some of it’s features:

  • Quick and elegant looking.
  • No plugins like Flash or Java required.
  • Popup blockers are no problem. The content opens within the active browser window.
  • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
  • Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
  • Free user support for both commercial and non-commercial users.
  • Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.

Galleriffic

best-jquery

Galleriffic is a jQuery plugin that has been optimized to handle high volumes of photos while conserving bandwidth. This feature rich and easily customizable plugin is fairly easy to install and with its image pre-loading, thumbnail navigation (with pagination) and its integration with the jQuery.history plugin (supports bookmark-friendly URLs per-image) it has become very popular.

JQZoom

best-jquery

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Easiest Tooltip and Image Preview Using jQuery

best-jquery

An incredibly easy way of achieving tooltip like bubble popups that appears when you roll over link or a thumbnail.

InnerFade with JQuery

best-jquery

It’s designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

AD Gallery

best-jquery

I love this gallery plugin. It is simple, yet powerful. It is a plugin that supports many transition efects, ir preloades the images, with cations and… hell, it can pretty much do everything you would want from an image gallery. Just have a look at the feature list.

Animated InnerFade

best-jquery

Full w3c compliant animated slideshow with sliding effect on large images. Check it you you need to see the effect.

jQuery spherical panorama viewer

best-jquery

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and install MPRemap from Helmut Dersch website for this purpose.

Zoomer Gallery

best-jquery

GalleryView is a plugin that allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple yet elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

prettyPhoto a jQuery lightbox clone

best-jquery

jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.

jQuery virtual tour

best-jquery

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.

crop, labelOver and pluck

best-jquery

Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there are 2 other plugins: LabelOver and Pluck.

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.

best-jquery

jQuery image zoom effect

best-jquery

Tutorial teaching you the technique used to zoom an image thumbnail and display a overlay of text. Really a cool feature to make a specific area gain extra attention.

jQuery Cycle plugin

best-jquery

This is a lightweight slideshow plugin that supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The effects look very good!

Fancy Box

best-jquery

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them. Also support media.

Galleria

best-jquery

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.

Jcrop

best-jquery

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

AnythingZoomer jQuery Plugin

javascript-frameworks

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. Demo & Download

ImgAreaSelect

best-jquery

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

PanView

best-jquery

This plugin allows your visitors view details of a big image and move around with the mouse.

Create a gallery by using z-index and jQuery

best-jquery

In this tutorial we will 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.

Create an Image Rotator with Description

best-jquery

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.

ImageSwitch

best-jquery

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects.

Create Featured Content Slider Using jQuery UI

best-jquery

s3 Slider

best-jquery

This is an easy way to add a good looking image slideshows with text flyin to your website.

Lightbox Plus

best-jquery

Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar. Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

Shadowbox

best-jquery

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.

Image Cross Fade Transition

image-cross-fade-transition

Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:

$(function () {
  $('img.swap').hover(function () {
    this.src = 'images/sad.jpg';
  }, function () {
    this.src = 'images/happy.jpg';
  });
});

View the working example and the source

Scrollable

javascript-frameworks

Scrollable is useful jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML. You can make items scroll horizontally or vertically and choose how many items are visible at once.

jQuery Infinite Carousel

javascript-frameworks

This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page

Image Loading

javascript-frameworks

This tutorial will show how to load images in the background, and once loaded handle the event and create your own response. Try Demo | View Code

Creating a polaroid photo viewer with CSS3 and jQuery

polaroid_photo_viewer

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

Easy Slider 1.7 – Numeric Navigation jQuery Slider

best-jquery

Great slider plugin for content and images.

PHP & jQuery image upload and crop

best-jquery

Awesome solution for allowing users to upload and crop images on your site.

Agile Carousel

best-jquery

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!

Sliding Boxes and Captions with jQuery

best-jquery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

AnythingSlider jQuery Plugin

best-jquery

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.

Creating a Slick Auto-Playing Featured Content Slider

best-jquery

Share facebookShare facebook

Facebook Comments

Tin Cùng Chuyên Mục

Trang 1 / 1

Bạn đã đọc tin này chưa ?

Go Top