jQuery Gallery by ChtGPT

The pictures in the gallery are made by Stable Diffusion.

by Per Thykjaer Jensen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<h1>Gallery in jQuery by ChaptGPT</h1>

<div id="gallery"></div>

<p>The images are made by the Stable Diffusion AI.</p>
<p>At fist ChatGPT made a code like spaghetti. Then I asked for an array, lo and behold - not bad at all.</p>

CSS

#gallery {
  display: flex;
  flex-wrap: wrap;
}

.image-container {
  flex-basis: calc(25% - 10px);
  margin: 5px;
  position: relative;
  cursor: pointer;
}

.image-container img {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

.overlay img {
  max-width: 90%;
  max-height: 90%;
}

.overlay.active {
  display: flex;
}

JavaScript

$(document).ready(function() {
  var images = [
    'https://thoth.dk/wp-content/uploads/2023/02/cat.jpeg',
    'https://thoth.dk/wp-content/uploads/2023/02/superwoman-coder.jpeg',
    'https://thoth.dk/wp-content/uploads/2023/02/wizard-pc.jpeg',
    'https://thoth.dk/wp-content/uploads/2023/02/witch-03.jpeg'
  ];
  
  var $gallery = $('#gallery');
  var $overlay = $('<div class="overlay"></div>');
  var $overlayImage = $('<img>');
  
  $overlay.append($overlayImage);
  $('body').append($overlay);
  
  $.each(images, function(index, value) {
    var $imageContainer = $('<div class="image-container"></div>');
    var $image = $('<img src="' + value + '" alt="Image ' + (index + 1) + '">');
    
    $imageContainer.append($image);
    $gallery.append($imageContainer);
    
    $imageContainer.click(function() {
      $overlayImage.attr('src', value);
      $overlay.addClass('active');
    });
  });
  
  $overlay.click(function() {
    $overlay.removeClass('active');
  });
});