thumbLoop 1.0

Create nice video previews

Mouseover effect for video/tube websites, show the entire preview of your video looping through thumbnails

Buy now at 20script

Demo 1

Speed at 250, 8 thumbs

Demo 2

Speed at 120, 10 thumbs

Demo 3

basic markup with span thumbanails

Options

  • speed: the total speed of the loop
  • fade: the speed of the fade effect for each thumbnail
  • loopthrough: the thumbnail tag, default 'img'
  • Code example

    basic, standard

    $('#thumb').thumbLoop();

    with options

    $('#thumb').thumbLoop({
        speed: 250,
        fade: 100,
        loopthrough: 'img'
    });

    You can have multiple instance of thumbLoop each with different options

    Requirements

    jQuery 1.7.1+

    Installation

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="thumbLoop.js"></script>
    <link rel="stylesheet" type="text/css" href="thumbLoop.css" />

    Cross browser

    thumbLoop uses css3 opacity feature and works with these browsers:


    All video thumbnails are copyright of Jeffrey Beach and are free to use.
    http://www.20script.ir