myaac/system/templates/forum.fullscreen.html.twig
slawkens1 c2574235ea * forum: show image in full screen on click
* do not expand the whole site cause of big posted forum images, instead
show a small image and allow full size on click
2018-01-05 23:48:08 +01:00

41 lines
785 B
Twig

<div id="FullScreen">
<img src="" alt="" />
</div>
<style>
#FullScreen {
height: 100%;
display: none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index: 100;
}
#FullScreen img {
height: 100%;
display: block;
margin: 0 auto;
cursor: pointer;
}
.forum-image {
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function() {
$(".forum-image").click(function(event){
var src = $(this).attr('src'); //get the source attribute of the clicked image
$('#FullScreen img').attr('src', src); //assign it to the tag for your fullscreen div
$('#FullScreen').fadeIn();
});
$("#FullScreen").click(function(){
$(this).fadeOut()
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
});
</script>