Knowledge Base
  • Select Role
  • English
  • Login

Add an Image Lightbox to a Form

Introduction

Learn how to display images directly in a lightbox from the image upload field in a form, allowing you to view photos without downloading them first.

How does it work?

Prerequisites

Before implementing the lightbox functionality, setting up the environment with the right tools is important. Each component ensures that your form’s image display operates smoothly and efficiently. Here’s what you’ll need and why:

  • jQuery: Needed for simplifying HTML document traversing, event handling, and Ajax interactions. It provides the foundational framework that Fancybox relies on to function properly.
  • Fancybox library: This powerful and flexible tool offers a streamlined approach to displaying images, videos, and content in a lightbox overlay that floats over the page. It enhances the user experience by providing a more interactive and visually appealing way to view images without leaving the current page.

Follow the steps below to implement the lightbox functionality in your form correctly:

  1. Add the Fancybox CSS and JavaScript libraries to your form. Insert the following links within the <head> section of your HTML:

    • CSS for Fancybox:
       
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">
    • JavaScript for Fancybox:
       
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>

  2. Add a script to initialize Fancybox for images within the Upload list. Place the following script at the end of your HTML before the closing </body> tag:

    <script type="text/javascript">
$(function() {
    // Initiate fancybox
    $().fancybox({
        selector : 'ul.form-fileupload-value > li > a:has(img)',
        thumbs : {
            autoStart : true
        }
    });
});
</script>

  3. Modify the script to identify image links and initialize Fancybox if your form uses a standard File Upload field. Replace the previous script with:

    <script type="text/javascript">
$(function() {
    // Locate image files and add a class
    $("ul.form-fileupload-value > li > a").each(function() {
        if(/\.(jpg|jpeg|gif|png)$/i.test($(this).text())) {
            $(this).addClass("withImage");
        }
    });

    // Initiate fancybox with updated selector
    $().fancybox({
        selector : 'ul.form-fileupload-value > li > a.withImage, ul.form-fileupload-value > li > a:has(img)',
        thumbs : {
            autoStart : true
        }
    });
});
</script>

Additional tips

  • Ensure jQuery is loaded before any scripts that depend on it.
  • Regularly update the library links to ensure access to the latest features and security updates.

Following these steps, you can integrate a smooth, user-friendly lightbox feature for image previews within your forms, enhancing the overall user experience.

Created by Julieth Last modified by Aadrian on Dec 13, 2024
Tags:
Previous Integrating Google Maps into Joget Forms NextPopup Image Viewer inside Form