CODEWITHSUNDEEP
javascripthtmlinternet-explorergoogle-chrome
Jasper
Jasper

Reputation: 8705

Showing Image in full screen - using JavaScript/HTML5

I have an image on a web page. When I click on it, it should display full screen.

I have the following code:

<!doctype html>
<html>
  <head>      
     <script>
        function makeFullScreen() {
         var divObj = document.getElementById("theImage");
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();            
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }
     </script>
    
  </head>
  <body>
    Click Image to display Full Screen...</br>
    
    <img id="theImage" style="width:400px; height:auto;" src="pic1.jpg" onClick="makeFullScreen()"></img>
    
  </body>
</html>

Problem I am facing - In full screen mode:

  1. The image displays in small size (i.e same as the size on browser page), not its original size - on all browsers.
  2. In IE - The image is not centered, it shows up on left side of the full screen (why not centered?). In Chrome - it is centered - as desired.

Upvotes: 7

Views: 17129

Answers (1)

Jasper
Jasper

Reputation: 8705

So, found the solution after some trial...

The solution is in the style section:
- width, height, margin are set to 'auto',
- but also marked as '!important' - this allows you to override the inline styling of the image on the webpage - when in fullscreen mode. 

<!doctype html>
<html>
  <head>
     <style>
      .fullscreen:-webkit-full-screen {
      width: auto !important;
      height: auto !important;
      margin:auto !important;
  }
     .fullscreen:-moz-full-screen {
      width: auto !important;
      height: auto !important;
      margin:auto !important;
  }
     .fullscreen:-ms-fullscreen {
      width: auto !important;
      height: auto !important;
      margin:auto !important;
  }     
     </style>
     <script>
        function makeFullScreen() {
         var divObj = document.getElementById("theImage");
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();               
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();      
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();       
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }
     </script>

  </head>
  <body>
    Hello Image...</br>

    <img id="theImage" style="width:400px; height:auto;"  class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>

  </body>
</html>

Upvotes: 8

Related Questions