How to add light-box to your extent reports?

Extent Reports:

How to add lightbox to your extent reports?

Lightbox in Javascript: A typical lightbox image display. Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page. (Source: Wikipedia0

Issue while using Extent reports:

For failed cases screenshot will be captured and whenever user opens report.html for failed cases we can see images (local machine). Now if user shares the report to other person, if other person tries to access the images for failed cases it doesnt shows up :(

So here is one of the solutions which i found is implementing lightbox using javasript
 For Extent report initialization just use below code

public static void ExtentReportsInitialize(){
    extent.init(reportLocation + "Report.html",      true,DisplayOrder.BY_OLDEST_TO_LATEST,GridType.MASONRY);
    extent.config().insertJS("$(document).ready(function(){"
  + " $('img.report-img').each(function(){"
  + "$(this).attr('data-featherlight','');"
  + " $(this).attr('src',$(this).attr('src').replace('file:///','')); "
  + "$(this).attr('href',$(this).attr('src'));"
  + " $(this).attr('data-featherlight','image');"
  + " })});");
   extent.config().addCustomStyles(css);
}

public static String createScreenshot(WebDriver driver) {
              // generate screenshot as a file object
        return "data:image/png;base64,"+((TakesScreenshot)driver).getScreenshotAs(OutputType.BASE64);
     
    }


With this code we can take the screenshot for all the failed cases and embed the screenshot in the report itself and click on image from the report will open the light box. With this no need to always maintain ‘Screenshot’  folder in separate. Images will be shown even if we share just ‘report.html’ file to any user (As images are embedded within the report).

if you have any question please comment below.

Thanks!