Create an Image Gallery with Remote Content Popups
Image Gallery Example
For this example, we're going to show you how you can pass parameters based on the link the user clicked, then render the link inside a popup.
In this case, let's pretend the user is viewing a gallery, and you want the image that is clicked to be dynamically generated inside the popup.
Setup Your Gallery
First, setup your image gallery - you can use the default WordPress Gallery capability or setup an image grid yourself. Either method will suffice.
Target Each Image Link
As always with Remote Content, you have to target each image link so that, when clicked, the images will trigger the popup. Do this using the Custom CSS Selector Field in the Click Trigger as explained in our Setting Up a Remote Content Popup Doc.
Once you're good-to-go on the front end, the dynamic code setup process stays the same as in Remote Content AJAX Type Introduction, but our code is just a bit different to get the image link. We've also applied a wrapper to the code so that we're able to implement it in the WordPress Admin using a plugin like Simple Custom CSS/JS:
Now that we have the code that gathers and passes the image link, we can use a PHP function to render the image inside the popup - we like to use a plugin like My Custom Functions to input the function in the WP Admin so that it runs seamlessly on the front end:
Adding the Function Name to Remote Content
Now that all of our code has been implemented, all that is left to do is simply add the function name in the Remote Content Pane in the Popup Editor: