Remote Content -- Create an Image Gallery Popup

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, target each image link so that the images will trigger the popup when clicked. Do this using the 'Extra CSS Selector' field in the 'Click Open' trigger as explained in our Setting Up a Remote Content Popup document.

Getting and Passing the Image Link Parameter JavaScript

Once the link(s) are set in the page or post content, the dynamic code setup process stays the same as in Remote Content AJAX Type Introduction. However, 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:

PHP

Now that we have the code that gathers and passes the image link, we can use a callable PHP function (or method) 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 the code is implemented, select the 'AJAX' load method, and add the name of the function or method to the Remote Content Area box.  Save the shortcode settings, and select 'Update' in the 'Publish' metabox of the Popup Editor to save the changes.