2012-07-19 00:20:59 +04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
Goals:
|
|
|
|
|
- design a simple navigation system and structure
|
|
|
|
|
- make it animate correctly only via CSS
|
|
|
|
|
|
2012-07-19 17:42:47 +04:00
|
|
|
XXX zoom animation is odd...
|
2012-07-19 00:20:59 +04:00
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
2012-07-24 16:22:14 +04:00
|
|
|
<link rel="stylesheet" href="markers.css">
|
|
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
<script src="jquery.js"></script>
|
2012-07-24 16:22:14 +04:00
|
|
|
<script src="markers.js"></script>
|
2012-07-24 14:40:15 +04:00
|
|
|
<script src="ui.js"></script>
|
|
|
|
|
|
2012-07-19 00:20:59 +04:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
2012-07-24 15:38:54 +04:00
|
|
|
$('.image').click(imageClick)
|
2012-07-19 00:20:59 +04:00
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
fieldSize(300, 200)
|
2012-07-19 16:16:56 +04:00
|
|
|
|
2012-07-24 15:38:54 +04:00
|
|
|
$('.current.image').click()
|
2012-07-19 00:20:59 +04:00
|
|
|
})
|
|
|
|
|
|
2012-07-24 15:38:54 +04:00
|
|
|
function imageClick(){
|
2012-07-19 00:20:59 +04:00
|
|
|
// set classes...
|
|
|
|
|
$('.current').removeClass('current')
|
|
|
|
|
$(this)
|
|
|
|
|
.addClass('current')
|
|
|
|
|
.parents('.ribbon')
|
|
|
|
|
.addClass('current')
|
|
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
// position the field and ribbons...
|
2012-07-19 00:20:59 +04:00
|
|
|
centerSquare()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
2012-07-19 16:16:56 +04:00
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-29 02:54:22 +04:00
|
|
|
.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;
|
2012-07-31 15:25:05 +04:00
|
|
|
top: -7px;
|
|
|
|
|
left: -7px;
|
2012-07-29 02:54:22 +04:00
|
|
|
width: 5px;
|
|
|
|
|
height: 5px;
|
|
|
|
|
|
|
|
|
|
border-bottom: solid blue 1px;
|
|
|
|
|
border-right: solid blue 1px;
|
|
|
|
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
.container {
|
2012-07-19 00:20:59 +04:00
|
|
|
position: relative;
|
|
|
|
|
border: solid gray 5px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2012-07-19 16:16:56 +04:00
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
.field {
|
2012-07-19 02:34:04 +04:00
|
|
|
position: relative;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
2012-07-19 00:20:59 +04:00
|
|
|
/* set this to adjust the vertical position of the view... */
|
2012-07-24 14:55:10 +04:00
|
|
|
margin-top: 0px;
|
2012-07-19 00:20:59 +04:00
|
|
|
|
|
|
|
|
/* 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;
|
2012-07-19 00:44:00 +04:00
|
|
|
|
2012-07-29 02:54:22 +04:00
|
|
|
-webkit-transform: scale(1, 1);
|
|
|
|
|
-moz-transform: scale(1, 1);
|
|
|
|
|
-o-transform: scale(1, 1);
|
|
|
|
|
-ms-transform: scale(1, 1);
|
|
|
|
|
transform: scale(1, 1);
|
2012-07-19 00:20:59 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-24 15:38:54 +04:00
|
|
|
.image {
|
2012-07-19 00:20:59 +04:00
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: silver;
|
2012-07-19 14:29:31 +04:00
|
|
|
color: white;
|
2012-07-19 00:20:59 +04:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-24 15:38:54 +04:00
|
|
|
.pic {
|
2012-07-19 14:29:31 +04:00
|
|
|
background: no-repeat 50% black;
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-image: url(images/350px/DSC_3501.jpg);
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-24 15:38:54 +04:00
|
|
|
.current.image {
|
2012-07-19 14:29:31 +04:00
|
|
|
background-color: gray;
|
2012-07-19 00:20:59 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
2012-07-19 17:56:02 +04:00
|
|
|
Guides:
|
|
|
|
|
<button onclick="toggleMarkers()">Toggle Guides</button>
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
Zoom:
|
2012-08-04 14:59:54 +04:00
|
|
|
<button onclick="scaleContainerBy(2)">+</button>
|
|
|
|
|
<button onclick="scaleContainerBy(0.5)">-</button>
|
2012-07-19 17:35:15 +04:00
|
|
|
<button onclick="setContainerZoom(1)">Original</button>
|
|
|
|
|
<button onclick="fitImage()">Image</button>
|
|
|
|
|
<button onclick="fitThreeImages()">Three</button>
|
2012-07-19 00:44:00 +04:00
|
|
|
<br>
|
2012-07-19 17:56:02 +04:00
|
|
|
|
2012-07-19 16:16:56 +04:00
|
|
|
Size:
|
2012-07-24 14:30:43 +04:00
|
|
|
<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>
|
2012-07-19 00:44:00 +04:00
|
|
|
<br>
|
|
|
|
|
<br>
|
2012-07-31 15:25:05 +04:00
|
|
|
<button onclick="centerCurrentImage()">center current</button>
|
|
|
|
|
<button onclick="centerOrigin()">center origin</button>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
2012-07-19 00:44:00 +04:00
|
|
|
|
2012-07-24 14:30:43 +04:00
|
|
|
<div class="container animated">
|
|
|
|
|
<div class="field">
|
2012-07-29 02:54:22 +04:00
|
|
|
<div class="origin-marker animated">
|
|
|
|
|
<div class="origin-marker-2">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2012-07-19 00:20:59 +04:00
|
|
|
<div class="ribbon">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="ribbon" style="margin-left: 40px;">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="ribbon current">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="ribbon" style="margin-left: -100px;">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="ribbon">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="ribbon">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="ribbon">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
<div class="ribbon">
|
2012-07-24 15:38:54 +04:00
|
|
|
<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>
|
2012-07-19 00:20:59 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="h-marker"></div>
|
|
|
|
|
<div class="v-marker"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
