mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
256 lines
5.6 KiB
HTML
Executable File
256 lines
5.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
|
|
<!--
|
|
|
|
Goals:
|
|
- design a simple navigation system and structure
|
|
- make it animate correctly only via CSS
|
|
|
|
XXX zoom animation is odd...
|
|
|
|
-->
|
|
|
|
<link rel="stylesheet" href="markers.css">
|
|
|
|
<script src="jquery.js"></script>
|
|
<script src="markers.js"></script>
|
|
<script src="ui.js"></script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
$('.image').click(imageClick)
|
|
|
|
fieldSize(300, 200)
|
|
|
|
$('.current.image').click()
|
|
})
|
|
|
|
function imageClick(){
|
|
// set classes...
|
|
$('.current').removeClass('current')
|
|
$(this)
|
|
.addClass('current')
|
|
.parents('.ribbon')
|
|
.addClass('current')
|
|
|
|
// position the field and ribbons...
|
|
centerSquare()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.animated {
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.origin-marker {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 5px;
|
|
height: 5px;
|
|
|
|
border-top: solid blue 1px;
|
|
border-left: solid blue 1px;
|
|
|
|
z-index: 9999;
|
|
}
|
|
.origin-marker-2 {
|
|
position: relative;
|
|
top: -6px;
|
|
left: -6px;
|
|
width: 5px;
|
|
height: 5px;
|
|
|
|
border-bottom: solid blue 1px;
|
|
border-right: solid blue 1px;
|
|
|
|
z-index: 9999;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
border: solid gray 5px;
|
|
width: 300px;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.field {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
/* set this to adjust the vertical position of the view... */
|
|
margin-top: 0px;
|
|
|
|
/* animate */
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-o-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
.ribbon {
|
|
height: 50px;
|
|
/* HACK: need to figure out a way to avoid setting the width here... */
|
|
width: 1000px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
|
|
/* animate */
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.image {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: silver;
|
|
color: white;
|
|
float: left;
|
|
|
|
/* animate */
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.pic {
|
|
background: no-repeat 50% black;
|
|
background-size: contain;
|
|
background-image: url(images/350px/DSC_3501.jpg);
|
|
}
|
|
|
|
.current.image {
|
|
background-color: gray;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
Guides:
|
|
<button onclick="toggleMarkers()">Toggle Guides</button>
|
|
<br>
|
|
|
|
Zoom:
|
|
<button onclick="zoomContainerBy(2)">+</button>
|
|
<button onclick="zoomContainerBy(0.5)">-</button>
|
|
<button onclick="setContainerZoom(1)">Original</button>
|
|
<button onclick="fitImage()">Image</button>
|
|
<button onclick="fitThreeImages()">Three</button>
|
|
<br>
|
|
|
|
Size:
|
|
<button onclick="fieldSize($('.container').width()*1.5, $('.container').height()*1.5)">+</button>
|
|
<button onclick="fieldSize($('.container').width()*0.75, $('.container').height()*0.75)">-</button>
|
|
<button onclick="fieldSize(300, 200)">300x200</button>
|
|
<button onclick="fieldSize(600, 400)">600x400</button>
|
|
<br>
|
|
<br>
|
|
|
|
<div class="container animated">
|
|
<div class="field">
|
|
<div class="origin-marker animated">
|
|
<div class="origin-marker-2">
|
|
</div>
|
|
</div>
|
|
<div class="ribbon">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
<div class="ribbon" style="margin-left: 40px;">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
<div class="ribbon current">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image current">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
<div class="ribbon" style="margin-left: -100px;">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image pic">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
<div class="ribbon">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
<div class="ribbon">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
<div class="ribbon">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
<div class="ribbon">
|
|
<div class="image">1</div>
|
|
<div class="image">2</div>
|
|
<div class="image">3</div>
|
|
<div class="image">4</div>
|
|
<div class="image">5</div>
|
|
<div class="image">6</div>
|
|
<div class="image">7</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-marker"></div>
|
|
<div class="v-marker"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|