🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

PreViewTube.js

A small jQuery plugin for animating YouTube thumbnails.

##Demo previewtube.vool.ie

##Download

You can install PreViewTube using Bower:

$ bower install previewtube

Or if you prefer just grab a copy of the script

Usage

  1. Include jQuery:

<script src="path/to/jquery.min.js"></script>
``` 
  1. Include plugin's code:

    <script src="path/to/previewtube.js"></script>
  2. Call the PreViewTube plugin:

    <script>   $(document).ready(function(){      				$('.preViewTube').PreViewTube(); 				 				// or  				$('.preViewTube-constant').PreViewTube({ 					'interval' : 500, 					'mode' : 'constant' 				});    }); </script>
  3. Add some YouTube thumbnails:

    <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/2.jpg" alt="" title="" width="150" class="preViewTube"/>'

Options

The plugin has two options mode and interval both are optional.

####Interval The animation rate in ms
Default: 500ms

####Mode How the animation should run constant or hover
Default : hover

##A note on thumbnail size YouTube creates 4 thumbnails, 3 of these are sized 120px x 90px (1.jpg, 2.jpg & 3.jpg) and 1 sized 480px × 360px (0.jpg), because of this size difference it is important that the size is set on the img tag.

Although it may be best to make this width="120" you can get away with make this a bit bigger, I found width="150" look ok.

ToDo

Could be improved, might get around to it someday, sharing it is a start eh !


You May Also Like