popup results from the CPAN

popup
Photography-Website
view release on metacpan or search on metacpan
<!doctype html>
<html>
  <head>
    <title>[% title %]</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="[% root('static/main.css') %]">
    <link rel="stylesheet" href="[% root('static/magnific-popup.css') %]">
  </head>
  <body>

    <div id="header">
      <h1><a href="[% root('index.html') %]">[% title %]</a></h1>
    </div>

    <div id="album">
      [% FOREACH item IN items %]
      [% IF item.type == 'image' %]
      [% IF fullscreen %]
      <a title="Click image to enlarge" href="[% item.href %]" class="photolink"><img alt="[% item.name %]" width="[% item.width %]" data-width="[% item.width %]" height="[% item.height %]" data-height="[% item.height %]" src="[% item.src %]"></a>
      [% ELSE %]
      <img alt="[% item.name %]" width="[% item.width %]" data-width="[% item.width %]" height="[% item.height %]" data-height="[% item.height %]" src="[% item.src %]">
      [% END %]
      [% ELSIF item.type == 'album' %]
      [% UNLESS item.unlisted %]
      <a title="Click to view complete album" href="[% item.href %]index.html"><img alt="[% item.name %]" width="[% item.width %]" data-width="[% item.width %]" height="[% item.height %]" data-height="[% item.height %]" src="[% item.src %]"></a>
      [% END %]
      [% END %]
      [% END %]
    </div>

    <div id="footer">
      <p>
        [% copyright %]
      </p>
    </div>

    <script src="[% root('static/jquery-1.7.2.min.js') %]"></script>
    <script src="[% root('static/jquery.magnific-popup.js') %]"></script>
    <script>
      /* Derived from
       * http://blog.vjeux.com/2012/image/image-layout-algorithm-google-plus.html
       */

      HEIGHTS = [];

      function getheight(images, width) {
        width -= images.length * 5;
        var h = 0;
        for (var i = 0; i < images.length; ++i) {
          h += $(images[i]).data('width') / $(images[i]).data('height');
        }
        return width / h;
      }

      function setheight(images, height) {
        HEIGHTS.push(height);
        for (var i = 0; i < images.length; ++i) {
          $(images[i]).css({
            width: height * $(images[i]).data('width') / $(images[i]).data('height'),
            height: height
          });
          $(images[i]).attr('src', $(images[i]).attr('src').replace(/w[0-9]+-h[0-9]+/, 'w' + $(images[i]).width() + '-h' + $(images[i]).height()));
        }
      }

      function resize(images, width) {
        setheight(images, getheight(images, width));
      }

      function run(max_height) {
        var size = $('#album').width() - 4;
        var n = 0;
        var images = $('#album img');
        w: while (images.length > 0) {
          for (var i = 1; i < images.length + 1; ++i) {
            var slice = images.slice(0, i);
            var h = getheight(slice, size);
            if (h < max_height) {
              setheight(slice, h);
              n++;
              images = images.slice(i);
              continue w;
            }
          }
          setheight(slice, Math.min(max_height, h));
          n++;
          break;
        }
      }

      function imageTitle(obj) {
        var img = obj.el.children('img');
        var title = img.attr('alt');
        return title + ' <span class="download">( <a title="Click to download full-size image" href="' + obj.src + '" download>download</a> )</span>';
}

      $(window).resize(function () { run(366); });
      $(function() {
( run in 1.804 second using v1.01-cache-2.11-cpan-364913b4093 )