1. alex007

    alex007 - Apr 22, 2017 New Member

    Credit
    Point
    Hello.

    (Sorry for my poor English!)

    I want to add a fullscreen-button in Lightbox, while viewing images attached.

    I have done the following steps:

    1- Admin CP > Appearance > Styles > Default Style > Templates > lightbox:

    After:
    Code:
    <span class="avatar" id="LbAvatar" style="display:none"><img alt="" /></span>
    ADD:
    Code:
    <script>
    function launchIntoFullscreen(element) {
      if(element.requestFullscreen) {
      element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
      } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
      } else if(element.msRequestFullscreen) {
      element.msRequestFullscreen();
      }
    }
    </script>

    2- Admin CP > Appearance > Styles > Default Style > Templates > lightbox:

    After:
    Code:
    <a class="OverlayCloser" title="{xen:phrase close}"><span>X</span></a>
    ADD:
    Code:
    <a onclick="launchIntoFullscreen(document.getElementById('LightBox'));">Fu</a>
    3- with file-manager Open: xen\js\xenforo\xenforo.js:
    Replace:
    Code:
    closeSpeed:0,closeOnResize:!0,
    with:
    Code:
    closeSpeed:0,closeOnResize:0,
    But when I click on the fullscreen-button, Photo not cover the entire screen. I think after Fullscreen, width and height of the image, imageContainer must be re-calculated by JavaScript.

    (Plese See Attachments)

    Thanks.
     

    Attached Files:

    • s1.jpg
      s1.jpg
      File size:
      73 KB
      Views:
      0
    • s2.jpg
      s2.jpg
      File size:
      78.5 KB
      Views:
      0
    • s3.jpg
      s3.jpg
      File size:
      76.7 KB
      Views:
      0
    Last edited: Apr 22, 2017
    Loading...