Lightbox plugin usage experience

Without a doubt, lightbox plugin is very powerful.

I used this plug-in when developing the CRM system. Here I will share my application experiences.

I. lightbox2

Official Website: http://www.lokeshdhakar.com/projects/lightbox2/

1. Import: Add the following content to the Code:

<SCRIPT type = "text/JavaScript" src = "/plugins/lightbox/JS/prototype. js"> </SCRIPT>

<SCRIPT type = "text/JavaScript" src = "/plugins/lightbox/JS/scriptaculous. js? Load = effects "> </SCRIPT>

<SCRIPT type = "text/JavaScript" src = "/plugins/lightbox/JS/lightbox. js"> </SCRIPT>

<LINK rel = "stylesheet" href = "/plugins/lightbox/CSS/lightbox.css" type = "text/CSS" Media = "screen"/>

Obviously, prototype is used here.

2. Association

① Add the rel = "lightbox" attribute to apply it to any link tag

<A href = "images/image-1.jpg" rel = "lightbox" Title = "My caption"> image #1 </a>

② Conditional Association

<SCRIPT type = "text/JavaScript">

$ (Function (){

$ ('A [@ rel * = lightbox] '). lightbox (); // select all links that contains lightbox In the attribute REL

$ ('# Gallery A'). lightbox (); // select all links in object with gallery ID

$ ('A. lightbox'). lightbox (); // select all links with lightbox class

$ ('A'). lightbox (); // select all links in the page

});

</SCRIPT>

③ Group Association

<A href = "images/image-1.jpg" rel = "lightbox [lightgroup]" Title = "My caption"> image #1 </a>

Set rel to "lightbox [lightgroup]" And lightgroup to the group name, which can be customized. In this way, all links of rel = "lightbox [lightgroup]" Become a group, click a link to display the previous and next pages, if any.

3. display size control

Lightbox is displayed by default based on the actual size of the image, but sometimes the image will be very large, resulting in a scroll bar, which is not very friendly. My solution is to set a maximum width and a maximum height.

Train of Thought: if the actual width of the image is greater than the maximum width, the display is based on the maximum width, and the height equals ratio is reduced,

If the actual height of the image is greater than the maximum height, the image is displayed at the maximum height, and the width is reduced by an equal ratio.

Transformation steps:

Step 1:

In lightboxoptions = object. Extend ({}, window. lightboxoptions ||{}), add two extension parameters: maxwidth: 800, maxheight: 800 (set the size)

Step 2:

Convert imgpreloader. onload = (function () {}) in changeimage: function (imagenum) {}:

Imgpreloader. onload = (function (){

This. lightboximage. src = This. imagearray [This. activeimage] [0];

VaR imgwidth = imgpreloader. width;

VaR imgheight = imgpreloader. height;

// If the actual width of the image is greater than the maximum width and the image is displayed in the maximum width, the height equals ratio is reduced.

If (imgwidth> lightboxoptions. maxwidth ){

VaR ratio = lightboxoptions. maxwidth/imgwidth;

Imgheight = imgheight * ratio;

Imgwidth = lightboxoptions. maxwidth;

}

// If the actual height of the image is greater than the maximum height, the image is displayed at the maximum height, and the width equals ratio is reduced.

If (imgheight> lightboxoptions. maxheight ){

VaR ratio = lightboxoptions. maxheight/imgheight;

Imgwidth = imgwidth * ratio;

Imgheight = lightboxoptions. maxheight;

}

This. lightboximage. width = imgwidth;

This. lightboximage. Height = imgheight;

This. resizeimagecontainer (imgwidth, imgheight );

}). BIND (this );

Step 3: easy to ignore:

In lightbox.css

# Lightbox IMG {width: auto; Height: auto ;}

Style Removal

The three steps are not too ugly to limit the image. I don't need to talk about the advantages, but the disadvantages are also obvious: this restriction is written in JS, which works for all the places where lightbox is used and is not flexible enough. I am not familiar with the prototype library. The following describes the lightbox of jquery that I am familiar.

2. jquery-lightbox-0.5

Official Website: http://leandrovieira.com/projects/jquery/lightbox/

1. Import: Add the following code to the

<SCRIPT type = "text/JavaScript" src = "JS/jquery. js"> </SCRIPT>

