Expanding pictures in posts to full size
By clicking on the picture, it unfolds to full size, a second click returns to the post.
|
|
|
Autor: satsana
Platform: any
- does not require changes to the page code;
- automatically processes images compressed by forum style.
HTML низ (Admin > Options: 2nd form):
Code:
<!-- Expanding pictures -->
<script type="text/javascript">
function postimgOnhover (img) {if (img.offsetWidth != 0 && img.naturalWidth > img.offsetWidth) {
img.style.cursor = 'zoom-in'; img.onclick = function () {
var imgHeight = img.naturalHeight, winHeight = window.innerHeight; var topShift = (winHeight>imgHeight ? (winHeight-imgHeight)/2 : 0);
$('body').append('<div class="lightbox" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); overflow: auto; text-align: center; z-index: 1000;">' + '<img class="lightimg" src="' + img.src + '" onclick="this.parentNode.remove()" style="position: relative; top: ' + topShift + 'px; cursor: zoom-out;">' + '</div>');}}}
var postimges = document.getElementsByClassName('postimg');
for (var i=0; i<postimges.length; i++) {postimges[i].onmouseover = function () {postimgOnhover (this)};}
</script><!-- Expanding pictures (END) -->PS:
The script works not only on the MyBB.ru platform for post images, but also on any other sites and html-pages.
It is enough to add to the picture the class postimg:
<img width="200px" src="http://gerda.moy.su/_bl/0/40006864.jpg" class="postimg">