반응형
17 jQuery Carousel Plugins

 

http://www.designerledger.com/jquery-carousel-plugins/

 

Do you own a picture or video based website? Well, in case your picture or video is not very interesting, people might not even look at your site. This could be a problem. With content you could work on the fonts or probably on the look of the page. Content has a variety of ways to make it look attractive and creative. But, it is difficult to make your website filled with videos and pictures look beautiful. So, is there no way out? Well, it’s difficult not impossible. You could probably use the jQuery carousel plugins that would help create a whole new world of video and picture for you.

With jQuery carousel plugins you can animate your website in order to make it look interesting. The effects created with this plugin give your video a special effect. In fact your videos are handled in a brilliant way such that they appear to be interesting. What happens when you use these plugins? Well, your video suddenly appears inside a small circle that gives away an interesting and appealing look to the overall website. You can have your logos on a rectangular slider that has an option of navigation. What could be better than this for your pictures? You could even create small circles surrounding your main rectangle and make it appear in a sequential format. Wow! This sounds really appealing to the eyes. How about creating small images below the main image? This could make your picture look interesting and effective to the eyes. A small portion of the other images can attract your eyeballs completely.

So, you can actually use one or all of these plugins and create an interesting plugin mix. Try out these interesting plugins and give your website filled with videos and photos an amazing feel.

If you like this article, you might be interested in other article on best jQuery Plugins to Create Dynamic Layouts. and Parallax Scrolling Tutorials and jQuery Plugins for Designers.

jSprouts

jsprouts

Sprouts is a creative slider with gorgeous and innovative animations. Thumbnails are shown on mouseover surrounding the slider. jSprout can handle also custom HTML contents, videos, flash and even Google Maps, very useful for mini-sites, vCard sites, personal sites or portfolio sites.

Demo

BubbleSlider

bubble-slider

BubbleSlider is a jQuery circle only slider. It is really light (3kb for minified version and 8kb for commented version) and provides different eye-catching effects.

Demo

jQuery Responsive Grid Quote

jQuery-Responsive-Grid-Quote

A jQuery plugin help you to display team information or customer testimonial. This carousel plugin is responsive and lightweight. Main features include auto delay slideshow, optional auto scroll, optional thumbnail background color, font size etc.

Demo

jSliderPro

jSliderPro

jSliderPro is a complete and highly customizable banner rotation and is equipped with a complex set of features that make it extremely flexible and adaptable. With little effort you can create unique, fully responsive – and compatible with all major browsers. HTML5 slideshows for your websites.

Demo

Dasky Timeline Slider

dasky-timeline-slider

Dasky is a jQuery timeline slider,you can use it to show you products’s chagelog/loadmark, or loadmark of you team/life. And others what you want. It based on the power of css transforms and will fallback in old browsers who do not support it.

Demo

J.B.Slider – Standalone

J.B.Slider-Standalone

J.B.Slider is easy to use jQuery image slider with description box and button link for further reading. This requires jQuery and jQuery UI (both included in the package) Supports Internet Explorer 7 to 9, Chrome, Firefox, Safari, Opera.

Demo

Versatile Touch Slider

Versatile-Touch-Slider

Versatile Touch Slider is a jQuery plugin that offers a variety of options. It may just be a banner rotator or a shelf to display products. Has the touch feature to mobile and drag for the desktop. The navigation can also be done via buttons and menu. Through the lightbox it is possible show multimedia content (video, audio, image and html content). See below the main features and click on Live Preview to see some examples.

Demo

ajSlideshow

ajSlideshow

AjQuery gallery slideshow plugin is a perfect slideshow and it is as it looks. With sleek, smooth and simple 5 transition effects this plugin is compatible with all modern browsers

Demo

Everslider

Everslider

Everslider is fully responsive, mobile optimized jQuery carousel plugin. It uses CSS3 transitions for animations with fallback to jQuery. Supports unlimited slides with any content. Everslider recognizes touchswipe, mousewheel and keyboard interactions and works in vast range of browsers starting with IE7 up to mobile browsers.

Demo

Ultimate Smart Slider

Ultimate-Smart-Slider

Stop coding your images! This is a jQuery plugin that automatically generates a slider from a folder of images, taking the name of the images as captions. You can change the order of the images, and also select which ones will show the caption.

Demo

RoyalSlider

RoyalSlider

RoyalSlider is easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support for mobile devices. As navigation you can use thumbnails, tabs or bullets. Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. Developed in best practices of HTML5, CSS3 transitions are used for all animations (with fallback).

Demo

All Around

All-Around

All Around content slider is a multi-purpose all-in-one slider solution for your website. It supports both images and video. It can be an easy and effective solution for your shop related website as you can display your products in an interesting and eye appealing way. All Around carousel is perfect for almost all type of websites and it can fit perfectly into all business areas.

Demo

Cloud Carousel

Cloud-Carousel

