Giter VIP home page Giter VIP logo

previewtube.js's Introduction

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 !

previewtube.js's People

Contributors

vool avatar

Watchers

Yashi Lanka avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.