Replace the carousel with a thumbnail grid
This commit is contained in:
Arona Jones
330
art/record.html
330
art/record.html
@@ -12,7 +12,7 @@
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/css/art.css" rel="stylesheet">
|
||||
<!--<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">-->
|
||||
<!--<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>
|
||||
<script src="/javascripts/lightbox.js"></script>
|
||||
@@ -74,215 +74,127 @@
|
||||
<img src="/images/art/mindmap.png" width="70%" border="5">
|
||||
|
||||
<h2>Photography</h2>
|
||||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="9"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="10"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="11"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="12"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="13"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="14"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="15"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="16"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="17"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="18"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="19"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="20"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="21"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="22"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="23"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="24"></li>
|
||||
</ol>
|
||||
|
||||
<!-- Wrapper for slides -->
|
||||
<div class="carousel-inner">
|
||||
|
||||
<div class="item active">
|
||||
<img src="/images/art/photos/1.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/2.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/3.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/4.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/5.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/6.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/7.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/8.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/9.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/10.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/11.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/12.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/13.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/14.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/15.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/16.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/17.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/18.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/19.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/20.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/photos/21.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/22.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/23.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/images/art/photos/24.JPG" alt="...">
|
||||
<div class="carousel-caption">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
Photos
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/2.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/4.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/6.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/8.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/10.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/12.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/14.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/16.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/18.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/20.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/22.JPG" class="img-rounded">
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="/images/art/photos/24.JPG" class="img-rounded">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
</a>
|
||||
</div>
|
||||
<h1>Illustrator</h1>
|
||||
<h2>Gradiented Images</h2>
|
||||
|
||||
Reference in New Issue
Block a user