Home > Developer > JavaScript
First download the JavaScript package:
Http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip
<Html>
<Head>
// Modify the following path based on the downloaded JavaScript package
<Link rel = "stylesheet" type = "text/css" href = "js/yui/assets/skins/sam/container.css"/>
<Script type = "text/javascript" src = "js/yui/yahoo-dom-event/yahoo-dom-event.js"> </script>
<Script type = "text/javascript" src = "js/yui/dragdrop/dragdrop-min.js"> </script>
<Script type = "text/javascript" src = "js/yui/container/container-min.js"> </script>
<Script type = "text/javascript" src = "js/lightbox/Lightbox. js"> </script>
<Script type = "text/javascript">...
// Load lightbox
Init = function ()...{
// Create a data source containing the original image
// Usage: Image ID: {url: "original image path", title: "title "}
Var dataSource = ...{
Id_1:... {url: "image-big.jpg", title: 'test image '}
};
// Create a Lightbox object:
// Usage:
// ImageBase: Lightbox. js path
// DataSource: Data Source
Var lightbox = new YAHOO.com. thecodecentral. Lightbox (...{
ImageBase: 'js/lightbox ',
DataSource: dataSource
});
}
// Keep this line intact
YAHOO. util. Event. on (window, 'load', init );
</Script>
</Head>
<Body>
// Add a preview Image
// Usage:
// Note: Keep the image ID consistent with the data source ID
</Body>
</Html>
Code without annotation:
<Html>
<Head>
<Link rel = "stylesheet" type = "text/css" href = "js/yui/assets/skins/sam/container.css"/>
<Script type = "text/javascript" src = "js/yui/yahoo-dom-event/yahoo-dom-event.js"> </script>
<Script type = "text/javascript" src = "js/yui/dragdrop/dragdrop-min.js"> </script>
<Script type = "text/javascript" src = "js/yui/container/container-min.js"> </script>
<Script type = "text/javascript" src = "js/lightbox/Lightbox. js"> </script>
<Script type = "text/javascript">
Init = function (){
Var dataSource = {
Id_1: {url: "image-big.jpg", title: 'test image '}
};
Var lightbox = new YAHOO.com. thecodecentral. Lightbox ({
ImageBase: 'js/lightbox ',
DataSource: dataSource
});
}
YAHOO. util. Event. on (window, 'load', init );
</Script>
</Head>
<Body>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
