Wookmark-jQuery/example-load-images/index.html at master · rebootcode/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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Wookmark Image Preloader Example</title>
  <meta name="description" content="An example on how to use an image preloader with Wookmark">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

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

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

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

</head>

<body>
  <div class="progress-bar"></div>
  <div>
    <header>
      <h1>Wookmark Image Preloader Example</h1>
      <p>The tiles are initialized after all images have loaded and their size determined.</p>
      <br>
      <p><a href="../index.html">Back to overview</a></p>
    </header>

    <div role="main">
      <ul id="container" class="tiles-wrap animated"></ul>
    </div>
  </div>

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

  <!-- Include the imagesLoaded plug-in -->
  <script src="../bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>

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

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($) {
      var loadedImages = 0, // Counter for loaded images
          $progressBar = $('.progress-bar'),
          container = '#container',
          $container = $(container),
          tileCount = 30,
          wookmark;

      for (var i = 0; i < tileCount; i++) {
        var newItemHtml = '<li class="tile-loading"><img src="../sample-images/image_' + (1 + i % 10) + '.jpg"><p>' + (1 + i) + '</p></li>';
        $container.append(newItemHtml);
      }

      // Initialize Wookmark
      wookmark = new Wookmark(container, {
        offset: 5, // Optional, the distance between grid items
        outerOffset: 10, // Optional, the distance to the containers border
        itemWidth: 210 // Optional, the width of a grid item
      });

      $container.imagesLoaded()
        .always(function () {
          $progressBar.hide();
        })
        .progress(function (instance, image) {
          // Update progress bar after each image has loaded and remove loading state
          $(image.img).closest('li').removeClass('tile-loading');
          $progressBar.css('width', (++loadedImages / tileCount * 100) + '%');
          wookmark.updateOptions();
        });
    })(jQuery);
  </script>

</body>
</html>