Add an Image Lightbox to a Form

Introduction

In this article, we will guide you on how to display images directly in a lightbox from the Image Upload field in a form, making it possible to view photos instantly without the need to download 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. Drag a Custom HTML into your form layout.
   

2. Add the Fancybox CSS and JavaScript libraries to your form. Insert the following links in your Custom HTML:

   • CSS for Fancybox:
     

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1.2/dist/fancybox/fancybox.css"/>

     
     

3. Add a script to initialize Fancybox for images within the Image Upload list. Place the following script in your Custom HTML:

   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1.2/dist/fancybox/fancybox.umd.js"></script>
   <script>
   $(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).attr("data-fancybox", "gallery");
           }
       });
   
       // Initiate fancybox with updated selector
       Fancybox.bind("[data-fancybox]", {});
   });
   </script>

4. 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 src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1.2/dist/fancybox/fancybox.umd.js"></script>
   <script>
   $(function() {
       // Locate image files and add a class
       $("ul.form-fileupload-value > li > a:not(.remove)").each(function() {
         $(this).attr("data-fancybox", "gallery");
       });
   
       // Initiate fancybox with updated selector
       Fancybox.bind("[data-fancybox]", {});
   });
   </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.

Expected outcome

After submitting the form, click on the image preview or file name to view the image lightbox.

Video Tutorial

The video below provides a visual representation of the steps mentioned.

Download Sample App