-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
181 lines (156 loc) · 8.29 KB
/
index.php
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<?php
$pageTitle = "KG Developments";
$section = "paintings";
include('includes/header.php'); ?>
<h3>Welcome to Kristina Gillooly's Website! Enjoy!</h3>
<h4>Please click on image to see a larger view!</h4>
<!-- Modal Begins here with bootstrap carousel placed within the modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Art Gallery - Click on the red arrows to view more images!</h4>
</div>
<!-- carousel slider element inside a modal window and modal window shows up when the thumbnails are clicked-->
<div class="modal-body">
<div id="myCarousel" class="carousel slide jumbotron">
<div class="container">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
<li data-target="#myCarousel" data-slide-to="9"></li>
<li data-target="#myCarousel" data-slide-to="10"></li>
<li data-target="#myCarousel" data-slide-to="11"></li>
<li data-target="#myCarousel" data-slide-to="12"></li>
<li data-target="#myCarousel" data-slide-to="13"></li>
<li data-target="#myCarousel" data-slide-to="14"></li>
<li data-target="#myCarousel" data-slide-to="15"></li>
<li data-target="#myCarousel" data-slide-to="16"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<p>Pink 12" X 16"</p>
<img src="img/pink44.jpg" alt="pink blend of acrylic paint on canvas">
</div>
<div class="item">
<p>Anniversary 5" X 6.5"</p>
<img src="img/andys22.jpg" alt="paining for my husband">
</div>
<div class="item">
<p>Explosive 14.5" X 20"</p>
<img src="img/flower23.jpg" alt="flowers pained ironically in acrylic black and green paint">
</div>
<div class="item">
<p>Storm 5" X 6"</p>
<img src="img/brown100.jpg" alt="blend of colors with primarily brown acrylic on glass">
</div>
<div class="item">
<p>Windows 20" X 16"</p>
<img src="img/red24.jpg" alt="painting with blues, whites, and red acrylic on canvas">
</div>
<div class="item">
<p>11" X 14"</p>
<img src="img/teal100.jpg" alt="teal acrylic paint dominates the canvas">
</div>
<div class="item">
<p>Bug View 8" X 10"</p>
<img src="img/bugview25.jpg" alt="photograph of a bench from a bugs view">
</div>
<div class="item">
<p>Multicultural Collage 12" X 12"</p>
<img src="img/collage100.jpg" alt="symetrical multicultural collage">
</div>
<div class="item">
<p>Textures 8" X 10"</p>
<img src="img/bucket100.jpg" alt="photograph of a bucket on grain.">
</div>
<div class="item">
<p>8" X 10"</p>
<img src="img/NAdance100.jpg" : alt="photograph of a native american dance">
</div>
<div class="item">
<p>6" X 6"</p>
<img src="img/washed100.jpg" alt="acrylic of black and red and green on glass">
</div>
<div class="item">
<p>Raindrops 48" X 36"</p>
<img src="img/raindrops.jpg" alt="mixed media painting on wood">
</div>
<div class="item">
<p>Spring 9.5" X 7.5"</p>
<img src="img/spring.jpg" alt="acrylic on glass spring">
</div>
<div class="item">
<p>4" X 6"</p>
<img src="img/sun.jpg" alt="acrylic on glass sun">
</div>
<div class="item">
<p>5" x 7"</p>
<img src="img/cc.jpg" alt="acrylic on glass cotton candy colors">
</div>
<div class="item">
<p>8" X 10"</p>
<img src="img/spin.jpg" alt="acrylic on canvas">
</div>
<div class="item">
<p>14" X 11"</p>
<img src="img/orangeblue.jpg" alt="acrylic on canvas">
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Thumnails of images listed here in unordered list with bootstrap styling
When user clicks on the thumbnail, it calls the modal with the slider in it-->
<ul class="my-thumbnails">
<li><img src="img/pink44.jpg" alt="pink blend of acrylic paint on canvas" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/andys22.jpg" alt="painint for my husband" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/flower23.jpg" alt="flowers pained ironically in acrylic black and green paint" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/brown100.jpg" alt="blend of colors with primarily brown acrylic on glass" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/red24.jpg" alt="p ainting with blues, whites, and red acrylic on canvas" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/teal100.jpg" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/bugview25.jpg" alt="photograph of a bench from a bugs view" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/collage100.jpg" alt="symetrical multicultural collage" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/bucket100.jpg" alt="photograph of a bucket on grain." data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/NAdance100.jpg" alt="photograph of a native american dance" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/washed100.jpg" alt="acrylic of black and red and green on glass" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/raindrops.jpg" alt="mixed media painting on wood" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/spring.jpg" alt="acrylic on glass" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/sun.jpg" alt="acrylic on glass" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/cc.jpg" alt="acrylic on glass" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/spin.jpg" alt="acrylic on canvas" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
<li><img src="img/orangeblue.jpg" alt="acrylic on canvas" data-toggle="modal" data-target="#myModal" class="img thumbnail"></li>
</ul>
<!-- Javascript used so the user can click on thumbnail image and that image will appear in carousel slider.-->
<script>
$('[data-toggle="modal"]').on('click', function(){
var position = $('.my-thumbnails li').index($(this).parent()),
image = $('.carousel-inner > div').get(position),
indicator = $('.carousel-indicators > li').get(position);
$('.carousel-inner > div').removeClass('active');
$('.carousel-indicators > li').removeClass('active');
$(image).addClass('active');
$(indicator).addClass('active');
});
</script>
<?php include('includes/footer.php'); ?>