Category Archives: jQuery
The naviDropDown plugin allows you to create a simple drop down menu, utilizing hoverIntent, and jQuery’s own slideUp and slideDown effects. You can also set the orientation of the drop down to either horizontal (default) or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin.
naviDropDown 1.0 PluginView the Demo
This plugin will take any standard nested list and turns it into an iPod-style drill down menu. Drill down menus typically offer an excellent method for managing and organizing large and complicated menus into a small, compact and fixed-sized area. Features of this plugin include: Saved state using cookies, add count of total number of child links to each menu option and offers 2 different methods to navigate (breadcrumb style or back button to return to previous option).
Drill Down Menu PluginView the Demo
This plugin creates vertical mega-menus from standard HTML nested lists, allowing users to view all available menu options for each top-level menu item. There are several plugin options available for customizing the mega menu, you can: Choose the animation effect of the flyout menu, set the animation speed, set the number of sub-menus per row, display the flyout mega-menu on the left or right depending on the menu position and more.
Vertical Mega Menu PluginView the Demo
This jQuery Mega Drop Down Menu plugin takes any standard HTML nested list and turns it into a horizontal mega menu. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation for any website.
Mega Drop Down Menu PluginView the Demo
In this tutorial you will be shown how to create a Google-style dropdown menu. If you check the Google source code you will see far too many divs, uls, lis, and span elements, the idea with this tutorial is to do the same but without those extra elements.
Dropdown Google Style MenuView the Demo
In this tutorial you’ll be building a cool navigation list complete with a sliding hover effect. Initially learning how to build the concept in Photoshop and then laying out the basic HTML elements, styling everything with CSS and then bringing it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.
Cool Animated MenuView the Demo
In this tutorial you’ll be shown how to create a simple, usable and functional horizontal menu with HTML and CSS. You will also use jQuery to add some drop-down animation to the menu.
Horizontal Dropdown MenuView the Demo
With this plugin you can make your navigation a little bit more flashy. It makes use of easing and hoverIntent and you can customize the rollover colors, easing method and duration.
Flashy Navigation with easing and hoverIntentView the Demo
From creating the PHP file to customizing the CSS, this tutorial will guide you through the steps to build a fancy floating bar similar to the Meebo and Wibiya bars.
Floating Social Bar with jQuery and CSSView the DemoView the Demo 2
In this advanced and unique tutorial you will learn how to create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when clicked.
Expanding Image MenuView the Demo
With this tutorial you will create a slick animated content menu with jQuery. The menu items will be animated and when clicked, a content area with further information will appear and the background image will also change according to which menu item was clicked.
Animated Content MenuView the Demo
You will create a slick overlay effect with jQuery that does not use an overlay with this tut. The idea is to change the opacity or the color of certain elements in order to make it look like as if you are covering the content with an overlay.
Overlay-like EffectView the Demo
我應該有說過不下上百次我有多愛jQuery了吧 因為它呈現出來的效果實在太討喜了 會有一種普通家庭主婦變貴婦的感覺 整個就是升級嘛!!好啦好啦 說再多都一樣 就是愛!!一起來看一下今天的介紹吧 (有些之前也有貼過 那就複習一下好了)
jQuery and CSS Slider
Circular Image Galleries With jQuery
Tiny Circle Slider
Awesome Scrolling Navigation using jQuery
jQuery Image Gallery with Play Pause Rotation
jQuery Flipped Image Gallery
jQuery Image Gallery Plugin
Lightweight Thumbnails Gallery
Carousel Plugin For WordPress
Mootools Slider With Two Knobs
jQuery and CSS Mobile App Website Effect
jQuery Slideshow With Mask Transition
jQuery Infinite Carousel
Rotating Image Slideshow w/ CSS3 and jQuery
Sideways: jQuery Fullscreen Image Gallery
Simple jQuery Slider
source / demo
Moving Boxes jQuery Slider
jDigiClock jQuery plugin
source / demo
Orbit: Countdown Image Slider Plugin
Modern Gallery Using Raphael Library and jQuery
source / demo
jQuery Before After Photo Effect
source / demo
source / demo
source / demo
3D Wall Gallery
This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin.
The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizible space of a div for example. It is aimed to the people who don’t want a default scrollbar. Whell scroll management is also included in this but is not activated.
A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.
These scrollbars are fully themable allowing their behaviour to be determined as well as their look. This script uses the ‘jquery.corner’ plugin for the lovely cross-browser rounded corners and ‘jquery.drag’ for more reliable drag event registering.
Scrollbar Paper does not replace browser’s default scrollbar.
Instead, it covers it with a custom scrollbar, like paper on a wall: that is why it is called Scrollbar Paper.
The benefit of this approach is that the way browser’s default scrollbar behaves is not modified: mouse wheel support, text selection and scrolling performance are the same as usual.
This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb. Here the rangeinput is used to control scrolling of a DIV. A little more coding and you can present your products like Apple does.
Jesse Baird has developed this custom scrollbar as a jQuery UI widget after seeing the scroll bar in Google Wave, which added functionality and style making much better than the browser default scroll bar..CSS3 background gradients to do all of the fancy background stuff so if you plan to support Internet Explorer and care about eye candy, plan on creating your own background images.
A jQuery plugin which renders a custom, CSS styleable vertical scrollbar.
The code assumes a single div with fixed height (#scroll-pane in my example) which contains an absolutely positioned div (#scroll-content) which contains the content for scrolling.
jQuery我超愛的 在網頁設計上加個jQuery的功能 整個網站就升級了啊! 現在的網頁時不時就會來個小動畫或是特效 尤其在需要很多照片展示的網站 jQuery就是必要的功能啊! 趕快來看看有哪些很酷的jQuery吧!!
“A new kick-ass jQuery and CSS3 gallery with animated shine effects.” This effect will make user interface elements look like they’re a polaroid photo (or made of glass). The best part is that it’s not that difficult to achieve.
Nivo Slider is an awesome and lightweight jQuery plug-in for creating attractive image sliders. It simply converts a wrapper for images into a slider, and it offers nine unique transition effects.
The goal of this project was to recreate MLB.com’s switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.
This jQuery plug-in creates a scrollable interface with which to scroll over a large image in a small area.
The idea here is to show photo albums with a slider, and when an album is chosen, its images are displayed as a beautiful photo stack. In this stack view, you can browse through images by tucking the one on top under the stack with a slick animation.
This simple and beautiful slideshow gallery can be easily integrated in your website. The slideshow is in a container, with options to view a thumbnail grid, pause the slideshow and navigate through the pictures. The grid slides out from above and allow the user to navigate the thumbnails.
This coin-slider jQuery image plug-in has several transition effects.
jqFancyTransitions is an easy-to-use jQuery plug-in for displaying photos as a slideshow with fancy transition effects.
Nivo Zoom is a free jQuery image zoomer intended as a replacement for a lightbox.
A highly customizable gallery and showcase plug-in for jQuery.
When working with images online, keeping the aspect ratio intact is as important as anything. That is what’s so nice about this jQuery plug-in: you don’t have to worry about sizing all of your images perfectly. It auto-scales your images for you, making implementation super-simple.
Essentially, Sudo Slider is a slider plug-in that allows you to do whatever you want, with whatever HTML you want. It’s both a content and image slider
GalleryView is a content gallery plug-in capable of displaying any HTML content in an animated gallery view. Visit the project’s home page for documentation and demonstrations.
MopSlider is a slider box that can contain any item with a set height and width. With version 2.5, MopSlider can be added to a page however many times you want. An auto-move function is included.
Making use of jQuery’s excellent animation features, this image scroller is completely autonomous and begins scrolling once the page loads. The finished widget is completely cross-browser compatible and performs as expected in the latest versions of the most common browsers.
This is the product of the Wilq32.PhotoEffect snippet. You can use this tiny script to rotate images (at any angle) directly on the client side (e.g. with user-generated content) and animate them using your own functions.
YoxView is a free lightbox-type media and image viewing jQuery plug-in. It’s easy to use and feature-rich.
This plug-in resizes images to fill the browser while maintaining their dimensions. You can cycles images and backgrounds in a slideshow with transitions and preloading. And navigation controls allow for “Pause/Play” and “Forward/Back.”
With this, you get a line of cropped thumbnails on a string. Clicking the “More Info” button expands a photograph to full size and reveals additional information. Photos are loaded on page load, so there is no waiting after clicks.
This is an alternative to the jQuery Coda Slider plug-in. With this, a slide can be any kind of HTML content whatsoever, even a full-size image with overlay. Each slide has a unique thumbnail that, when clicked, takes you to the corresponding slide, with an arrow above indicating the active panel. And it auto-plays!
Horinaja is a ready-to-use slideshow that can be used with either Scriptaculous/Prototype or jQuery. It allows you to use the mouse wheel for navigation; when the mouse is outside of the slideshow area, it scrolls; when hovering over the slideshow, scrolling pauses.
SlideDeck is a powerful plug-in that lets you organize any type of content into a beautiful and user-friendly slider.
A jQuery plug-in for rendering rich fast photo galleries.
GalleryView decides the best way to animate your filmstrip. When the gallery is wider than the filmstrip, the filmstrip remains stationary and the pointer slides from frame to frame. When the filmstrip is too long for the gallery, the pointer remains still and the filmstrip animates beneath it.
A gallery that “morphs” images between transitions.
Designed and implemented with usability in mind, this accordion can come in very useful when organizing a good chunk of content.
Want to display images as an automatic slideshow that can be played or paused by the user? Simple Controls Gallery displays an image by fading it into view over the previous one. Navigation controls pop up when the mouse rolls over the gallery.
jQuery.popeye is an advanced image gallery script built on jQuery. Use it to save space when displaying a collection of images, and offer users an elegant way to show big versions of images without disrupting the page flow.
SlideViewerPro is a fully customizable jQuery image gallery engine that allows you to create outstanding sliding galleries or interactive galleries in blog posts.
This small plug-in for jQuery will display any image on the page that has the class
panorama as an interactive panorama.
The aim here was to build a bottom photo bar that one could easily integrate into a website. It is hidden initially and slides up when the handle is clicked. The photo sets are first shown and when one of them is chosen; all of the set’s images can be viewed as thumbnails; when a thumbnail is clicked, the full view appears as an overlay.
Step Carousel Viewer displays images and even rich HTML by side-scrolling them left and right. Users can jump to any panel on demand or browse the gallery by scrolling through any number of panels at a time. A smooth sliding animation is used to transition between items. And don’t worry, you can tame this script to do exactly want you want: two public methods, two custom event handlers, and three “status” variables are available for this purpose.
An attractive and beautiful image slideshow plug-in, with a classic transition effect.
A nice way to allow users to view bigger versions of images with some context.
With this utility, photos can be dragged and dropped, stacked and deleted, with each action resembling a real-world action.
A simple mobile image gallery, using the amazing jQTouch jQuery plug-in for mobile Web development. jQTouch has native animations, automatic navigation and themes for mobile Webkit browsers like those on the iPhone, iPod Touch, G1 and Pre.