Skip to main content
2 de 4
Le agregue como obtengo las imagenes, y al launchFullScreen le agregue un estilo que lamentablemente funciona en google chrome, pero quiero tambien funcione en mozilla
Danilo
  • 2.5k
  • 6
  • 51
  • 103

Agrandar y restaurar imagen en pantalla completa de un slider

estaba modificando un slider, donde le agregue un botón para ver la imagen en pantalla completa. De la siguiente forma tenía el código:

function launchFullScreen(element) {        
    if (element.requestFullScreen) {
        element.requestFullScreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {            
        element.webkitRequestFullScreen();                      
    }
}

$(".full_pantalla").click(function (e) {
id_foto_full = $(this).data('id_foto_full');
launchFullScreen(document.getElementById(id_foto_full));                
});

Con esto hago que se vea en pantalla completa, pero el tamaño de la imagen del slider, se mantiene, no se agranda. Lo que hice, fue remover el estilo en la launchFullScreen:

$(id_imagen).removeAttr('style');

Y de esta forma se me ve la imagen grande, ocupando toda la pantalla (siendo la forma que deseo), ya que si le daba un estilo de esta forma en launchFullScreen, no resultaba:

$(id_imagen).css({ 'height': '100%' });

El gran problema es, que después de remover el estilo de la imagen, para que se vea al 100% el tamaño, no se restaura la imagen como estaba antes cuando uno sale de pantalla completa. Me gustaría saber cómo podría restaurar la imagen cuando salgo de pantalla completa. Sería bueno validar cuando salgo de pantalla completa a normal para restaurar el tamaño que tenía antes estar en pantalla completa

-------------------Modificación a la pregunta--------------

Traigo la imagen desde la base de datos, haciendo un recorrido con un for each

" src="" /> "/> " />

De esta forma, a cada imagen que se crea, le creo un id, para hacer referencia sobre ellas y poder darle a dimensión deseada

A la función que muestra la pantalla completa, le hice la siguiente modificación:

function launchFullScreen(element, id_imagen) {
    if (element.requestFullScreen) {
        element.requestFullScreen();
    } else if (element.mozRequestFullScreen) {            
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) { 
        element.webkitRequestFullScreen();            
    }
    $('#' + id_foto_full).addClass('aumenta_imagen');
}
.aumenta_imagen{
            width:auto !important;
            max-width:none !important;
            height:100% !important;                
        }

Al agregar un estilo en launchFullScreen con addClass(('aumenta_imagen'):

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

Funciona bien en google chrome pero en mozilla no funciona, a pesar que le agregue o no le agregue algun estilo, siempre muestra la imagen al 100% en ancho y alto, produciéndose desproporción. Necesito saber como podría hacer funcionar el estilo aumenta_imagen para mozilla, ya que al ocupar toda la pantalla al 100% la imagen, el ancho o alto,se desproporciona.

Danilo
  • 2.5k
  • 6
  • 51
  • 103