If you've already used Lightbox on your site, or some of the following experiences, you'll feel comfortable with it (provided you use jquery).
1. Specify which conditions apply the Lightbox effect
Add the following statement to the JS file in the Web site:
Copy Code code as follows:
$ (function () {
$ (' a[@rel *=lightbox] '). Lightbox ();
$ ('. Gallery a '). LightBox ();
});
This determines that only after adding "rel=lightbox" to the link, the link will appear lightbox effect, the second line of '. Gallery a ' is for WordPress original album, add this sentence, the photo album will also appear Lightbox effect.
2. Automatically add Rel=lightbox properties
Because in the above definition only with "Rel=lightbox" link will have effect, generally we need to each upload picture manually add "Rel=lightbox" this sentence. But this is a hassle, and we can make it automatically added to the picture with the link.
First automatically add a style for each p paragraph with a picture:
$ ("#content P:has (IMG)"). AddClass ("IMGBG");
For example, the above sentence is specified in the #content this area, as long as the paragraph with IMG, then add the style "IMGBG", so that its original no style of p paragraph into the <p class= "IMGBG" > Belt style;
Then automatically add the "Rel=lightbox" attribute to the link in the <p class= "IMGBG" > This section:
Copy Code code as follows:
$ (". IMGBG a"). attr ({
Rel: "Lightbox"
});
With the above two steps, all the pictures with links in the text will automatically perform the Lightbox effect.
3. Selectively load Lightbox
We do not need to load the whole station Lightbox effect. In general we use this effect in a separate article page. So we can put the Lightbox JS code out, and then in the WordPress header.php in this setting:
Copy Code code as follows:
<?php if (Is_single ()):?>
<script type= "Text/javascript" src= "<?php bloginfo (' Template_url ');? >/js/lightbox.js" ></script>
<?php endif?>
Further, if you want to perform the effect on only the article in the photo, you can accurately load the Lightbox only for the article labeled "Photo", set to read:
Copy Code code as follows:
<?php if (Is_single () && has_tag (' photo '):?>
<script type= "Text/javascript" src= "<?php bloginfo (' Template_url ');? >/js/lightbox.js.php" ></script >
<?php endif?>
The above points is my use of lightbox, I hope to help you.
