Use of WordPress photo lightbox Effects

If lightbox is already used on your website, or the following experiences are also appropriate (provided that JQuery is used ).
1. specify the conditions under which Lightbox effects are used
Add the following statement to the website's js file:
Copy codeThe Code is as follows:
$ (Function (){
$ ('A [@ rel * = lightbox] '). lightBox ();
$ ('. Gallery A'). lightBox ();
});

In this way, it is determined that only after "rel = lightbox" is added to the link will the lightbox effect be displayed for the link '. gallery a' is for the original album generated in WordPress. After this sentence is added, the lightbox effect will also appear in the photo album.
2. automatically add the rel = lightbox attribute
In the preceding definition, only links with "rel = lightbox" have an effect. Generally, we need to manually add "rel = lightbox" to each uploaded image. However, this is troublesome. We can make it automatically add images with links.
First, automatically add a style for each p Section with an image:
$ ("# Content p: has (img)"). addClass ("imgbg ");
For example, the above sentence is specified in the # content area. If the section contains img, the style "imgbg" is added ", change the original p Paragraph without a style to a style with <p class = "imgbg">;
Then, the link in the <p class = "imgbg"> section is automatically added with the "rel = lightbox" attribute:
Copy codeThe Code is as follows:
$ (". Imgbg a"). attr ({
Rel: "lightbox"
});

After the above two steps, all the images with links in the text will automatically execute the lightbox effect.
3. selectively load lightbox
We do not need to load lightbox across the site. In general, this effect is used only on individual article pages. Therefore, we can separate the js Code of lightbox and set it in header. php In WordPress as follows:
Copy codeThe Code is as follows:
<? Php if (is_single ():?>
<Script type = "text/javascript" src = "<? Php bloginfo ('template _ url');?> /Js/lightbox. js "> </script>
<? Php endif?>

Furthermore, if you want to perform this effect only for the photos, you can accurately load lightbox only for the articles marked with "Photos". The setting is changed:
Copy codeThe Code is as follows:
<? Php if (is_single () & has_tag ('photos '):?>
<Script type = "text/javascript" src = "<? Php bloginfo ('template _ url');?> /Js/lightbox. js. php "> </script>
<? Php endif?>

The above points are my use of lightbox. I hope it will help you.