This jQuery carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image. There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/ accessibility. Not having another dev-tool in the workflow is another plus. The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.

Demo

bxSlider

bxSlider

This is a fully responsive jQuery content slider plugin. Slides can contain images, video, or HTML content. This plugin has advanced touch / swipe support built-in and uses CSS transitions for slide animation (native hardware acceleration!)

Demo

jCover Flip

jCover-Flip

jCoverflip is a jQuery widget that allows website administrators to present featured website content in a visually appealing manner. The widget is quick setup and is highly configurable, and can run as a Drupal Module or standalone. jCoverflip enables quick, easy and granular customization to the look and feel and feature set.

Demo

AGILE Carousel

AGILE-Carousel

Implement your slideshow with the Agile Carousel JQuery plugin. Highly customizable so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development.

Demo

Rotating Image Slider

Rotating-Image-Slider

This is a tutorial where you will create an asymmetrical image slider with a little twist: when sliding the pictures you 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

Demo

반응형
반응형

15 jQuery Tooltip Plugins for Developers

 

The tooltip or infotip or a hint, is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. When the user hovers their pointer over a particular item, without clicking it, a tooltip will appear or a small “hover box” containing information about the item being hovered over.
The jQuery tooltip is one of the best building blocks one should consider utilizing within their web design and development. Tooltips offer extra functionality and versatility, and can be regarded as one of the most important user-interface components for most websites.

In this article I have gathered 15 best jquery tooltip plugins that will help you to create innovative and creative web design and help you to achieve desired results for your web projects. I hope you will find this list of jquery tooltip plugins handy and useful for your upcoming and current web projects. If you know of some other jquery tooltip plugins please do let me know by commenting in comment section, I would love to hear from you. Enjoy !

1. Tooltipster

Tooltipster
Tooltipster is a jQuery plugin for quickly creating HTML5-validated and flexible tooltips. The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease. Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.

Source

2. Toolbar.js

toolbar-js
Toolbar.js allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customizable using the twitter bootstrap icons and provides flexibility around the toolbars display and number of icons.

Source

3.qTip2

qtip2
qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0′s user friendly, yet feature rich base, qTip2 provides you with tones of features like speech bubble tips and imagemap support, and best of all… it’s completely free under the MIT/GPLv2 licenses.

Source

4. Poshy Tip jQuery Plugin

poshy-tip
Poshy Tip jQuery Plugin is a tooltip plugin that allows easily creating stylish tooltips. With Poshy Tip you can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically.

Source

5. Grumble.js

grumblejs
Grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified.

Source

6. Joyride

joyride-jquery-plugin
Joyride is a plugin for jQuery that simplifies the process of guiding users to discover the features of a website. By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips.

Source

7. ImageMapster

ImageMapster
ImageMapster is a jQuery plugin that vitalizes the old image maps by adding more capabilities to them. Using the plugin, any image map can be highlighted, selected (single or multiple areas) and manipulated in all kinds of ways. Tooltip support makes displaying user-friendly information possible while interacting with the image maps.

Source

8. Tooltipsy

tooltipsy
Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips. It comes with minimum default styles or animations but gives you the complete control over them. It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.

Source

9. jQuery Bubble Popup

jquery bubble popup
jQuery Bubble Popup is a plugin for the popular JS framework that helps creating chic tooltips which can be controlled easily. The tooltips are shown/hidden with fading animations and any HTML content can be displayed inside them. They can be attached to any side of an element and it is possible to get the status of a tooltip (on/off, creation, last-modified or last-display date & time) to act accordingly.

Source

10. Beauty Tips

beauty-tip-demo
BeautyTips is a jQuery plugin which draws tooltips in realtime using the canvas element. Every tooltip, by default is displayed at the side of an element where there is more space. But the position can also be forced. Content can be hard-coded, called from an attribute or with an Ajax request.

Source

11. Simpletip

simpletip
Simpletip is a fresh & lightweight jQuery plugin for creating flexible tooltips. Tooltips can be attached to any element & easily styled in means of presentation & positioning. The tooltips can be static, dynamic or loaded via Ajax. And, any combination of effects can be applied to make them more attractive.

Source

12. Colortip

colortip
It converts the title attributes of elements within your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design. You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in colortip-1.0-jquery.js.

Source

13.TipTip

tiptip
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.

Source

14. (Mb) Tooltip

mb-tooltip
(mb)Tooltip is a beautiful tooltip for your webpage in jQuery. Simply by placing a “title” attribute with your content as value, and then you can replace the ugly default tooltip with this smart and nice one. You can also disable and enable (mb)Tooltip at anytime.

Source

15. Hovercard

hovercard
A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice. A hovercard can be useful when displaying Person bio, Book author and price, loading related information with Ajax and Editing in place. You may also add your own custom data source and display the profile data using existing card format.

Source.

반응형

+ Recent posts