Just another WordPress.com weblog

Archive for the ‘jQuery’ Category

MooTools fixed menu with animation

In the following example you can get an example of fixed menu with MooTools and jQuery effects.
On scrolling the content the menu shows cool animation.
This script is inspired by MooTools and David Walash
Demo

Advertisements

jQuery DateTime Picker

I found some issue that this calendar doesn’t work on IE so provide you the calendar with time that works on all the browsers.

Download

Amazing jQuery Accordions

You can never underestimate how useful an accordion can be – use them for menus, featured content slideshows, squeezing more content into your sidebar; the list goes on! Making your life easier, I’ve put together a list of eight brilliant jQuery accordions that you could use on your site.

Simple jQuery Accordion Menu

Another accordion that can be used for navigation. There are lots of options (not just navigation), so visit the source to see them all. This navigation example has expandable submenus.

Design Reviver Horizontal Accordion Menu

Another accordion that can be used for navigation. There are lots of options (not just navigation), so visit the source to see them all. This navigation example has expandable submenus.

Urban Grey Accordion Menu

Urban Gray Accordion Menu is a clean, vertical menu with headers that are activated “mouseover” (200 millisec delay). Each header is hyperlinked itself, feasible since the headers are toggled “mouseover” instead of “onclick”. This is an easy to customize, attractive vertical list menu.


Accordion menu using jQuery

This final navigation example has two options – open on mouse-over or click..


This final navigation example has two options – open on mouse-over or click.

HoverAccordion jQuery Plugin

An Apple.com like vertical accordion that opens on hover. Would look good on your sidebar. 🙂

EXT Accordion Widget

This Accordion uses the EXT JavaScript Library. . Whats really cool about this accordion is that you can drag and drop the accordion slides into new positions.

Apple Style Accordion Menu

This menu mimics the look of the vertical menu found on certain areas of Apple.com.

See other examples

jQuery Accordion Plugin

This jQuery Plugin creates an Accordion that allows for nested lists, definition lists, and nested divs. The plugin requires jQuery and the dimensions plugin.

Xbox jQuery Horizontal Accordion

This is another jQuery Plugin but the accordion is horizontal. It is very similar to the XBOX 360 interface. This plugin requires you use the interface plugin

Simple javascript Accordian

The Simple JavaScript accordion script is my favorite :D. It is very small script at about 1kb and it requires no frameworks. It works in all browsers and it is very easy to integrate.

Phatfusion Image Accordian/Menu

horizontal menu, reveals more of the image as you rollover it.

Demo

Toggle Elements in Accordian

horizontal menu, reveals more of the image as you rollover it.

toggleElements

Kwicks Accordian

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget. Please check out the examples to See It in action .

Kwicks

The Lightbox Clones Matrix

The Lightbox Clones Matrix

Comparison of various scripts that display images and other objects in somehow cool CSS popups.

lightbox-clones-jquery-image-slideshow-tools-free

If You know some more resources I missed here, feel free to add in comments and if You enjoy this article, let others know about it!

Best Jquery Slide Show Gallery

JonDesign’s SmoothGallery

Using MooTools v1.11, this JavaScript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website. Together there are 7 different gallery demos, You can download and test for free.

jondesign-1

Featured Content Slider

Tutorial, how to create a slick auto-playing featured content slider.

featured-content

NoobSlide

8 different examples how to view Your images using MooTools, unfortunately there isn’t any documentation, but very easy to use gallery.Awesome collection

noobslide

PrettyPhoto

jQuery Lightbox clone, pretty similar to original Lightbox with few another features and full documentation.

prettyphoto

Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3.

colorbox-gallery-jquery-image-slideshow-tools-free

Easy Slider jQuery Plugin

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with CSS alone. So, basically you link to plugin file, set the content up and style it with CSS.

easy-slider-jquery

DevKick Galleria

Galleria 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.

devkick-galleria

GalleryView

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

jQuery Cycle

The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a “slide”. Options control how and when the slides are transitioned.

Image Flow

Image flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

Supersized

What exactly does Supersized do?
* Resizes images to fill browser while maintaining image dimension ratio
* Cycles Images/backgrounds via slideshow with transitions and preloading
* Navigation controls allow for pause/play and forward/back

Image Gallery

This is my first jQuery plugin and to be honest I am quite proud of it. It’s nothing complicated – a simple image gallery/viewer. When calling the plugin you specify which images you want to use like this:
$(‘div.some-images img’).gallery();
The script would take all images within “div.some-images” (or whatever you specified) and put them within the gallery.

