Below is how my page currently looks on desktop view:
On mobile view it does not look like this at all. See below for mobile view:
When you click on an image in the grid view, it pops up the clicked image in full screen. See below:
My goal is to keep the same layout as what currently shows on desktop view. For behavior my goal is as follows:
Clicking on any image in the grid view below the slider image should change the slider image.
Clicking on the slider photo should expand a full screen view of the photo (with grid gallery below).
Behavior should be the same on mobile view.
The image currently showing in the slider view should be highlighted somehow (with a border) and selecting any other image in the gallery grid below the slider will highlight that image in the grid view instead.
Bonus points if I can categorize the gallery view by category or sections such as Exterior, Interior, Features side by side. Clicking on the slider arrows will cycle through all images as if the categories didn’t exist.
Full screen view (when clicking on slider):
Plugins being used currently: ACF Pro, WPBakery Page Builder, Filebird.
The website is set up with Cars added as ‘Car Pages’ which is an iteration of WordPress Posts. Each car page has its own details and custom fields using ACF Pro. Each car page also has its own images I can upload individually. In the Page Templates of the theme, I have a template I built which is set as the default for all car pages. All car details, including the car images, are pulled via Post Custom Fields (part of ACF Pro plugin). See below for references.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!