FRoll is a jQuery plugin

FRoll is a jQuery plugin to simplify the task of providing a simple and efficient way to expand the image information of a picture using a sequence of images. It uses image preloading for smoother user experience.
The direct use of this plugin is to provide a preview of a youtube video using the Google API. In that case it presents a sucession of three different moments of the video in a smooth sucession when mouse enters into the image.
Everything is self-contained in the plugin. No need of extra HTML, CSS or complex controls, just call the method over the image and you are ready.
INSTANTIATION
Just call the ".froll()" method over the images selector.
$('.videoCaptionImg').froll( [ options_object ] );
OPTIONS

• transform - $.froll.youtube - Array that defines [0] as the regex to apply to src and [1] as the resulting string with {number} placeholder for the animation images.
• frames - [1, 2, 3] - Array with the {number} of each frame of the animation
• width - null - Width of the animation frames. Null = automatic
• height - null - Height of the animation frames. Null = automatic
• speed - 750 - Fade animation speed
• time - 1500 - Time between frames
• click - function(taget) - Click callback function. Defaults to trigger click event over the container of the img.

PUBLIC API
$.froll.stop() - Stops current animation and hides the preview.
HELPER CONSTANTS

• $.froll.youtube - Transform array that converts origin src stored in youtube (http://img.youtube.com/vi//0.jpg) into youtube previews.
• $.froll.youtubeLocal - Transform array that converts local stored captions with name the id of the video, into youtube previews.
• $.froll.local - Transform array that converts local stored captions into local stored previews with the same name but ended with "_" in the same directory than caption.

CSS CLASSES

• Container - #froll-overlay
• Frames - froll-frame

COMPATIBILITY
Since jQuery does the hard work with animations, it must work in all browsers including IE6. Of course browsers with limited mouse support (like touch ones - iPhone, Android) will get little benefit of mouseover, but this "problem" can be easily overcome with the touch events calling mouseover.
demo : here
download : FRoll is a jQuery plugin

Posted on 5:33 AM / 0 komentar / Read More

MapIt jquery map plugin

MapIt jquery map plugin,MapIt is a jQuery enabled plug-in that interacts with Google Maps API . The plug-in is designed to make navigating and finding key coordinates anywhere in the world a simple process. Completely driven by XML over AJAX , this plug-in helps you group and organize all your location links.
The easy and simple to edit XML configuration file allows you to create groupings of your coordinates and display them in a hierarchical format. Clicking on the link coordinate will automatically find the point of interest on the Google Map. This plug-in is great for organizing and simplifying your maps. No need to learn the Google API , we have abstracted all the hard work for you.
With very little CSS stylesheet knowledge you can easily edit the MapIt plug-in to your desired layout. We have even included a style locator tool to help you see how MapIt is configured. With plenty of examples included you can hit the ground running very quickly and have a map that is customized for whatever situation you might need. This is not just any map but one that is clean, sleek, powerful and very easy for you and all your customers/clients to use.
demo : demonstration
license : MapIt jquery map plugin

Posted on 5:13 AM / 0 komentar / Read More

context menu

context menu

Features

• trigger contextMenu with right-click, left-click, hover or own custom trigger events
• delegated event handling removing the need for re-initialization when trigger objects are added / removed
• optional icons for commands
• input elements (text, textarea, checkbox, radio, select) within the menu
• custom html elements (command free)
• show/hide callbacks to update the state of commands
• small memory footprint even with hundreds of trigger objects
• adjust position of menu to fit in viewport
• enable / disable commands
• nested sub-menus
• full keyboard interaction
• HTML5 <menu> support
• CSS is for styling, javascript is not…

Usage

$.contextMenu({ // define which elements trigger this menu selector: ".with-cool-menu", // define the elements of the menu items: { foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }}, bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }} } // there's more, have a look at the demos and docs… });

demo : here
easy to use context menu

Posted on 6:08 AM / 0 komentar / Read More

Blueberry image slider

Blueberry image slider is an experimental open source jQuery image slider plugin which was been written specifically to work with fluid/responsive web layouts.

How to use Blueberry

• By default the slider will assume the width of it's parent element, this can be tweaked with CSS min/max-width.
• All images should be of equal dimensions. The slider will assume the height & width of the first image.
• The blueberry function must be called inside $(window).load() to avoid a bug in webkit browsers (see markup below).
• Don't forget to include the blueberry.css style sheet. This sets the base styles that are required for the slider to work.
• You can add the .crop class too the ul.slides element to crop the images rather than resizing them, try it!
• When themeing avoid applying any padding or margin to the ul.slides element. The safest option is to wrap it in another <div> and style that instead.

Markup

jquery:

$(window).load(function() {
 $('.blueberry').blueberry();
});

html:

<div class="blueberry">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
  <ul class="pager">
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
  </ul>
</div>

very simple this plugins Blueberry image slider

Posted on 7:15 AM / 0 komentar / Read More

modal dialog box

modal dialog box is designed as a basic notification dialog box.
It is very customizable and can easily be modified.
Includes 4 basic types out of the box, but allows for easy additions
sample : Examples
download : Download modal dialog box

Posted on 6:57 AM / 0 komentar / Read More

ImageSelect jQuery plugin

ImageSelect jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

Installation

You must have a <select> containing one or more <option>s. Each option must contain the URL to the image you want to display, as the option text. The option value can be whatever you like.

<select name="logo"> <option  value="1">/images/whatever.jpg</option>
<option  value="2">/images/something.png</option> <option
value="3">/images/misc.gif</option> </select>

Then you just need to include the javascript, stylesheet and images, and modify the css to make sure the image path(s) are correct for you.

<script src="/imageselect/imageselect.js" type="text/javascript"></script>
<link href="/imageselect/imageselect.css" media="screen" rel="stylesheet" type="text/css" />

And finally, you just need to call .ImageSelect on the jQuery wrapped select element:
$('select[name=logo]').ImageSelect();
See below for more detailed integrations.

Usage

You must call ImageSelect on a jQuery wrapped <select> element:
$('select[name=logo]').ImageSelect();
You can pass in options as an object:
$('select[name=logo]').ImageSelect({width:100});
Or specify the method you want:
$('select[name=logo]').ImageSelect('remove');
Or both:
$('select[name=logo]').ImageSelect('init',{width:100,height:50});

Arguments

• method - The method to call. If omitted, the 'init' method will be called by default
• options - This is an object containing various options (see below).

Methods

• init - Initialises the plugin using the selected element(s).
• open - Shows the dropdown portion of the element (or hides via animation if already shown, works more like toggle() really).
• close - Hides the dropdown portion of the element (no animation).
• remove - Removes the control and reverts to the original select input.
• update - Updates the displayed image selection. You must supply the url in an object, e.g. $('select[name=logo]').update({url:'/images/logo.jpg'}).

Options

• width - The width of the select. Default is 200.
• height - The height of the select (with the dropdown hidden). Default is 75.
• dropdownWidth - The width of the dropdown list part of the select. Default is 350.
• dropdownHeight - The height of the dropdown list part of the select (overflow will scroll). Default is 250.
• z - The z-index to use for the dropdown. Default is 99999.
• backgroundColor - The background colour of the control. Default is '#ffffff'.
• borderColor - Border colour of the control (including dropdown). Default is '#cccccc'.
• lock - Which dimension to lock, width or height. Default is 'height'.
• download : Current version (1.1.0)
• demo : here
• nice ImageSelect jQuery plugin

Posted on 6:54 AM / 0 komentar / Read More