Problem with FullScreen image in Mozilla

Question

Problem with FullScreen image in Mozilla

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

I have my function to enlarge a full-screen image, which works for me in Google Chrome but not in other browsers.

I have the following code:

$("#Button1").click(function (ev) {       
  launchFullScreen(document.getElementById('imagen_test'), 'imagen_test');
});

function launchFullScreen(element, id_imagen) {
  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.mozRequestFullScreen) {            
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) { 
    element.webkitRequestFullScreen();            
  }
  $('#' + id_imagen).addClass('aumenta_imagen');
}

.aumenta_imagen{
  width:80% !important;
  max-width:none !important;
  height:100% !important;                
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="imagen_test" src="http://www.lorempixel.com/100/180/people" style="height:180px;width:100px;max-width:120px;" />
<input id="Button1" type="button" value="button" />

But when I try it in Mozilla, to enlarge the image in full screen, the following happens: It occupies the whole width and height, which makes the image look disproportionate.

I would like to know, what should I do so that the image is also displayed in full screen in Mozilla?

jquery html5 css3

asked by Danilo 06.03.2016 в 22:18

source

2 answers

1

There is an event called "fullscreenchange" that is launched when the full screen mode is started or terminated. Also using document.fullscreenElement (with the appropriate prefix) you know if you enter or exit full screen.

Well, therefore, simply store the value of style in an auxiliary attribute (owner) and restore it when you exit full screen. I have not tried it, but it's basically something like this:

document.addEventListener("fullscreenchange", onFullScreenChange);
document.addEventListener("mozfullscreenchange", onFullScreenChange);
document.addEventListener("webkitfullscreenchange", onFullScreenChange);
document.addEventListener("msfullscreenchange", onFullScreenChange);

function onFullScreenChange() {
  var fullscreenElement = document.fullscreenElement || 
                          document.mozFullScreenElement || 
                          document.webkitFullscreenElement ||
                          document.msFullscreenElement;

  var elemento = $("#id_del_elemento");

  // verificas si entras o sales de pantalla completa
  if (fullscreenElement) { 
    // almacenas style en otra parte
    elemento.attr({ 'style-temporal' : elemento.attr('style') });
    elemento.removeAttr('style');
  } else {
    // restauras style al volver a modo normal
    elemento.attr({ 'style' : elemento.attr('style-temporal') });
    elemento.removeAttr('style-temporal');
  }
}

answered by 07.03.2016 в 01:13

Help with my own style on all devices getattr in pony generators orm

score 2 · Accepted Answer

I was able to reproduce the problem. It happens because Chrome, Firefox and IE / Edge interpret the whole screen differently when applied to an image (although I have to look for sources that show this point):

In Chrome, the image enlarges proportionally until it reaches a stop (the height or width of the window).
In Firefox and IE / Edge, the image is maximized by occupying 100% of the screen both horizontally and vertically (so the image looks stretched).

Chrome seems to respect the CSS to a certain extent, while Firefox and IE / Edge ignore it directly and apply its own full-screen image style.

With that in mind, I leave here two possible solutions (the second one I like more because it seems cleaner to me):

Option 1: Apply the full screen to the body

You could apply the full screen to the body element and then make the selected image have different styles. This way you avoid possible problems with Firefox and IE. Almost better if you also add a scrim (a curtain or darker intermediate layer to more visually separate the image from the rest of the content).

For example, you could do something like this:

$("#Button1").click(function (ev) {       
  launchFullScreen(document.getElementById('body'), 'imagen_test');
});

function launchFullScreen(element, id_imagen) {
  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.mozRequestFullScreen) {            
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) { 
    element.webkitRequestFullScreen();            
  }
  $('#' + id_imagen).addClass('aumenta_imagen');
}

.aumenta_imagen{
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;               
}

<body id="body">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <img id="imagen_test" src="http://www.lorempixel.com/100/180/people" style="height:180px;width:100px;max-width:120px;" /> 
  <input id="Button1" type="button" value="button" />
</body>

Option 2: Put the image as background

If instead of putting the image as an image (with a img tag) it is set as the background of a div (using background-image and background-size:contain ), when applying the full screen, the div it occupies the whole window but due to the size of the indicated background, it is displayed correctly.

This would be an example of the code:

$("#Button1").click(function (ev) {       
  launchFullScreen(document.getElementById('imagen_test'), 'imagen_test');
});

function launchFullScreen(element, id_imagen) {
  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.mozRequestFullScreen) {            
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) { 
    element.webkitRequestFullScreen();            
  }
  $('#' + id_imagen).addClass('aumenta_imagen');
}

#imagen_test {
  height:180px;
  width:100px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}

.aumenta_imagen {
  width:100% !important;
  height:100% !important;
  background-color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imagen_test" style="background-image:url(http://www.lorempixel.com/100/180/people);"></div>
<input id="Button1" type="button" value="button" />

This second example does not look good because the iframe on which it runs does not allow full screen. Copy the code to a page and run it locally to see the results.