jQuery FRoll

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. 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. No need of extra CSS or complex controls, just call the method over the image and you are ready.

by jrdiaz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>frollTest</title>
    <meta name="description" content="jQuery FRoll plugin" />
    <meta name="author" content="jrdiazweb" />
</head>

<body>
    <div>
        <h1>froll Test</h1>
        <img id="demo" src="http://img.youtube.com/vi/vtIjA2d6ct4/0.jpg" width="130"/>
        <br/>
        <a href="http://www.youtube.com/watch?v=vtIjA2d6ct4">Original video</a>
    </div>

    <script>
    $(document).ready(function() {
         $('#demo').froll();
    });
    </script>

</body>
</html>

CSS

.froll-frame:hover {
    cursor: pointer; cursor: hand;
}

JavaScript

/**
 * jquery.froll-0.1.js - Fancy Image Roll
 * ==========================================================
 * (C) 2011 José Ramón Díaz - [email protected]
 *
 * http://3nibbles.blogspot.com/2011/07/plugin-jquery-sliding-buttons.html
 * http://plugins.jquery.com/project/froll
 *
 * 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.
 *
 * 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. No need of extra 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 <a> 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
 *                ...