jquery.cover.js/example.html at master · qrator/jquery.cover.js · 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cover</title>
    <style type="text/css" media="all">
      /*
      base03:    #002b36;
      base02:    #073642;
      base01:    #586e75;
      base00:    #657b83;
      base0:     #839496;
      base1:     #93a1a1;
      base2:     #eee8d5;
      base3:     #fdf6e3;
      yellow:    #b58900;
      orange:    #cb4b16;
      red:       #dc322f;
      magenta:   #d33682;
      violet:    #6c71c4;
      blue:      #268bd2;
      cyan:      #2aa198;
      green:     #859900;
      */
      img { border: 0px; }
      html, body {
        background-color: #eee8d5;
        color: #586e75;
        margin: 0px; padding: 0px;
        font-family: verdana, sans-serif;
        font-size: 13px; line-height: 16px;
      }
      ::selection, ::-moz-selection {
        background-color: #eee8d5;
      }
      #trunk {
        width: 560px;
        margin: 0px auto;
        padding: 10px;
        background-color: #fdf6e3;
      }
      h1, h2 {
        margin: 20px 10px;
      }
      p {
        margin: 20px 10px 20px 120px;
      }
      pre {
        margin: 20px 10px 20px 120px;
        padding: 10px;
        background-color: #002b36;
        color: #93a1a1;
        font-family: monaco, monospace;
        font-size: 13px; line-height: 16px;
        border-radius: 3px;
      }
      pre::selection, pre::-moz-selection {
        background-color: #073642;
      }
      .demo-bloc {
        padding: 5px;
        overflow: hidden;
      }
      .demo-bloc img {
        width: 100px;
        margin: 5px;
        float: left;
        display: block;
      }
      table { padding: 5px; font-size: 11px; }
      th { text-align: left; }
      td {
        padding: 5px;
        vertical-align: top;
        width: 100px;
      }
      th.large-field { width: 320px; }
    </style>
  </head>
  <body>
    <div id="trunk">
      <h1>COVER.js</h1>
      <h2>Demo</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class='demo-bloc'>
        <img src='http://www.freeimageslive.com/galleries/space/nebula/hst_carina_ngc3372_0006_small.jpg' data-cover="http://www.freeimageslive.com/galleries/space/nebula/pics/hst_carina_ngc3372_0006.jpg" alt="picture" />
        <img src='http://www.freeimageslive.com/galleries/space/nebula/hst_carina_ngc3372_0006_small.jpg' data-cover="http://www.freeimageslive.com/galleries/space/nebula/pics/hst_carina_ngc3372_0006.jpg" alt="picture" />
        <img src='http://www.freeimageslive.com/galleries/space/nebula/hst_carina_ngc3372_0006_small.jpg' data-cover="http://www.freeimageslive.com/galleries/space/nebula/pics/hst_carina_ngc3372_0006.jpg" alt="picture" />
        <img src='http://www.freeimageslive.com/galleries/space/nebula/hst_carina_ngc3372_0006_small.jpg' data-cover="http://www.freeimageslive.com/galleries/space/nebula/pics/hst_carina_ngc3372_0006.jpg" alt="picture" />
        <img src='http://www.freeimageslive.com/galleries/space/nebula/hst_carina_ngc3372_0006_small.jpg' data-cover="http://www.freeimageslive.com/galleries/space/nebula/pics/hst_carina_ngc3372_0006.jpg" alt="picture" />
        <img src='http://www.freeimageslive.com/galleries/space/nebula/hst_carina_ngc3372_0006_small.jpg' data-cover="http://www.freeimageslive.com/galleries/space/nebula/pics/hst_carina_ngc3372_0006.jpg" alt="picture" />
        <img src='http://www.freeimageslive.com/galleries/space/nebula/hst_carina_ngc3372_0006_small.jpg' data-cover="http://www.freeimageslive.com/galleries/space/nebula/pics/hst_carina_ngc3372_0006.jpg" alt="picture" />
      </div>

      <h2>How to use it</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <pre>
$(function(){
  $('img').cover();
});</pre>
      <h2>Options</h2>
      <table>
        <tr>
          <th>Option</th><th>Default</th><th class='large-field'></th>
        </tr>
        <tr>
          <td>binding</td><td>click.cover</td><td>The event that should trigger the fullscreen.</td>
        </tr>
        <tr>
          <td>divID</td><td>cover-plugin-bloc</td><td>The ID property of the div created by the plugin.</td>
        </tr>
        <tr>
          <td>loader</td><td>loader.gif</td><td>The address of an image displayed while the fullscreen image is loading. Most likely an animated gif. The default uses a loader that ships with the plugin.</td>
        </tr>
        <tr>
          <td>backgroundColor</td><td>transparent</td><td>Background color of the div when it is loading the fullscreen image.</td>
        </tr>
        <tr>
          <td>preload</td><td>true</td><td>Boolean. If this is true, the plugin will try to preload the fullscreen images as long as they are set when the plugin is called.</td>
        </tr>
        <tr>
          <td>duration</td><td>200</td><td>The duration of the scaling animation.</td>
        </tr>
      </table>
    </div>

    <a href="https://github.com/mig-hub/jquery.cover.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="plugin.cover.raw.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
          $('.demo-bloc img').cover({backgroundColor: "#073642"});
      });
    </script>
  </body>
</html>