A new Riff-radio.org site with a static approach.

gallery.js 1.4KB

123456789101112131415161718192021222324252627282930313233
  1. function renderGallery(jsonContent, thumbnailSize) {
  2. var container = document.getElementById("gallery_container");
  3. container.innerHTML = '';
  4. var layoutGeometry = require('justified-layout')(jsonContent, {
  5. "containerWidth": container.offsetWidth,
  6. "targetRowHeight": thumbnailSize * 0.6,
  7. "boxSpacing": 5});
  8. container.style.height = layoutGeometry.containerHeight + 'px';
  9. var boxes = layoutGeometry.boxes;
  10. for (var i = 0; i < boxes.length; i++) {
  11. var img = document.createElement("img");
  12. img.setAttribute('src', jsonContent[i].url_thumb);
  13. img.setAttribute('alt', jsonContent[i].title);
  14. img.style.width = boxes[i].width + 'px';
  15. img.style.height = boxes[i].height + 'px';
  16. link = document.createElement("a");
  17. link.setAttribute('href', jsonContent[i].url);
  18. link.setAttribute('class', 'image-reference');
  19. div = document.createElement("div");
  20. div.setAttribute('class', 'image-block');
  21. div.setAttribute('title', jsonContent[i].title);
  22. div.setAttribute('data-toggle', "tooltip")
  23. div.style.width = boxes[i].width + 'px';
  24. div.style.height = boxes[i].height + 'px';
  25. div.style.top = boxes[i].top + 'px';
  26. div.style.left = boxes[i].left + 'px';
  27. link.appendChild(img);
  28. div.appendChild(link);
  29. container.appendChild(div);
  30. }
  31. }