Разворачивание картинок в постах до полного размера
По клику на картинку, она разворачивается до полного размера, повторный клик возвращает обратно к посту с ужатой картинкой.

http://gerda.moy.su/MyBB_files/FD/_scripts/razvorot.jpg

http://gerda.moy.su/MyBB_files/FD/_scripts/razvorot.png

http://gerda.moy.su/MyBB_files/FD/_scripts/razvorot2.png

Автор: satsana
Платформа: любая
Аналоги:

От Автора:
Искала способ просмотра ужатых форумом картинок в полном размере без открывания их в новой вкладке. Не нашла ничего подходящего (что нашла - то не работает или работает не так, как мне хотелось бы), поэтому написала вот такой скрипт, которым с удовольствием делюсь с вами.

- не требует изменений в коде страницы;
- автоматически обрабатывает изображения, "ужатые" стилем форума.

HTML низ:

Код:
    <!-- Развертывание картинок -->
    <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><!-- Развертывание картинок (END) -->

От ForumD.ru:
Скрипт работает не только на платформе майбб для картинок постах, но и любых других площадках и html-страницах.
Достаточно добавить к картинке класс postimg:

<img width="200px" src="http://gerda.moy.su/_bl/0/40006864.jpg" class="postimg">