Add Swipeable LightBox to Your Gallery

You can add this script to your page/post where add your gallery in the Code Injection > Header section. Not the most elegant solution but it will work beautifully until the ghost team ads this natively.
If there are any improvements or suggestions please let me know.
Now how I can add external images via url to a gallery.…


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // Add a click event listener to each image in the gallery
  $('.kg-gallery-image > img').click(function(){
    // Get the URL of the clicked image
    var imageURL = $(this).attr('src');
    // Create an overlay element to display the full-sized image
    var overlay = $('<div id="lightbox-overlay"></div>');
    var lightbox = $('<div id="lightbox"></div>');
    var closeButton = $('<button id="lightbox-close-button">Close</button>');
    var image = $('<img src="' + imageURL + '">');
    // Add the image, close button, and overlay elements to the page
    lightbox.append(image);
    lightbox.append(closeButton);
    overlay.append(lightbox);
    $('body').append(overlay);
    // Add a click event listener to the close button
    closeButton.click(function(){
      // Remove the overlay and lightbox elements from the page
      overlay.remove();
    });
  });
});
</script>

2 Likes

Thanks for sharing. Many themes already load jquery, so many users will be able to omit the first line.

You could modify code to add some external sources (perhaps using the page-specific code injection?), but it won’t use the pretty Ghost editor.

Thanks. That sounds a bit too hacky for my comfort lol
I just wish I could get the storage adapter working for S3 or bunny. On WordPress I usually store straight to Wasabi(S3 compatible)/bunnystorage then pull with bunny cdn. Not sure why so difficult here.