Category: jQuery

You are here: Home » jQuery

Image Cropping Jquery Plugin – imgAreaSelect

/ 0 Comments / Category: jQuery/

imgAreaSelect - a jQuery plugin that allows web developers to easily implement image cropping functionality.

imgAreaSelect is a highly configurable and customizable jQuery plugin. It’s a lightweight plugin (8Kb packed), handles scaled images, supports callback functions and provides API functions for easier integration with other application components.

View Examples

jQuery image crop plugin - imgAreaSelect

Options like minWidth, minHeight allow you to place limits on the size of the selection area, aspectRatio option to make the selection area keep exact proportions, and you can also easily set initial selection area by the x1, y1, x2, and y2 options.

HTML5 Slideshow with Canvas & jQuery

/ 0 Comments / Category: jQuery/Tags: ,

HTML5 Slideshow – a progressively enhanced HTML5 slideshow with a fancy transitional effect and the new canvas element & jQuery, which is perfectly functional in older browsers as well.

The canvas element opens a whole new way of building rich internet applications, it allows us to create and modify graphics, we can also use it like any other element on the page like apply jQuery animations on it or listen for events.

View DEMO

HTML5 slideshow with canvas and jQuery

Google Maps jQuery Plugin – bMap

/ 0 Comments / Category: jQuery/

bMap - jQuery plugin that allows you to easily add Google maps to your website.

With the newest version 1.3 of bMap you don’t need an API key to have a map on your site, and you can make mobile applications even easier.

The plugin can manage a sidebar for you, one with a list of markers, one with a list of layers. The sidebars can be styled with CSS.

View EXAMPLES

google maps jquery plugin

Panel Gallery 2.0 – jQuery Plugin

/ 1 Comment / Category: jQuery/Tags:

Panel Gallery 2.0 - a simple way to take a group of images and transition from one to the other in a smooth, visually appealing way.

Version 2.0 comes with a huge amount of new effects to apply, and with multiple ways to apply them.

You can apply specific effects on any image, create an array of effects, of let the plugin pick effects for you. This, combined with the plugin’s options gives you an unlimited amount of combinations to use.

Panel Gallery 2.0

Version 2.0 has the following transition effects:

  • Fade – a simple total image fade
  • Box (5 variations) – transitions by dividing up an image into small squares. Transitions can be random, or wipe diagonally from top left to bottom right, top right to bottom left, …
  • Panel (44 variations) – some effects are, zipper, teeth, reveal, north/south, east/west.
  • Overlay (8 variations) – original Panel Gallery effects, with the ability to add a blinds effect for any overlay option.
  • Jackpot – divides an image up into three pieces and transitions them like slot machine wheels.

jQuery Plugin for Radical Web Typography – Lettering.js

/ 0 Comments / Category: jQuery/Tags:

Lettering.js - a really simple, lightweight, easy to use jQuery plugin for radical Web Typography.

Lettering.js comes as a great solution for custom type headings, while keeping the text selectable. You can easily style individual letters, wrap and style words and lines with Lettering.js.

Project is hosted on Github

lettering.js - jquery plugin for web typography

jQuery Fullscreen Image Gallery – SIDEWAYS

/ 1 Comment / Category: jQuery/Tags:

SIDEWAYS – a smooth and impressive jQuery fullscreen image gallery.

After selecting the image via thumbnails, sideways gallery automatically slide into the browser full screen view, hovering the prev button reveal image thumbnails again.

It utilizes the jQuery User Interface, jQuery Easing and jQuery mousewheel plugin. Images can be in fullscreen mode or to fit browser window.

View DEMO.

jQuery fullscreen image gallery

jQuery Image Slider Plugin – Orbit

/ 0 Comments / Category: jQuery/Tags:

Orbit - a lightweight (2.8kb) jQuery Image Slider plugin with a clean markup and several easy to set-up options.

CSS is kept to a minimum so you can style it any way you like. Images can be browsed using play-pause button or with the prev-next buttons which appear on hover.

Orbit support image captions, images can be faded, horizontally or vertically slided, all the timings between transitions can be easily set, and much more.

jQuery image slider plugin - Orbit

Orbit slider will dynamically determine the height and width of your set of images and scale accordingly, but you need to make sure all your images are the same size or the larger images will peek out on the sides.

Unobtrusive & Highly Customizable Lightbox Clone – TopUp

/ 0 Comments / Category: jQuery/Tags:

TopUp Lightbox – Unobtrusive & highly customizable jQuery/jQuery UI driven pop-ups with fancy layouts, animations and transitions.

With TopUp you can display images (image galleries), flash content from sites like Youtube, SWF files and FLV video, QuickTime movies, Windows Media and Realplayer, iframes, DOM elements and raw HTML.

Advanced lightbox clone - TopUp pop-ups

With a current release 1.7.2 it is possible to specify which jQuery libraries to auto-include or not to auto-include at all, enable fast mode and override the assets (host, images_path and players_path) variables.

A few features:

  • TopUp is absolutely free, also for commercial use
  • A very easy setup process: only one include
  • Using TopUp presets keeps your HTML code 100% clean
  • TopUp can be used along with Prototype
  • Usage of CSS sprites to reduce the amount of image requests
  • Cross-browser compatibility
  • It’s open source
  • and many more…

Animated Image Border Effect with jQuery Plugin

/ 0 Comments / Category: jQuery/Tags:

Inset Border Effect - jQuery plugin that puts a border around the images, when the image is hovered, the border animates to the sides, revealing the whole image.

In plugin options you can easily set animation speed, border color, border type e.g. solid, dashed and more.

View DEMO

Image border effect - jQuery plugin

Easy to use, just:

$("img").insetBorder();

All Plugin options:

$("img").insetBorder({
  speed          : 1000,           // 1000 = 1 second, default 250
  borderColor    : "orangered",    // Default white (#ffffff)
  inset          : 10,             // Border width, default 10px
  borderType     : "solid",        // Border type, e.g. dashed
  outerClass     : "ibe_outer",    // Class name of outer wrap
  innerClass     : "ibe_inner"     // Class name of inner border
});

Simple Image Zoom with jQuery

/ 1 Comment / Category: jQuery/

Zoomer – a simple and nice jQuery image zoom class (1.4kb gzipped) that shows zoomed image inside original. In case you don’t need any ‘fancy’ zooming, this script comes very useful.

It’s easy to implement – html: <img id=”girl” src=”girl-thumb.jpg” alt=” ” />
and javascript:

new Zoomer('girl', {
    big: 'girl.jpg',
    smooth: 10
});

View DEMO

jQuery simple zoom class

Community News

View All

Add Community News







© Copyright 2007-2013 - Visual-Blast Magazine