<SCRIPT type = "text/JavaScript" src = "JS/jquery. lightbox-0.5.js"> </SCRIPT>

<LINK rel = "stylesheet" type = "text/CSS" href = "CSS/jquery.lightbox-0.5.css" Media = "screen"/>

 

2. The association method is the same as lightbox2

3. Expansion:

Reference: http://www.cnblogs.com/intcry/archive/2010/10/15/2014554.html

The jquery lightbox plug-in has some configurations, and you can define to call it.

In this configuration, you can customize your jquery lightbox plug-in.

<SCRIPT type = "text/JavaScript">

$ (Function (){

$ ('# Gallery A'). lightbox ({

Overlaybgcolor: "# fff", // sets the display background.

Fixednavigation: false, // whether the tag of the next and previous pages is displayed

// Imageloading: 'images/lightbox-ico-loading.gif ', // set the download Image

// Imagebtnprev: 'images/lightbox-btn-prev.gif ', // set the image address of the previous page button

// Imagebtnnext: 'images/lightbox-btn-next.gif ', // set the image address of the next page button

// Imagebtnclose: 'images/lightbox-btn-close.gif ', // set the image address of the close button

// Imageblank: 'images/lightbox-blank.gif ', // set the blank image address

Containerbordersize: 10, // you can specify the Border width of the displayed image.

Containerresizespeed: 2000, // sets the image display time.

Txtimage: "Image:", // define the description text

Txtof: "/", // defines the characters in the middle of the page number

Keytoclose: "S", // sets the shortcut key for disabling the image

Keytoprev: "A", // sets the shortcut key for the previous page.

Keytonext: "D", // set the shortcut key for the next page

// Imagearray :"",

Activeimage: 0, // sets the dynamic display of the image. The easing plug-in is required.

Easing: "easeoutelastic ",

Overlayopacity: 0.7 // sets the background transparency.

Maxwidth: 800, // maximum width, custom, used below

Maxheight: 800 // maximum height, same as above

});

});

4. Image Size Display Control

Step 1: Start With JS

Find the _ resize_container_image_box function and modify it.

Function _ resize_container_image_box (intimagewidth, intimageheight ){

VaR newwidth = intimagewidth;

VaR newheight = intimageheight;

If (newwidth> Settings. maxwidth ){

VaR ratio = settings. maxwidth/newwidth;

Newheight = newheight * ratio;

Newwidth = settings. maxwidth;

}

If (newheight> Settings. maxheight ){

VaR ratio = settings. maxheight/newheight;

Newwidth = newwidth * ratio;

Newheight = settings. maxheight;

}

Intimagewidth = newwidth;

Intimageheight = newheight;

VaR intcurrentwidth = $ ('# lightbox-container-image-box'). Width ();

VaR intcurrentheight = $ ('# lightbox-container-image-box'). Height ();

VaR intwidth = (intimagewidth + (settings. containerbordersize * 2 ));

VaR intheight = (intimageheight + (settings. containerbordersize * 2 ));

 

VaR intdiffw = intcurrentwidth-intwidth;

VaR intdiffh = intcurrentheight-intheight;

 

$ ('# Lightbox-container-image-box '). animate ({width: intwidth, height: intheight}, settings. containerresizespeed, function () {_show_image ();});

If (intdiffw = 0) & (intdiffh = 0 )){

If ($. browser. MSIE ){

___ Pause (1, 250 );

} Else {

___ Pause (1, 100 );

}

}

(('{Lightbox-container-image-data-box'{.css ({width: intimagewidth + (settings. containerbordersize * 2 )});

Detail ('{lightbox-image'}.css ({width: intimagewidth, height: intimageheight });

('{Lightbox-nav-btnprev,{lightbox-nav-btnnext'{.css ({Height: intimageheight + (settings. containerbordersize * 2 )});

};

Step 2: add restrictions on the page:

$ (Function (){

$ ('# Gallery A'). lightbox ({Maxwidth: 500, maxheight: 500}); // You can specify the maximum width and height.

});

Or add restrictions in JS: In settings = jquery. Extend ({/* pre-defined */}, settings

); Add two parameters: maxwidth: 500, maxheight: 500. The disadvantages of this method will not be discussed much.

 

These are my experiences with lightbox. You are welcome to correct them.