Use of WordPress photo lightbox effects _ jquery

Source: Internet
Author: User
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:



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.