[ad_1]
[ad_2]
I made a folder/category with other folders/categories nested within. I'd like to create a menu where the parent item shows all the images in the folder when clicked and the child item would only show the images in that child folder. I want the images to update dynamically on the page similar to Ajax plugins.
Example:
Menu
- Main Folder (shows all the content of folder A and B when clicked)
— Folder A (Shows only the content in that folder when clicked)
— Folder B (Shows only the content in that folder when clicked)
I don't want to go to a new page when the menu item is clicked. I want the content to get updated dynamically in the same page.
I hope this makes sense.
1. Use a Plugin (Ajax-based Gallery Plugins)
WP Ajaxify Filters: Allows dynamic content loading without page reloads. You can create custom filters to load images based on the folder/category clicked.
Essential Grid or Envira Gallery (free versions): These plugins allow gallery filtering and dynamic content loading through AJAX.
2. Custom Code Solution
JavaScript (AJAX): Use JavaScript with jQuery AJAX to dynamically load images from each folder when the menu is clicked.
PHP (Backend): Create a function that fetches images based on the folder/category clicked, and send the data via an AJAX call.
HTML/CSS (Front-end): Structure your gallery with clickable parent and child folder elements. On-click events can trigger AJAX requests, which then update the gallery section without reloading the page.