* 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
This commit is contained in:
slawkens1 2018-01-05 23:48:08 +01:00
parent 0533b8c946
commit c2574235ea
4 changed files with 44 additions and 3 deletions

View File

@ -221,7 +221,7 @@ class Forum
// TODO: [poll] tag // TODO: [poll] tag
'#\[color=(.*?)\](.*?)\[/color\]#si' => ($xhtml ? '<span style="color: \\1;">\\2</span>' : '<font color="\\1">\\2</font>'), '#\[color=(.*?)\](.*?)\[/color\]#si' => ($xhtml ? '<span style="color: \\1;">\\2</span>' : '<font color="\\1">\\2</font>'),
'#\[img\](.*?)\[/img\]#si' => ($xhtml ? '<img src="\\1" border="0" alt="" />' : '<img src="\\1" border="0" alt="">'), '#\[img\](.*?)\[/img\]#si' => ($xhtml ? '<img class="forum-image" style="max-width:550px; max-height; 550px;" src="\\1" border="0" alt="" />' : '<img class="forum-image" style="max-width:550px; max-height; 550px;" src="\\1" border="0" alt="">'),
'#\[url=(.*?)\](.*?)\[/url\]#si' => '<a href="\\1" title="\\2">\\2</a>', '#\[url=(.*?)\](.*?)\[/url\]#si' => '<a href="\\1" title="\\2">\\2</a>',
// '#\[email\](.*?)\[/email\]#si' => '<a href="mailto:\\1" title="Email \\1">\\1</a>', // '#\[email\](.*?)\[/email\]#si' => '<a href="mailto:\\1" title="Email \\1">\\1</a>',
'#\[code\](.*?)\[/code\]#si' => '<code>\\1</code>', '#\[code\](.*?)\[/code\]#si' => '<code>\\1</code>',

View File

@ -116,4 +116,4 @@ if(Forum::canPost($account_logged))
else else
echo "Your account is banned, deleted or you don't have any player with level " . $config['forum_level_required'] . " on your account. You can't post."; echo "Your account is banned, deleted or you don't have any player with level " . $config['forum_level_required'] . " on your account. You can't post.";
?> echo $twig->render('forum.fullscreen.html.twig');

View File

@ -89,4 +89,4 @@ foreach($threads as $thread)
echo '</td></tr>'; echo '</td></tr>';
} }
echo '</table><br /><a href="?subtopic=forum&action=new_post&thread_id='.$thread_id.'"><img src="images/forum/post.gif" border="0" /></a>'; echo '</table><br /><a href="?subtopic=forum&action=new_post&thread_id='.$thread_id.'"><img src="images/forum/post.gif" border="0" /></a>';
?> echo $twig->render('forum.fullscreen.html.twig');

View File

@ -0,0 +1,41 @@
<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>