Dynamic Galleries

Displays images in a modal-type gallery. Will not load the images until the modal is launched. Perfect for galleries with big images.

Language: HTML5

  1. <!DOCTYPE html>
  2. <head>
  3. <!-- styles -->
  4. <link rel="stylesheet" type="text/css" href="/style.css">
  5. </head>
  6. <body>
  7.  
  8. <p><a href="/benjamin-voros-phIFdC6lA4E-unsplash.jpg" data-type="gallery">View Image</a></p>
  9.  
  10. <!-- photo attribution -->
  11. <p style="font-size: 0.8em"><span>Photo by <a href="https://unsplash.com/@vorosbenisop?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Benjamin Voros</a> on <a href="https://unsplash.com/s/photos/mountains?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></p>
  12.  
  13. <!-- JS -->
  14. src="https://code.jquery.com/jquery-3.5.1.min.js"
  15. integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  16. crossorigin="anonymous"></script>
  17. <script type="text/javascript" src="/index.js"></script>
  18.  
  19. </body>
  20. </html>

Language: Javascript

  1. $(document).ready(function(){
  2. $('body').append('<div class="gallery_overlay">');
  3.  
  4. $('[data-type="gallery"]')
  5. .each(function(i){
  6. const id = 'gallery_' + i;
  7. $(this).attr('data-id', id);
  8.  
  9. $('body').append([
  10. '<div id="data-gallery"><button class="close">Close</button>',
  11. '</div>',
  12. ].join(''));
  13. })
  14. .click(function(e){
  15. const id = $(this).data('id');
  16. const href = $(this).attr('href');
  17. const $img = $('<div class="gallery_inner"><img src="' +href+ '" alt="" data-gallery-img="' +id+ '"></div>');
  18. const $inner = $(this).find('.gallery_inner');
  19.  
  20. $('.gallery_overlay')
  21. .fadeIn(500, function() {
  22. $('#data-gallery')
  23. .css('display', 'flex')
  24. .animate({
  25. opacity: '1.0',
  26. marginTop: '0',
  27. }, 400, function() {
  28. $(this)
  29. .append($img);
  30.  
  31. $(this).find('.gallery_inner')
  32. .animate({
  33. opacity: '1.0'
  34. },800);
  35. });
  36. });
  37.  
  38. $('body').addClass('gallery_loaded');
  39.  
  40. e.preventDefault();
  41. });
  42. setTimeout(() => {
  43.  
  44. const $gallery = $('#data-gallery');
  45.  
  46. $gallery.find('button.close').on('click', function(e){
  47. let id = $(this).data('id');
  48. let href = $(this).attr('href');
  49. let $img = $('<img src="' +href+ '" alt="" data-gallery-img="' +id+ '">');
  50.  
  51. $(this).closest($gallery)
  52. .animate({
  53. opacity: '0',
  54. marginTop: '-100%',
  55. },400, function(){
  56. $(this).find('.gallery_inner')
  57. .remove();
  58.  
  59. $('.gallery_overlay')
  60. .fadeOut(500);
  61. });
  62. $('body').removeClass('gallery_loaded');
  63.  
  64. e.preventDefault();
  65. });
  66. }, 1000);
  67. });

Language: CSS

  1. .gallery_overlay {
  2. background: rgba(0,0,0,0.75);
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. right: 0;
  7. bottom: 0;
  8. z-index: 1000;
  9. display: none;
  10. }
  11.  
  12. #data-gallery {
  13. z-index: 1001;
  14. max-width: 100%;
  15. max-height: 100%;
  16. display: none;
  17. opacity: 0;
  18. margin-top: -100%;
  19. align-items: center;
  20. justify-content: center;
  21. position: fixed;
  22. top: 0;
  23. left: 0;
  24. right: 0;
  25. bottom: 0;
  26. overflow-y: auto;
  27. transition: margin-top 0.8s ease;
  28. }
  29. #data-gallery button.close {
  30. position: absolute;
  31. top: 0;
  32. right: 0;
  33. }
  34. #data-gallery .gallery_inner {
  35. background: white;
  36. max-width: 100%;
  37. width: 75%;
  38. margin: 0 auto;
  39. opacity: 0;
  40. }
  41.  
  42. #data-gallery .gallery_inner img {
  43. width: auto;
  44. height: auto;
  45. max-width: 100%;
  46. max-height: 100%;
  47. display: block;
  48. margin: 0 auto;
  49. }

See It In Action