We should all know the lightbox effects, which are generally used in the display of website photos. Of course, there are more promotional applications, such as facebox, with more beautiful and comprehensive 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:
The 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, if the above sentence is specified in the # content area, as long as the paragraph contains an img, add the style "imgbg" to make its original p Paragraph with no style change
With style;
Then
The link in this section automatically adds the "rel = lightbox" attribute:
The 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:
The Code is as follows:
