The lightbox JS image control has been modified to support complex image descriptions

The lightbox JS image control has been modified to support complex image descriptions_javascript skills

WBOY

Release： 2016-05-16 18:32:00

Original

847 people have browsed it

The modified lightbox version is version 2.04.
The following are the basic settings we use when using lightbox to display images:

Copy the code The code is as follows:

　content

Mainly adding a rel="lightbox" attribute to the connection
When the connection is set up with the above test, when the connection is clicked, the lightbox will display the picture on the connection and use the title attribute of the connection as the description of the picture. , if you want to add a detailed description of the picture and set some formats for the description of the picture, such as font size, color, etc., then it is impossible to use the title attribute to set the description information.
Since the customer must have this function, we had to check the source code of lightbox to check whether it can be modified to meet this need. Fortunately, the main code size of lightbox is not very large, and it can be modified A small modification can meet this need, mainly because I am not familiar with the JS framework prototype.js.
The following is the modification process:
Open the lightbox.js file. The original 218 lines of code are:
this.imageArray.push([imageLink.href, imageLink.title]);
You can see Here we are directly reading the title attribute of the connection object, so we only need to change imageLink.title:
this.imageArray.push([imageLink.href, document.getElementById(imageLink.contentId).innerHTML ]);

Changed imageLink.title to document.getElementById(imageLink.contentId).innerHTML;
As can be seen from this sentence, we need to set a contentId attribute for the connection object. This attribute The value is the ID number of a certain DOM element, and the description of the picture is the content of this element.
After modification, you can set the image description in HTML like this:

Copy the code The code is as follows: