SoFunction
Updated on 2025-04-12

JavaScript imitating the image layer of shutdown effect

First download the JavaScript package:
/wp-content/uploads/2007/08/
<html>
<head>
//Modify the following path according to the downloaded JavaScript package
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/" />
<script type="text/javascript" src="js/yui/yahoo-dom-event/"></script>
<script type="text/javascript" src="js/yui/dragdrop/"></script>
<script type="text/javascript" src="js/yui/container/"></script>
<script type="text/javascript" src="js/lightbox/"></script>
<script type="text/javascript">...

//Load lightbox
init = function()...{
//Create a data source with the original picture
//Usage: Image ID: {url: "Original image path", title: "Title" }
var dataSource = ...{
id_1:...{url:"", title: 'test picture'}
};

//Create Lightbox object:
//usage:
//imageBase: path
//dataSource: Data Source
var lightbox = new (...{
imageBase:'js/lightbox',
dataSource: dataSource
});
}
//This line remains the same
(window, 'load', init);
</script>

</head>
<body>
//Add a preview picture
//Usage: <img src="Preview.jpg" />
//Note: Keep the image ID and data source ID consistent
<img src="" />
</body>
</html>
No annotations for the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/" />
<script type="text/javascript" src="js/yui/yahoo-dom-event/"></script>
<script type="text/javascript" src="js/yui/dragdrop/"></script>
<script type="text/javascript" src="js/yui/container/"></script>
<script type="text/javascript" src="js/lightbox/"></script>
<script type="text/javascript">

init = function(){
var dataSource = {
id_1:{url:"", title: 'test picture'}
};

var lightbox = new ({
imageBase:'js/lightbox',
dataSource: dataSource
});
}

(window, 'load', init);
</script>

</head>
<body>
<img src="" />
</body>
</html>