-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (74 loc) · 4.42 KB
/
index.html
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
xml:lang="en" >
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Slideshow with animated caption demo</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Kien Tran" />
<link rel="stylesheet" href="css/photo-slideshow-caption.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="js/photo-slideshow-caption.js"></script>
</head>
<body>
<div id="container">
<div id="slideshow-box">
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
<div id='slides'>
<div class='slide'>
<a href="#">
<img src="images/picture1.jpg" alt="Picture 1" />
<span class="title orange">Lorem ipsum dolor sit amet
<span class="subtitle">Etiam ut nulla vel ante condimentum luctus</span></span>
</a>
</div>
<div class='slide'>
<a href="#">
<img src="images/picture2.jpg" alt="Picture 2" />
<span class="title purple">Lorem ipsum dolor sit amet
<span class="subtitle">Etiam ut nulla vel ante condimentum luctus</span></span>
</a>
</div>
<div class='slide'>
<a href="#">
<img src="images/picture3.jpg" alt="Picture 3" />
<span class="title green">Lorem ipsum dolor sit amet
<span class="subtitle">Etiam ut nulla vel ante condimentum luctus</span></span>
</a>
</div>
<div class='slide'>
<a href="#">
<img src="images/picture4.jpg" alt="Picture 4" />
<span class="title blue">Lorem ipsum dolor sit amet
<span class="subtitle">Etiam ut nulla vel ante condimentum luctus</span></span>
</a>
</div>
<div class='slide'>
<a href="#">
<img src="images/picture5.jpg" alt="Picture 5" />
<span class="title red">Lorem ipsum dolor sit amet
<span class="subtitle">Etiam ut nulla vel ante condimentum luctus</span></span>
</a>
</div>
</div>
</div>
<h2>Project Page</h2>
<a href='http://github.com/kientran/photo-slideshow-captions/'>Github Repository</a>
<h2>Photo Credits</h2>
RED <div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/karateputter/183047455/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/karateputter/">http://www.flickr.com/photos/karateputter/</a> / <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC BY-NC-SA 2.0</a></div>
GREEN <div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/pandiyan/200274939/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/pandiyan/">http://www.flickr.com/photos/pandiyan/</a> / <a rel="license" href="http://creativecommons.org/licenses/by-nc/2.0/">CC BY-NC 2.0</a></div>
ORANGE <div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/jbe/2545612802/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/jbe/">http://www.flickr.com/photos/jbe/</a> / <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC BY-NC-SA 2.0</a></div>
PURPLE <div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/jimmy_macdonald/504953757/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/jimmy_macdonald/">http://www.flickr.com/photos/jimmy_macdonald/</a> / <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a></div>
BLUE <div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/josefstuefer/34454917/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/josefstuefer/">http://www.flickr.com/photos/josefstuefer/</a> / <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a></div>
</div>
</body>
</html>