下载地址:http://brutaldesign.github.io/swipebox/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
< html  lang = "en" >
< head >
   < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8" >
   < meta  name = "viewport"  content = "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
   < meta  name = "apple-mobile-web-app-capable"  content = "yes" >
   < meta  name = "apple-mobile-web-app-status-bar-style"  content = "black" >
   < title >Demo</ title >
 
 
   < link  rel = "stylesheet"  href = "css/swipebox.min.css" />
 
   < script  src = "jslib/jquery-1.9.0.js" ></ script >
   < script  src = "jslib/jquery.swipebox.min.js" ></ script >
 
   < style  type = "text/css" >
       div{font-size:0;
         width:500px;
         height:500px;
         display:inline-block;
       }
 
       div img{
           height:50%;
           width:50%;
       }
   </ style >
 
 
</ head >
 
< body >
 
 
   < div > 
     < a  rel = "gallery-1"  href = "images/image-1.jpg"  class = "swipebox"  title = "image-1" >
         < img  src = "images/image-1.jpg"  alt = "image" >
     </ a >
     < a  rel = "gallery-1"  href = "images/image-2.jpg"  class = "swipebox"  title = "image-2" >
         < img  src = "images/image-2.jpg"  alt = "image" >
     </ a >
     <!-- Gallery 2 -->
     < a  rel = "gallery-1"  href = "images/image-3.jpg"  class = "swipebox"  title = "image-3" >
         < img  src = "images/image-3.jpg"  alt = "image" >
     </ a >
     < a  rel = "gallery-1"  href = "images/image-4.jpg"  class = "swipebox"  title = "image-4" >
         < img  src = "images/image-4.jpg"  alt = "image" >
     </ a >
   </ div >
     < script  type = "text/javascript" >
         $('.swipebox' ).swipebox();
     </ script >
</ body >
</ html >