Enhanced Image Gallery (Paragraph Bundle Grid) with Interactive Lightbox Viewer Feature

Hello,

I'm glad to hear you've enjoyed the image grid component! Over the weekend, I put some focused effort into enhancing it with the lightbox feature you mentioned. This functionality has now been integrated into the development version.

The lightbox feature allows users to click on any image within the grid to view a larger, more detailed version in a pop-up modal. The image style was set to 600 px, so I removed the fixed width and it uses the original size. You will need to update this image style your-site/admin/config/media/image-styles/manage/pb_image_grid.

I've conducted initial testing to ensure the lightbox functions smoothly across different devices and browsers. This testing phase includes verifying the responsiveness of the modal, the clarity of the images in their enlarged state, and the seamless integration of this feature with the existing grid layout.

Additionally, I'm in the process of testing various variables such as color schemes, image titles, and other metadata to ensure they're accurately represented within the lightbox view.

Further testing and refinements will continue to ensure robust functionality and accessibility. Your feedback is invaluable, so please feel free to share any thoughts or suggestions as you explore this new feature.
Here is on the demo site: https://unitedstarsofamerica.com/display-formats/paragraph-bundle-image-...

Best wishes,
Alaa

Great, thanks a lot for the super fast implementation! I really like it. :)

There are a few things that could maybe improved:

* The close button is in the top right corner of the image which makes it sometime hard to see. Maybe put it on top right of the page (outside of image). On your demo it looks fine but for application screenshots with several lines at this position it is a bit hard to see.
* For next/previous buttons the rectangular bright background could be removed (and making the SVG brighter) to make them look more integrated.
* The page loads all images in full resolution. Instead, the gallery images could be displayed as responsive images and only the popup image in full size.

Hello,

• The close button is in the top right corner of the image which makes it sometime hard to see. Maybe put it on top right of the page (outside of image). On your demo it looks fine but for application screenshots with several lines at this position it is a bit hard to see. Done
• For next/previous buttons the rectangular bright background could be removed (and making the SVG brighter) to make them look more integrated.Done
• The page loads all images in full resolution. Instead, the gallery images could be displayed as responsive images and only the popup image in full size.Done

The default image style PB Image Grid is for the thumb.
A new image style was added for the clicked image PB Image Grid Full
To use the new image style, just reinstall the module.

https://unitedstarsofamerica.com/display-formats/paragraph-bundle-image-...

Best wishes,
Alaa

Perfect, this looks great now! :)

Automatically closed - issue fixed for 2 weeks with no activity.