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 shows the complete effect.Code, Save the following code to an HTML file and open it to preview the effect.
<! 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>
This article reposted from Ke leyi http://www.keleyi.com/a/bjac/141932b419e08101.htm