In the past, images were used as a tool of mootools. It feels good, but mootools conflicts with jquery, so I found a jquery plug-in and it feels good.
Shadowbox supports images, videos, HTML, frame, and Ajax.
According to the demo on the official website, I wrote several examples:
1. Simple Image Display
<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> New web project </title> <br/> <LINK rel =" stylesheet "type =" text/CSS "href = "JS/shadowbox-3.0.3/shadowbox.css" mce_href = "JS/shadowbox-3.0.3/shadowbox.css"> <br/> <MCE: script Type = "text/JavaScript" src = "JS/jquery/jquery-1.4.2.js" mce_src = "JS/jquery/jquery-1.4. 2. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src =" JS/shadowbox-3.0.3/shadowbox. JS "mce_src =" JS/shadowbox-3.0.3/shadowbox. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> // initialization <br/> shadowbox. init ({}); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <! -- Rel = "shadowbox" associate shadowbox --> <br/> <a href = "images/1.jpg" mce_href =" images/1.jpg" rel = "shadowbox"> image 1 </a> <br/> <a href = "images/2.jpg" mce_href =" images/2.jpg" rel = "shadowbox"> Image 2 </a> <br/> <a href = "Images /3.jpg" mce_href = "images/3.jpg" rel =" shadowbox "> picture 3 </a> <br/> <a href =" images/4.jpg" mce_href = "images/4.jpg" rel =" rel = ""shadowbox"> figure 4 </a> <br/> <a href = "images/5.jpg" mce_href =" images/5.jpg" rel = "shadowbox"> Figure 5 </a> <br/> </body> <br/> </ptml> <br/>
2. Some parameter settings
<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> New web project </title> <br/> <LINK rel =" stylesheet "type =" text/CSS "href = "JS/shadowbox-3.0.3/shadowbox.css" mce_href = "JS/shadowbox-3.0.3/shadowbox.css"> <br/> <MCE: script Type = "text/JavaScript" src = "JS/jquery/jquery-1.4.2.js" mce_src = "JS/jquery/jquery-1.4. 2. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src =" JS/shadowbox-3.0.3/shadowbox. JS "mce_src =" JS/shadowbox-3.0.3/shadowbox. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> shadowbox. init ({<br/> handleoversize: "drag", // when the picture is too large, you can drag your legs <br/> // handleoversize: "NONE ", // when the image size is too large, no extra parts are displayed. <br/> // handleoversize: "resize", // default: automatically adjust the image size <br/> modal: true // set this true to prevent mouse clicks on the overlay from closing shadowbox. ults to false. <br/> // true: When you click a non-image area, no response is displayed. False: When you click a non-image area, the image effect disappears. <br/> }); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <! -- Set the title --> <br/> <a href = "images/1.jpg" mce_href =" images/1.jpg" rel = "shadowbox" Title = "Image 1"> image 1 </> <br/> <a href = "images/2.jpg" mce_href =" images/2.jpg" rel = "shadowbox" Title = "Image 2"> Image 2 </a> <br/> <! -- Set the display size --> <br/> <a href = "images/3.jpg" mce_href =" images/3.jpg" rel = "shadowbox; Height = 200; width = 320 "> picture 3 </a> <br/> <a href =" images/4.jpg" mce_href = "images/4.jpg" rel =" shadowbox "> Picture 4 </> <br/> <a href = "images/5.jpg" mce_href =" images/5.jpg" rel = "shadowbox"> image 5 </a> <br/> </body> <br/> </ptml>
3. Image Group, slide Effect
<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> New web project </title> <br/> <LINK rel =" stylesheet "type =" text/CSS "href = "JS/shadowbox-3.0.3/shadowbox.css" mce_href = "JS/shadowbox-3.0.3/shadowbox.css"> <br/> <MCE: script Type = "text/JavaScript" src = "JS/jquery/jquery-1.4.2.js" mce_src = "JS/jquery/jquery-1.4. 2. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src =" JS/shadowbox-3.0.3/shadowbox. JS "mce_src =" JS/shadowbox-3.0.3/shadowbox. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> shadowbox. init ({<br/>}); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <! -- Shadowbox [vacation]: Set the image group, slide effect --> <br/> <a href = "images/1.jpg" mce_href =" images/1.jpg" rel = "shadowbox [vacation]"> Picture 1 </a> <br/> <a href = "images/2.jpg" mce_href =" images/2.jpg" rel = "shadowbox [vacation]"> Image 2 </a> <br/> <a href = "Images /3.jpg" mce_href = "images/3.jpg" rel =" shadowbox [vacation] "> picture 3 </a> <br/> <a href =" images/4.jpg" mce_href = "images/ 4.jpg" rel = "shadowbox [vacation]"> figure 4 </a> <br/> <a href = "images/5.jpg" mce_href =" images/5.jpg" rel = "shadowbox [vacation] "> image 5 </a> <br/> </body> <br/> </ptml>
4. Video (for online video addresses, select the FLV address or SwF address)
<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> New web project </title> <br/> <LINK rel =" stylesheet "type =" text/CSS "href = "JS/shadowbox-3.0.3/shadowbox.css" mce_href = "JS/shadowbox-3.0.3/shadowbox.css"> <br/> <MCE: script Type = "text/JavaScript" src = "JS/jquery/jquery-1.4.2.js" mce_src = "JS/jquery/jquery-1.4. 2. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src =" JS/shadowbox-3.0.3/shadowbox. JS "mce_src =" JS/shadowbox-3.0.3/shadowbox. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> shadowbox. init ({}); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <a href = "videos/sample. FLV "mce_href =" videos/sample. FLV "rel =" shadowbox; width = 320; Height = 240 "> Local FLV video </a> <br/> <a href =" videos/sample. mov "mce_href =" videos/sample. mov "rel =" shadowbox; width = 320; height = 240 "> Local mov video </a> <br/> <a href =" videos/sample.mp4 "mce_href =" videos/sample.mp4 "rel =" shadowbox; width = 320; Height = 240 "> Local MP4 video </a> <br/> <a href =" http://player.youku.com/player.php/sid/XMjA5Nzg1ODM2/v.swf "mce_href =" http://player.youku.com/player.php/sid/XMjA5Nzg1ODM2/v.swf "rel =" shadowbox; width = 480; Height = 400 "> youku video </a> <br/> <a href =" http://www.tudou.com/l/Ezhl3cOwdBs "mce_href =" http://www.tudou.com/l/Ezhl3cOwdBs "rel =" shadowbox; width = 320; height = 240 "> Tudou video </a> <br/> </body> <br/> </ptml>
5. Mix, slide effect, images, videos, html
<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> New web project </title> <br/> <LINK rel =" stylesheet "type =" text/CSS "href = "JS/shadowbox-3.0.3/shadowbox.css" mce_href = "JS/shadowbox-3.0.3/shadowbox.css"> <br/> <MCE: script Type = "text/JavaScript" src = "JS/jquery/jquery-1.4.2.js" mce_src = "JS/jquery/jquery-1.4. 2. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src =" JS/shadowbox-3.0.3/shadowbox. JS "mce_src =" JS/shadowbox-3.0.3/shadowbox. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> shadowbox. init ({<br/>}); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <a href = "images/1.jpg" mce_href =" images/1.jpg" rel = "shadowbox [mixed] "> image 1 </a> <br/> <a href =" images/2.jpg" mce_href = "images/2.jpg" rel =" shadowbox [mixed] "> Image 2 </A> <br/> <a href = "videos/sample. FLV "mce_href =" videos/sample. FLV "rel =" shadowbox [mixed]; width = 320; height = 240 "> Local FLV video </a> <br/> <a href =" http://player.youku.com/player.php/sid/XMjA5Nzg1ODM2/v.swf "mce_href =" http://player.youku.com/player.php/sid/XMjA5Nzg1ODM2/v.swf "rel =" shadowbox [mixed]; width = 480; height = 400 "> youku video </a> <br/> <a href =" http://www.baidu.com "mce_href =" http://www.baidu.com "rel =" shadowbox [mixed] "> youku video </ a> <br/> </body> <br/> </ptml>
There is also Ajax. This is an advanced function. you must first understand the shadowbox function before writing it out.
I have limited technology. I will study jquery and Ajax later.
In general, it's not bad. It's enough.
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
