arona/website
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Replace the carousel with a thumbnail grid

Browse Source
This commit is contained in:
Arona Jones
2014-11-28 14:32:17 +00:00
parent 1ba1a040fc
commit 7140db01a2
1 changed files with 121 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
art/record.html
View File

@@ -12,7 +12,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/css/art.css" rel="stylesheet"> <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) --> <!-- 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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/lightbox.js"></script> <script src="/javascripts/lightbox.js"></script>
@@ -74,215 +74,127 @@
<img src="/images/art/mindmap.png" width="70%" border="5"> <img src="/images/art/mindmap.png" width="70%" border="5">
<h2>Photography</h2> <h2>Photography</h2>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <div class="row">
<!-- Indicators --> <div class="col-xs-6 col-md-3">
<ol class="carousel-indicators"> <a href="#" class="thumbnail">
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li> <img src="/images/art/photos/1.JPG" class="img-rounded">
<li data-target="#carousel-example-generic" data-slide-to="2"></li> </a>
<li data-target="#carousel-example-generic" data-slide-to="3"></li> </div>
<li data-target="#carousel-example-generic" data-slide-to="4"></li> <div class="col-xs-6 col-md-3">
<li data-target="#carousel-example-generic" data-slide-to="5"></li> <a href="#" class="thumbnail">
<li data-target="#carousel-example-generic" data-slide-to="6"></li> <img src="/images/art/photos/2.JPG" class="img-rounded">
<li data-target="#carousel-example-generic" data-slide-to="7"></li> </a>
<li data-target="#carousel-example-generic" data-slide-to="8"></li> </div>
<li data-target="#carousel-example-generic" data-slide-to="9"></li> <div class="col-xs-6 col-md-3">
<li data-target="#carousel-example-generic" data-slide-to="10"></li> <a href="#" class="thumbnail">
<li data-target="#carousel-example-generic" data-slide-to="11"></li> <img src="/images/art/photos/3.JPG" class="img-rounded">
<li data-target="#carousel-example-generic" data-slide-to="12"></li> </a>
<li data-target="#carousel-example-generic" data-slide-to="13"></li> </div>
<li data-target="#carousel-example-generic" data-slide-to="14"></li> <div class="col-xs-6 col-md-3">
<li data-target="#carousel-example-generic" data-slide-to="15"></li> <a href="#" class="thumbnail">
<li data-target="#carousel-example-generic" data-slide-to="16"></li> <img src="/images/art/photos/4.JPG" class="img-rounded">
<li data-target="#carousel-example-generic" data-slide-to="17"></li> </a>
<li data-target="#carousel-example-generic" data-slide-to="18"></li> </div>
<li data-target="#carousel-example-generic" data-slide-to="19"></li> <div class="col-xs-6 col-md-3">
<li data-target="#carousel-example-generic" data-slide-to="20"></li> <a href="#" class="thumbnail">
<li data-target="#carousel-example-generic" data-slide-to="21"></li> <img src="/images/art/photos/5.JPG" class="img-rounded">
<li data-target="#carousel-example-generic" data-slide-to="22"></li> </a>
<li data-target="#carousel-example-generic" data-slide-to="23"></li> </div>
<li data-target="#carousel-example-generic" data-slide-to="24"></li> <div class="col-xs-6 col-md-3">
</ol> <a href="#" class="thumbnail">
<img src="/images/art/photos/6.JPG" class="img-rounded">
<!-- Wrapper for slides --> </a>
<div class="carousel-inner"> </div>
<div class="col-xs-6 col-md-3">
<div class="item active"> <a href="#" class="thumbnail">
<img src="/images/art/photos/1.JPG" alt="..."> <img src="/images/art/photos/7.JPG" class="img-rounded">
<div class="carousel-caption"> </a>
... </div>
</div> <div class="col-xs-6 col-md-3">
</div> <a href="#" class="thumbnail">
<img src="/images/art/photos/8.JPG" class="img-rounded">
<div class="item"> </a>
<img src="/images/art/photos/2.JPG" alt="..."> </div>
<div class="carousel-caption"> <div class="col-xs-6 col-md-3">
... <a href="#" class="thumbnail">
</div> <img src="/images/art/photos/9.JPG" class="img-rounded">
</div> </a>
</div>
<div class="item"> <div class="col-xs-6 col-md-3">
<img src="/images/art/photos/3.JPG" alt="..."> <a href="#" class="thumbnail">
<div class="carousel-caption"> <img src="/images/art/photos/10.JPG" class="img-rounded">
... </a>
</div> </div>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<div class="item"> <img src="/images/art/photos/11.JPG" class="img-rounded">
<img src="/images/art/photos/4.JPG" alt="..."> </a>
<div class="carousel-caption"> </div>
... <div class="col-xs-6 col-md-3">
</div> <a href="#" class="thumbnail">
</div> <img src="/images/art/photos/12.JPG" class="img-rounded">
</a>
<div class="item"> </div>
<img src="/images/art/photos/5.JPG" alt="..."> <div class="col-xs-6 col-md-3">
<div class="carousel-caption"> <a href="#" class="thumbnail">
... <img src="/images/art/photos/13.JPG" class="img-rounded">
</div> </a>
</div> </div>
<div class="col-xs-6 col-md-3">
<div class="item"> <a href="#" class="thumbnail">
<img src="/images/art/photos/6.JPG" alt="..."> <img src="/images/art/photos/14.JPG" class="img-rounded">
<div class="carousel-caption"> </a>
... </div>
</div> <div class="col-xs-6 col-md-3">
</div> <a href="#" class="thumbnail">
<img src="/images/art/photos/15.JPG" class="img-rounded">
<div class="item"> </a>
<img src="/images/art/photos/7.JPG" alt="..."> </div>
<div class="carousel-caption"> <div class="col-xs-6 col-md-3">
... <a href="#" class="thumbnail">
</div> <img src="/images/art/photos/16.JPG" class="img-rounded">
</div> </a>
</div>
<div class="item"> <div class="col-xs-6 col-md-3">
<img src="/images/art/photos/8.JPG" alt="..."> <a href="#" class="thumbnail">
<div class="carousel-caption"> <img src="/images/art/photos/17.JPG" class="img-rounded">
... </a>
</div> </div>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<div class="item"> <img src="/images/art/photos/18.JPG" class="img-rounded">
<img src="/images/art/photos/9.JPG" alt="..."> </a>
<div class="carousel-caption"> </div>
... <div class="col-xs-6 col-md-3">
</div> <a href="#" class="thumbnail">
</div> <img src="/images/art/photos/19.JPG" class="img-rounded">
</a>
<div class="item"> </div>
<img src="/images/art/photos/10.JPG" alt="..."> <div class="col-xs-6 col-md-3">
<div class="carousel-caption"> <a href="#" class="thumbnail">
... <img src="/images/art/photos/20.JPG" class="img-rounded">
</div> </a>
</div> </div>
<div class="col-xs-6 col-md-3">
<div class="item"> <a href="#" class="thumbnail">
<img src="/images/art/photos/11.JPG" alt="..."> <img src="/images/art/photos/21.JPG" class="img-rounded">
<div class="carousel-caption"> </a>
... </div>
</div> <div class="col-xs-6 col-md-3">
</div> <a href="#" class="thumbnail">
<img src="/images/art/photos/22.JPG" class="img-rounded">
<div class="item"> </a>
<img src="/images/art/photos/12.JPG" alt="..."> </div>
<div class="carousel-caption"> <div class="col-xs-6 col-md-3">
... <a href="#" class="thumbnail">
</div> <img src="/images/art/photos/23.JPG" class="img-rounded">
</div> </a>
</div>
<div class="item"> <div class="col-xs-6 col-md-3">
<img src="/images/art/photos/13.JPG" alt="..."> <a href="#" class="thumbnail">
<div class="carousel-caption"> <img src="/images/art/photos/24.JPG" class="img-rounded">
... </a>
</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> </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> </div>
<h1>Illustrator</h1> <h1>Illustrator</h1>
<h2>Gradiented Images</h2> <h2>Gradiented Images</h2>