Add Lightbox

This commit is contained in:
Arona Jones
2014-11-14 14:27:34 +00:00
parent 7b4d1a6cad
commit 1746ca97e5
14 changed files with 624 additions and 39 deletions

View File

@@ -13,6 +13,10 @@
<!-- 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">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- compiled and minified Bootstrap JavaScript -->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<style>
@@ -30,7 +34,8 @@
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/javascripts/custom.js"></script>
<script src="/javascripts/lightbox.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />
</head>
<body>
@@ -284,28 +289,23 @@
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/ai/clock1grad.jpg" alt="..." style="cursor:pointer" onclick="showImage('/images/art/ai/clock1grad.jpg');">
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;"></div>
<img src="/images/art/ai/clock1grad.jpg" alt="..." style="cursor:pointer" data-lightbox="gradiented">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/ai/clock2grad.jpg" alt="...">
<img src="/images/art/ai/clock2grad.jpg" alt="..." data-lightbox="gradiented">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/images/art/ai/clock3grad.jpg" alt="...">
<img src="/images/art/ai/clock3grad.jpg" alt="..." data-lightbox="gradiented">
</a>
</div>
</div>
<img src="/images/art/ai/clock3grad.jpg" alt="..." data-lightbox="gradiented">
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- compiled and minified Bootstrap JavaScript -->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>