How to display the popup when anyone click on an image or a link?

To display the lightbox/popup when anyone click on an image or a link, you need to use the XYZ WP Popup premium plugin.

In the XYZ WP Popup Premium plugin please go to the create/edit/manage popup section and select the display trigger “on click”.

Here you can select “on first click” or “on every click” option. The popup will appear only one time on first click if the selected option is “on first click”. To display the popup on every click (on the element or page) select the option “on every click”.

Now you need to add the “Trigger element”.

If you leave this empty, popup will trigger when anyone clicks on body.

Otherwise you can specify the element which when clicked must trigger lightbox.

You can specify any of the formats below.
tagname => eg: img
classname => eg: .myclass
id => eg: #myid

If you are using a tag name, the popup will triggered when the user clicks on the element with the tagname.

The same is with the class and id.

For example,

Consider an image in your site and the code is like <img src=”xxxpathxxxx” class=”myclass”> or like <a href=”#” class=”myclass”>Click Here to Load Popup</a>

Here the class of the image is ‘myclass’. You need to add the class name in trigger element as

Trigger Element : .myclass

Also you can use the placement mechanism as Automatic or Manual for XYZ WP Popup plugin. If you are using the Manuel mechanism, copy the short code and paste it in the page where you want to display the lightbox. If you are using the automatic mechanism, it will display the popup when anyone clicks on the link/image with the same classname.

Example 1: Trigger with classname

Consider the HTML code as given below.

<a href=”#” class=”myclass”>Click Here to Load Popup</a>

Here the class name is “myclass”. In the trigger element, please add it like “Trigger element = .myclass”

Now, if we click on the link with class=myclass, the popup will display

Example 2: Trigger with id

Consider the HTML code as given below.

<a href=”#” id=”myid”>Click Here to Load Popup</a>

Here the id is “myid”. In the trigger element, please add it like “Trigger element = #myid”

Now, if we click on the link with id=myid, the popup will display

Example 3: Trigger with tag

Consider the HTML code as given below.

Here the tag is “img”. In the trigger element, please add it like “Trigger element = img”

Now, if we click on the link with tag=img, the popup will display.