I’m using ACF Pro 6.3.11 and Bricks version: 1.11.1.1. I have created a custom post type for displaying products. One of the custom fields is the ACF Pro gallery field that I am using to store 1 or more product images. Most of the products have 3 to 10 images. The field name is “product_image_gallery”
On the product page template, I want to add an image gallery to display the product images associated to the product, similar to the one in the screenshot below. I want to generate thumbnail images for each item in that product’s image gallery, the red items marked with number 1. Clicking on the thumbnail would update the main image highlighted in purple, marked with number 2. Clicking on this main image would trigger a lightbox to show the full-size image with caption.
I’m struggling in two areas.
-
How to create a query that loops through all the images in the image gallery field for the current product/custom post? I need this to create the grid of image thumbnails (item 1) Here’s what I have so far:
-
Next, I want to make each thumbnail image clickable, and have it replace the main image (item 2) with a larger version of the image in the thumbnail.
Any help or advice would be greatly appreciated. I’m hoping to avoid having to add any additional plugins or tools, and manage this through Bricks, or if needed, custom code.
thanks!