-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgallery.html
More file actions
152 lines (128 loc) · 18.1 KB
/
gallery.html
File metadata and controls
152 lines (128 loc) · 18.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Our Photos</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/gallery.css">
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="gallery/default-skin/default-skin.css">
<script src="js/photoswipe.js"></script>
<script src="js/photoswipe-ui-default.js"></script>
<script src="js/gallery.js"></script>
</head>
<body>
<div id="container">
<h1>Our Gallery</h1>
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2666.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2666.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">First sunset @Newport Beach</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2699.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_2699.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Walk of Fame</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2716.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2716.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Michael Jackson</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2731.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2731.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Getty Center</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2736.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2736.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Glance of LA from Getty Center</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2803.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2803.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Neverland</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2811.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2811.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">What r u looking at?</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2816.JPG" itemprop="contentUrl" data-size="3264x2448"><img src = "gallery/thumb/IMG_2816.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">To MJ</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2822.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2822.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Feeding birds @Santa Babara Beach</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2840.JPG" itemprop="contentUrl" data-size="1932x2576"><img src = "gallery/thumb/IMG_2840.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Selfie @Santa Babara Beach</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2860.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_2860.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Kidnaped a giant bear</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2917.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_2917.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Cayenne -- Goal of next five years!</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2941.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_2941.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Girl with a dog...</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2960.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_2960.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Stamps from LA auto show</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2964.JPG" itemprop="contentUrl" data-size="1932x1932"><img src = "gallery/thumb/IMG_2964.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Selfie @some beach</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2986.JPG" itemprop="contentUrl" data-size="960x1280"><img src = "gallery/thumb/IMG_2986.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">A man and a dog</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3002.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_3002.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Sleepless night on Thanksgiving day</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3022.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_3022.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Sunrise @Newport Beach</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3027.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3027.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Santa Claus @South Coast Plaza</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3068.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3068.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Merry Christmas!</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3166.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3166.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Pairs of prawns</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/cat.jpg" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/cat.jpg"itemprop="thumbnail"/></a><figcaption itemprop="caption description">A cat</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/dog.jpg" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/dog.jpg"itemprop="thumbnail"/></a><figcaption itemprop="caption description">A dog</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3175.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3175.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Back @Newport Beach</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3276.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3276.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Stanford University</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3285.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_3285.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@San Francisco</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3343.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3343.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Alcatraz island</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3412.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3412.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Golden Gate Bridge</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3553.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_3553.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">An unsuccessful jump...</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3780.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_3780.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Midway Aircraft Carrier</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3913.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_3913.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">A century wheel</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3937.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_3937.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Salt egg with tofu...</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3947.JPG" itemprop="contentUrl" data-size="3024x3024"><img src = "gallery/thumb/IMG_3947.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Big dish chicken</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_3979.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_3979.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">New Year's Eve @Grand Park</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4006.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_4006.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Beverly Hills</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4007.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_4007.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Some anonymous mountain</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4012.JPG" itemprop="contentUrl" data-size="3024x3024"><img src = "gallery/thumb/IMG_4012.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">A steamed fish</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4021.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_4021.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Getty Villa</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4044.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_4044.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">@Santa Monica Beach</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4070.JPG" itemprop="contentUrl" data-size="3024x4032"><img src = "gallery/thumb/IMG_4070.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Rectanglized...</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4089.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_4089.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Night view of LA @Griffith Observatory</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4106.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_4106.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Happy birthday!</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_0473.JPG" itemprop="contentUrl" data-size="2576x1932"><img src = "gallery/thumb/IMG_0473.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Grand Canyon</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_1969.JPG" itemprop="contentUrl" data-size="5184x3456"><img src = "gallery/thumb/IMG_1969.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Yosemite</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_2058.JPG" itemprop="contentUrl" data-size="5184x3456"><img src = "gallery/thumb/IMG_2058.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Mono Lake</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_4672.JPG" itemprop="contentUrl" data-size="3088x2316"><img src = "gallery/thumb/IMG_4672.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Lisbon</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_0139.JPG" itemprop="contentUrl" data-size="3088x2320"><img src = "gallery/thumb/IMG_0139.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Selfie</figcaption></figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="gallery/photos/IMG_0477.JPG" itemprop="contentUrl" data-size="4032x3024"><img src = "gallery/thumb/IMG_0477.JPG"itemprop="thumbnail"/></a><figcaption itemprop="caption description">Death Valley</figcaption></figure>
</div>
<div class="container">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close"
title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs"
title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom"
title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div
class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left"
title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right"
title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//execute above function
initPhotoSwipeFromDOM('.my-gallery');
</script>
</html>