Skip to content

Instantly share code, notes, and snippets.

@mneuhaus
Created October 29, 2015 13:33
Show Gist options
  • Save mneuhaus/222b5f5c6fe63d05deb9 to your computer and use it in GitHub Desktop.
Save mneuhaus/222b5f5c6fe63d05deb9 to your computer and use it in GitHub Desktop.
Image Reference Overlfay
<div class="reference-image">
<img src="Resources/References-1170/atreus_casestudy_v15-variante.png" />
</div>
if (false) {
$('body').keydown(function(e){
// console.log(e.keyCode);
});
$('.reference-image').css('top', window.sessionStorage.getItem('top', 0) + 'px');
// $('.reference-image').css('margin-left', window.sessionStorage.getItem('margin-left', 0) + 'px');
$('.reference-image').css('display', window.sessionStorage.getItem('display', 'none'));
$('body').height($('.reference-image').height());
$('body').keydown(function(e){
if (e.keyCode == 69) { // w
$('.reference-image').toggle();
window.sessionStorage.setItem('display', $('.reference-image').css('display'));
}
// if (e.keyCode == 82) { // r -> reset
// var top = 0;
// var left = 0;
// window.sessionStorage.setItem('top', top);
// $('.reference-image').css('top', top + 'px');
// // window.sessionStorage.setItem('margin-left', left);
// // $('.reference-image').css('margin-left', left + 'px');
// }
if (e.keyCode == 83) { // down
var top = parseInt($('.reference-image').css('top').replace('px', ''));
top++;
window.sessionStorage.setItem('top', top);
$('.reference-image').css('top', top + 'px');
}
if (e.keyCode == 87) { // up
var top = parseInt($('.reference-image').css('top').replace('px', ''));
top--;
window.sessionStorage.setItem('top', top);
$('.reference-image').css('top', top + 'px');
}
// if (e.keyCode == 65) { // left
// var top = parseInt($('.reference-image').css('margin-left').replace('px', ''));
// left--;
// window.sessionStorage.setItem('margin-left', left);
// $('.reference-image').css('margin-left', left + 'px');
// }
// if (e.keyCode == 68) { // right
// var left = parseInt($('.reference-image').css('margin-left').replace('px', ''));
// left++;
// window.sessionStorage.setItem('margin-left', left);
// $('.reference-image').css('margin-left', left + 'px');
// }
});
$('body').keydown(function(e){
if (e.keyCode == 81) { // q
$('.reference-image').show().css('opacity', 1);
}
});
$('body').keyup(function(e){
if (e.keyCode == 81) { // q
$('.reference-image').hide().css('opacity', 0.5);
}
});
}
.reference-image {
position: absolute;
top: 0;
left: 50%;
z-index: 999;
opacity: 0.35;
display: none;
margin-left: -685px;
img {
width: 1370px
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment