responsive-sprite.js 💥

Description

Responsive-Sprite displays video preview thumbnails on mouse over (hover). It's a diashow.

Demo

Installation

• Download responsive-sprite.js

• Add following code to your HTML:

    <script>
        $( document ).ready(function() {
            var thumbs = new VideoThumbnail();
            thumbs.setThumbnailClassName('this-is-spartaaa');
            thumbs.setThumbnailCountOfSprite(6);
            thumbs.imagePaddingBottomInPercentage(100);
            thumbs.setMouseMoveActive();
            thumbs.displayThumbs();
            
            // example 2: fifty-images
            var thumbsSecondRow = new VideoThumbnail();
            thumbsSecondRow.setThumbnailClassName('fifty-images');
            thumbsSecondRow.setThumbnailCountOfSprite(50);
            thumbsSecondRow.imagePaddingBottomInPercentage(43);
            thumbsSecondRow.setMouseMoveActive();
            thumbsSecondRow.displayThumbs();
        });
    </script>

• Now your HTML should contain these div elements

<div class="this-is-spartaaa" data-defaultimgnr="5" data-img="/assets/super-sprite.jpg"></div>