JQuery Lightbox Picture Display plug-in usage instructions _jquery

Source: Internet
Author: User
Tags prev

One, information
Original Author: Benjamin Arthur Lupton
Current version: v1.3.7 final version
Release date: April 25, 2009
Project Address: Http://jquery.com/plugins/project/jquerylightbox_bal
Translation Editor: Zhang Xinxu (Zhangxinxu)

Second, the installation
Embed the following code links to the required JavaScript file in the header head of your page. <script type= "Text/javascript" src= "Js/jquery-1.2.6.pack.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.lightbox.packed.js" ></script>

The previous JavaScript file represents the JavaScript library, followed by the Lightbox plugin. The link path here is modified according to your actual situation.

Third, help
If you encounter some problems in the use process can not be resolved, you may go here to Http://plugins.jquery.com/project/issues/jquerylightbox_bal, may be helpful to you.
Four, parameter

Name of parameter Description parameter Values
Show_helper_text Whether to display some hint text, such as "click Off" and so on True (default, display), False (not shown)
Show_info Whether to display information about a picture Auto (default)-automatically displays if you want the mouse to pass, true-force display
Show_extended_info Whether to show some information about the picture extension Auto (default)-automatically displays if you want the mouse to pass, true-force display
Download_link Whether to display a link to the picture download True (default, display), False (not shown)
Auto_resize Size limit if picture size is too large True (default, limit), False (not limited)
ColorBlend Whether to support colorblend (color blending) Null (default)-only available when ColorBlend is detected, true-imports colorblend and makes available, false-does not support colorblend
Ie6_support Whether to support IE6 browsers True (default, supported), FALSE (not supported)
Ie6_upgrade Whether to display upgrade prompts to IE6 users True (default, display), False (not shown)
Show_linkback Whether to show the direction link in the upper right corner True (default, display), False (not shown)
Auto_scroll How to handle scrolling "Follow" (default)-consistent with the user, "disabled"-do not allow scrolling, "ignore"-ignore scrolling (let Lightbox stay in its original position)
Speed Time of transition for each picture transformation (MS) 400 (default), Integer (integer)
BaseURL The base path to use is used to automatically import the required files Null (default)-automatic detection, string-Basic path to be added manually
Files Some of the files that the link calls in JavaScript, used when renaming these files (CSS, pictures, and so on) Children:js.lightbox, Js.colorblend, Css.lightbox, Images.prev, Images.next, Images.blank, images.loading
Text Some of the text contained in JavaScript, used when you want to translate Children:image, of, Close, closeinfo, download, Help.close, Help.interact, About.text, About.title, About.link
Keys A JavaScript file contains shortcuts that you use when you want to redefine shortcut keys. Children:close, Prev, next
Opacity Cover the transparency of the background layer 0.9 (default, 90% transparency), value
Padding Padding values around the picture Null (default)-automatic detection, integer-padding integer value
Rel The rel value to be searched on the link to apply the Lightbox effect "Lightbox" (default)-Default search Rel= "Lightbox", string-rel string to be searched
Auto_relify Does an initialization scan of REL be automatically detected lightboxes True (default), False

v. Application of Parameters
There are two ways to use these parameters: one is through the JS link, but through the JS code. For example, in the following example, two methods are used to hide the reverse link in a JavaScript file and then change the "picture" text in the file to "photo".
1. Link Modification method
Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery.lightbox.min.js?show_linkback=false&text.image=photo" > </script>

2. Code modification Method (construct)
Copy Code code as follows:

<script type= "Text/javascript" src= "Jquery_lightbox/js/jquery.lightbox.packed.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$. Lightbox.construct ({
Show_linkback:false,
Text: {
Image: ' Photo '
}
});
});</script>


Online Demo Address http://demo.jb51.net/js/jquery_lightbox/index.html
Package Download Address http://www.jb51.net/jiaoben/26042.html

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.