Pikachoose

Images add life to a website. But plain simple images are now outdated. Splashy, layouts for images are the current hot trends in webdesigns. So here, I am going to provide the 30 best jQuery Photo Plugins that will help you to add an artistic and professional image galleries and slideshows to your website.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way. It is very easy to use full-screen website, image gallery, which doesn’t conflict with pop-up blockers and it’s only 22 kb size!

orangoo-labs

TripTracker

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

triptracker

SpaceGallery

Space Gallery is another fancy jQuery photo gallery plugin. click on the image will make it fade away and the next image will move forward. Bring out the beauty offading transitions with SpaceGallery jQuery Plugin.

Galleriffic

A jQuery plugin for rendering fast-performing photo galleries. Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos.

galleriffic

Slideshow 2

Slideshow 2! is a JavaScript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

slideshow

JavaScript TinySlideshow

This dynamic JavaScript slideshow is a lightweight (5kb) and free image gallery / slideshow script.

You can easily set it to auto-display the images, set the scroll speed, thumbnail opacity or to disable thumbnail slider.

javascrip-tinyslideshow

S3Slider jQuery plugin

JQuery Slideshow with three different features and displaying sides, fully customizable sizes, delay speed and with good documentation.

s3slider-jquery

Suckerfish HoverLightbox Redux

Handy JavaScript, CSS based image gallery with another version of Lightbox included.

suckerfish

Barack Slideshow 0.2

An elegant, lightweight slideshow JavaScript script.

barackslideshow

Moo SlideBox

The mooSlideBox v3 is a small and slim Ajax based extension or replacement of the common “Lightbox” that can be found on nearly every page. This Lightbox clone works in IE 6/7, Opera and Firefox. It is based on the MooTools framework version 1.11.

mooslide

3D Curve Wall

Unique Flash based 3D curve wall similar to Flashloaded version and you can also see other examples, but this one is free.

3dcurve-wall

DF Gallery

As stated on many other articles on DezinerFolio site, dfGallery is one of the coolest flash galleries currently on the Web.

dfgallery

Full screen image gallery using jQuery and Flickr

It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It also supports a flickr search engine, thumbnails, captions, preloader and some other goodies.

fs-gallery-jquery-image-slideshow-tools-free

Create an Image Rotator with Description (CSS/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.

rotator-gallery-jquery-image-slideshow-tools-free

jQuery Image Overlay Plugin
The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover, as you can see above.
overlay-jquery-image-slideshow-tools-free

Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

beautiful-gallery-jquery-image-slideshow-tools-free

Other

DynamicDrive

And finally if You still haven’t got enough galleries or one for Your taste You can check this huge collection of many different image galleries from DynamicDrive.com

dynamic-drive

If You know some more resources I missed here, feel free to add in comments and if You enjoy this article, let others know about it! Thankyou for your comments and suggestions.

Nice Jquery Tabs

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definetely will like it.

5

jQuery Sliding Tab Menu

Learn how to create a sliding tab menu for your sidebar by using jQuery and jQuery.scrollTo. With this simple tutorial, you’ll able to create a slick and attractive sidebar. It’s so simple and fully customizable.

jquery_sliding_tab

Simple jQuery tab with next previous

Easy and simple to integrate this tab with next previous. It’s so simple and fully customizable.

jquery_ui_tabs

Organic Tabs

The purpose of this demo is to show a tabbed area where the content in tabbed panels are of different heights. When we switch between tabs, the content below is gently moved up or down to accomodate.

Animated Tabbed Content with jQuery

In this tutorial you can see sone web development techniques that can be used in your next projects. This will cover some CSS, HTML and jQuery tricks.

tabbedpost

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

Better Blogroll

Nice tutorial to create blogroll with the tab effect by Chris Coyier

better_blogroll

Sexy Animated Tabs Using MooTools

One modern, attractive way of placing a lot of content into a little space is by using a tab system. This tutorial will show you how to create a sexy, animated tab system complete with CSS sprites, cookies, and animated tab swapping.

MooTools Tabs

Simple jQuery Tabs Tutorial

In this demo we’ll be creating a simple tabbed interface using html and css and utilising the power of JQuery to control the appearance of the content. The mechanics of this tutorial are to have a tabbed interface that when a link is clicked displays the corresponding information in the content area below. The interface will degrade gracefully if the user has javascript disabled.

Tag Cloud