imgplay/index.html at master · nterms/imgplay · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>imgplay</title>

        <!-- Add CSS inside header -->
        <link href="imgplay/jquery.imgplay.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>
        <h1>imgplay</h1>
        <!-- container of the image player -->
        <div id="imageplayer" class="imageplayer">
            <img src="http://lorempixel.com/640/480/sports/1" />
            <img src="http://lorempixel.com/640/480/sports/2" />
            <img src="http://lorempixel.com/640/480/sports/3" />
            <img src="http://lorempixel.com/640/480/sports/4" />
            <img src="http://lorempixel.com/640/480/sports/5" />
            <img data-src="http://lorempixel.com/640/480/sports/6" />
            <img data-src="http://lorempixel.com/640/480/sports/7" />
            <img data-src="http://lorempixel.com/640/480/sports/8" />
            <img data-src="http://lorempixel.com/640/480/sports/9" />
            <img data-src="http://lorempixel.com/640/480/sports/10" />
        </div>

        <!-- Add JavaScript at bottom -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
        <script type="text/javascript" src="imgplay/jquery.imgplay.js"></script>
        <script type="text/javascript">
            (function($) {
                $(document).ready(function() {
                    $('#imageplayer').imgplay({rate: 2}); // start imgplay
                });
            })(jQuery);
        </script>
    </body>
</html>