In this example, the image group browsing layer is displayed using the ColorBox plug-in of Jquery. Effect preview URL: http://www.keleyi.com/keleyi/phtml/colorbox/
The following is the complete code for this effect. Save the following code to an html file and open it to preview the effect.Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Use ColorBox to pop up the image group browsing layer </title>
<Link rel = "stylesheet" href = "http://www.keleyi.com/keleyi/phtml/colorbox/colorbox.css"/>
<Script type = "text/javascript" src = "http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"> </script>
<Script type = "text/javascript" src = "http://www.keleyi.com/keleyi/phtml/colorbox/jquery.colorbox-min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Keleyi_com"). colorbox ({rel: 'group1', transition: "none", innerWidth: '700px '});
});
</Script>
</Head>
<Body>
<Div style = "width: 400px; margin-left: auto; margin-right: auto;">
Click the link below to display the image group at the pop-up layer.
<P> <a class = "keleyi_com" href = "http://www.keleyi.com/keleyi/phtml/picnext/images/k02.jpg" title = "Chrysanthemum"> Picture 1 </a> </p>
<P> <a class = "keleyi_com" href = "http://www.keleyi.com/keleyi/phtml/picnext/images/k03.jpg" title = "happy"> picture 2 </a> </p>
<P> <a class = "keleyi_com" href = "http://www.keleyi.com/keleyi/phtml/picnext/images/k05.jpg" title = ""> picture 3 </a> </p>
<P> <a class = "keleyi_com" href = "http://www.keleyi.com/keleyi/phtml/picqiehuan/p3.jpg" title = "dream"> figure 4 </a> </p>
</Div> </body>
</Html>