Convert photographs to be lightboxed

This commit is contained in:
Arona Jones
2015-01-14 09:38:19 +00:00
parent 3da31dd8b7
commit b322e87edc

View File

@@ -12,6 +12,7 @@
<!-- Bootstrap core CSS -->
<link href="/css/art.css" rel="stylesheet">
<link rel="stylesheet" href="/css/custom.css">
<!--<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
@@ -73,128 +74,176 @@
</div>
<h2 style="background-color: #F8ECC2;">I, Me, Mine - Subject Brainstorm</h2>
<img src="/images/art/mindmap.png" width="70%" class="img-rounded" style="border:2px solid #ed8029;">
<img src="/images/art/mindmap.png" width="70%" class="img-rounded bordered">
<h2 style="background-color: #F8ECC2;">Photography</h2>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/1.JPG" class="img-rounded">
<a href="/images/art/photos/1.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/1.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/2.JPG" class="img-rounded">
<a href="/images/art/photos/2.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/2.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/3.JPG" class="img-rounded">
<a href="/images/art/photos/3.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/3.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/4.JPG" class="img-rounded">
<a href="/images/art/photos/4.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/4.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/5.JPG" class="img-rounded">
<a href="/images/art/photos/5.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/5.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/6.JPG" class="img-rounded">
<a href="/images/art/photos/6.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/6.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/7.JPG" class="img-rounded">
<a href="/images/art/photos/7.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/7.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/8.JPG" class="img-rounded">
<a href="/images/art/photos/8.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/8.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/9.JPG" class="img-rounded">
<a href="/images/art/photos/9.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/9.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/10.JPG" class="img-rounded">
<a href="/images/art/photos/10.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/10.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/11.JPG" class="img-rounded">
<a href="/images/art/photos/11.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/11.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/12.JPG" class="img-rounded">
<a href="/images/art/photos/12.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/12.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/13.JPG" class="img-rounded">
<a href="/images/art/photos/13.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/13.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/14.JPG" class="img-rounded">
<a href="/images/art/photos/14.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/14.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/15.JPG" class="img-rounded">
<a href="/images/art/photos/15.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/15.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/16.JPG" class="img-rounded">
<a href="/images/art/photos/16.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/16.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/17.JPG" class="img-rounded">
<a href="/images/art/photos/16.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/16.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/18.JPG" class="img-rounded">
<a href="/images/art/photos/17.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/17.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/19.JPG" class="img-rounded">
<a href="/images/art/photos/18.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/18.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/20.JPG" class="img-rounded">
<a href="/images/art/photos/19.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/19.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/21.JPG" class="img-rounded">
<a href="/images/art/photos/20.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/20.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/22.JPG" class="img-rounded">
<a href="/images/art/photos/21.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/21.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/23.JPG" class="img-rounded">
<a href="/images/art/photos/22.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/22.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/photos/24.JPG" class="img-rounded">
<a href="/images/art/photos/23.JPG" alt="..." data-lightbox="photos">
<img src="/images/art/photos/23.JPG" alt="..." class="img-rounded" width="150px">
</a>
</a>
</div>
</div>