-
Notifications
You must be signed in to change notification settings - Fork 0
/
basic.htm
136 lines (125 loc) · 5.29 KB
/
basic.htm
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Camera | a free jQuery slideshow by Pixedelic</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta name="description" content="Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
//
// Styles
//
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<link rel='stylesheet' id='camera-css' href='css/camera.css' type='text/css' media='all'>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
a {
color: #09f;
}
a:hover {
text-decoration: none;
}
#back_to_camera {
clear: both;
display: block;
height: 80px;
line-height: 40px;
padding: 20px;
}
.fluid_container {
margin: 0 auto;
max-width: 1000px;
width: 90%;
}
</style>
</head>
<body>
<div class="fluid_container">
<a href="index.html" class="btn btn-danger" style="margin-top:1%;margin-left:45%;">Home</a>
<p>Photo Gallery</p>
<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
<div data-thumb="images/slides/thumbs/awards.jpg" data-src="images/slides/awards.jpg">
<div class="camera_caption fadeFromBottom">
Award Ceremony: <em>Best Team Work Award Winners</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/walmart.jpg" data-src="images/slides/walmart.jpg">
<div class="camera_caption fadeFromBottom">
Walmart Trip: <em>ICC members volunteering to take newbies to walmart</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/backstage.jpg" data-src="images/slides/backstage.jpg">
<div class="camera_caption fadeFromBottom">
Backstage Volunteering: <em>Few Backstage Volunteers</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/daawat.jpg" data-src="images/slides/daawat.jpg">
<div class="camera_caption fadeFromBottom">
Daawat: <em>Diwali Celebration</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/holi.jpg" data-src="images/slides/holi.jpg">
<div class="camera_caption fadeFromBottom">
Holi: <em>UTA students having fun with colors</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/independence.jpg" data-src="images/slides/independence.jpg">
<div class="camera_caption fadeFromBottom">
Independence Day: <em>Independence Party Fun</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/janmasthami.jpg" data-src="images/slides/janmasthami.jpg">
<div class="camera_caption fadeFromBottom">
Janmasthami: <em> Dandiya Dance in Progress</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/outing.jpg" data-src="images/slides/outing.jpg">
<div class="camera_caption fadeFromBottom">
Volunteering: <em>another volunteering service in progress</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/service.jpg" data-src="images/slides/service.jpg">
<div class="camera_caption fadeFromBottom">
Volunteering: <em>Volunteering Service at Ekta Mandir</em>
</div>
</div>
<div data-thumb="images/slides/thumbs/swaagat.jpg" data-src="images/slides/swaagat.jpg">
<div class="camera_caption fadeFromBottom">
Swaagat: <em>Welcoming the new year with Swaagat celebration</em>
</div>
</div>
</div><!-- #camera_wrap_1 -->
</div><!-- .fluid_container -->
<div style="clear:both; display:block; height:100px"></div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
//
// Scripts
//
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type='text/javascript' src='scripts/jquery.min.js'></script>
<script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/camera.min.js'></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
thumbnails: true
});
jQuery('#camera_wrap_2').camera({
height: '400px',
loader: 'bar',
pagination: false,
thumbnails: true
});
});
</script>
</body>
</html>