Wookmark-jQuery/example-flexible/index.html at develop · sh4dzilla/Wookmark-jQuery · 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
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>jQuery Wookmark Plug-in Example</title>
  <meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS Reset -->
  <link rel="stylesheet" href="../css/reset.css">

  <!-- Global CSS for the page and tiles -->
  <link rel="stylesheet" href="../css/main.css">

  <!-- Specific CSS for the example -->
  <style>
    /**
     * Grid items
     */
    #tiles li {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
    }

    #tiles li img {
      width: 100%;
      height: auto;
    }
  </style>

</head>

<body>

  <div id="container">
    <header>
      <h1>jQuery Wookmark Plug-in Example</h1>
      <p>Flexible: columns resize to fill the container without exceeding a maximum width.</p>
    </header>
    <div id="main" role="main">

      <ul id="tiles">
        <!-- These are our grid blocks -->
        <li><img src="../sample-images/image_1.jpg"><p>1</p></li>
        <li><img src="../sample-images/image_2.jpg"><p>2</p></li>
        <li><img src="../sample-images/image_3.jpg"><p>3</p></li>
        <li><img src="../sample-images/image_4.jpg"><p>4</p></li>
        <li><img src="../sample-images/image_5.jpg"><p>5</p></li>
        <li><img src="../sample-images/image_6.jpg"><p>6</p></li>
        <li><img src="../sample-images/image_7.jpg"><p>7</p></li>
        <li><img src="../sample-images/image_8.jpg"><p>8</p></li>
        <li><img src="../sample-images/image_9.jpg"><p>9</p></li>
        <li><img src="../sample-images/image_10.jpg"><p>10</p></li>
        <li><img src="../sample-images/image_1.jpg"><p>11</p></li>
        <li><img src="../sample-images/image_2.jpg"><p>12</p></li>
        <li><img src="../sample-images/image_3.jpg"><p>13</p></li>
        <li><img src="../sample-images/image_4.jpg"><p>14</p></li>
        <li><img src="../sample-images/image_5.jpg"><p>15</p></li>
        <li><img src="../sample-images/image_6.jpg"><p>16</p></li>
        <li><img src="../sample-images/image_7.jpg"><p>17</p></li>
        <li><img src="../sample-images/image_8.jpg"><p>18</p></li>
        <li><img src="../sample-images/image_9.jpg"><p>19</p></li>
        <li><img src="../sample-images/image_10.jpg"><p>20</p></li>
        <li><img src="../sample-images/image_1.jpg"><p>21</p></li>
        <li><img src="../sample-images/image_2.jpg"><p>22</p></li>
        <li><img src="../sample-images/image_3.jpg"><p>23</p></li>
        <li><img src="../sample-images/image_4.jpg"><p>24</p></li>
        <li><img src="../sample-images/image_5.jpg"><p>25</p></li>
        <li><img src="../sample-images/image_6.jpg"><p>26</p></li>
        <li><img src="../sample-images/image_7.jpg"><p>27</p></li>
        <li><img src="../sample-images/image_8.jpg"><p>28</p></li>
        <li><img src="../sample-images/image_9.jpg"><p>29</p></li>
        <li><img src="../sample-images/image_10.jpg"><p>30</p></li>
        <!-- End of grid blocks -->
      </ul>

    </div>
    <footer>

    </footer>
  </div>

  <!-- include jQuery -->
  <script src="../libs/jquery.min.js"></script>

  <!-- Include the imagesLoaded plug-in -->
  <script src="../libs/jquery.imagesloaded.js"></script>

  <!-- Include the plug-in -->
  <script src="../jquery.wookmark.js"></script>

  <!-- Once the images are loaded, initalize the Wookmark plug-in. -->
  <script type="text/javascript">
    (function ($){
      $('#tiles').imagesLoaded(function() {
        // Prepare layout options.
        var options = {
          itemWidth: 300, // Optional min width of a grid item
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#tiles'), // Optional, used for some extra CSS styling
          offset: 5, // Optional, the distance between grid items
          outerOffset: 20, // Optional the distance from grid to parent
          flexibleWidth: '50%' // Optional, the maximum width of a grid item
        };

        // Get a reference to your grid items.
        var handler = $('#tiles li');

        var $window = $(window);
        $window.resize(function() {
          var windowWidth = $window.width(),
              newOptions = { flexibleWidth: '50%' };

          // Breakpoint
          if (windowWidth < 1024) {
            newOptions.flexibleWidth = '100%';
          }

          handler.wookmark(newOptions);
        });

        // Call the layout function.
        handler.wookmark(options);
      });
    })(jQuery);
  </script>

</body>
</html>