How to use WordPress photo lightbox effect_jquery

If you have already used effects such as lightbox on your website, or the following application experience may be suitable for you (provided that it is implemented using JQuery).
1. Specify the conditions under which the Lightbox effect will be used
Add the following statement in the js file of the website:

Copy code The code is as follows:

$(function() {
$('a[@rel*=lightbox]').lightBox();
$ ('.gallery a').lightBox();
});

This determines that only after adding "rel=lightbox" to the link, the link will have the lightbox effect; The '.gallery a' in the second line is for the native photo album in WordPress. After adding this sentence, the pictures in the album will also have the lightbox effect.
2. Automatically add the rel=lightbox attribute
Because only links with "rel=lightbox" in the above definition will be effective, generally we need to manually add each uploaded image Add the sentence "rel=lightbox". But this seems troublesome. We can let it automatically add pictures with links.
First, automatically add a style to each p paragraph with pictures:
$("#content p:has(img)").addClass("imgbg");
For example, the above sentence is specified in In the #content area, as long as there is img in the paragraph, add the style "imgbg" so that the original unstyled p paragraph becomes

styled;
Then Automatically add the "rel=lightbox" attribute to the link in

:

Copy code The code is as follows:

$(".imgbg a").attr({
rel: "lightbox"
});

After the above In two steps, all pictures with links in the text will automatically implement the lightbox effect.
3. Selectively load lightbox
We don’t need to load the lightbox effect on the entire site. Generally speaking, we only use this effect on separate article pages. So we can separate the js code of the lightbox and set it like this in header.php in WordPress:

Copy the code The code is as follows :

Take it a step further, if you want to add only photos to the article To implement this effect, you can load the lightbox exactly for articles tagged with the "Photos" tag. Change the setting to:

Copy code The code is as follows:

The above points are my use of lightbox. I hope it will be helpful to you.