Click to expand tests
This commit is contained in:
@@ -30,6 +30,7 @@
|
|||||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
|
<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>
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
<script src="/javascripts/custom.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -283,7 +284,9 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-6 col-md-3">
|
<div class="col-xs-6 col-md-3">
|
||||||
<a href="#" class="thumbnail">
|
<a href="#" class="thumbnail">
|
||||||
<img src="/images/art/ai/clock1grad.jpg" alt="...">
|
<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>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-md-3">
|
<div class="col-xs-6 col-md-3">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.media {
|
.media {
|
||||||
width:60px;
|
width: 60px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 200px;
|
top: 200px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
@@ -15,5 +15,22 @@
|
|||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
#leftcolumn { width: 50%; float: left}
|
#leftcolumn {
|
||||||
#rightcolumn { width: 50%; float: right}
|
width: 50%;
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
#rightcolumn {
|
||||||
|
width: 50%;
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
#largeImgPanel {
|
||||||
|
text-align: center;
|
||||||
|
visibility: hidden;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(100, 100, 100, 0.5);
|
||||||
|
}
|
||||||
18
javascripts/custom.js
Normal file
18
javascripts/custom.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
function showImage(imgName) {
|
||||||
|
document.getElementById('largeImg').src = imgName;
|
||||||
|
showLargeImagePanel();
|
||||||
|
unselectAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showLargeImagePanel() {
|
||||||
|
document.getElementById('largeImgPanel').style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
|
||||||
|
function unselectAll() {
|
||||||
|
if (document.selection) document.selection.empty();
|
||||||
|
if (window.getSelection) window.getSelection().removeAllRanges();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideMe(obj) {
|
||||||
|
obj.style.visibility = 'hidden';
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user