agen betting online

Wednesday, July 27, 2011

FRoll is a jQuery plugin

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

0 komentar:

Post a Comment

 
Copyright © 2011. java web desings . All Rights Reserved