Skip to main content
Correcciones de gramática, convertir código en emcv, arreglar bug en el código para que sea ejecutable, eliminar etiquetas no necesarias
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Problema con full Screen imagen FullScreen en Mozilla

Simplificaré mi pregunta. Resulta que tengoTengo mi función para agrandar una imagen a pantalla completa, lo cual me funciona en google chromeGoogle Chrome pero no en otros navegadores. 

Tengo el siguiente código:

<img id="imagen_test" src="../../Archivos/Noticias/Fotos/14-01-2016/hhhhasas/CAM00414.jpg" style="height:180px;width:100px;max-width:120px;" />
<input id="Button1" type="button" value="button" />

 $("#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_foto_full).addClass('aumenta_imagen');
}

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

$("#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" />
 

Pero cuando lo pruebo en mozillaMozilla, para agrandar la imagen en pantalla completa, ocurre lo siguiente:

  Ocupa todo el ancho y alto, lo cual hace que la imagen se vea desproporcionada.

Me gustaría saber, ¿qué debo hacer para que también en mozilla,Mozilla se vea bien la imagen en pantalla completa.?

Problema con full Screen imagen en Mozilla

Simplificaré mi pregunta. Resulta que tengo mi función para agrandar una imagen a pantalla completa, lo cual me funciona en google chrome. Tengo el siguiente código:

<img id="imagen_test" src="../../Archivos/Noticias/Fotos/14-01-2016/hhhhasas/CAM00414.jpg" style="height:180px;width:100px;max-width:120px;" />
<input id="Button1" type="button" value="button" />

 $("#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_foto_full).addClass('aumenta_imagen');
}

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

Pero cuando lo pruebo en mozilla, para agrandar la en pantalla completa, ocurre lo siguiente:

  Ocupa todo el ancho y alto, lo cual hace que la imagen se vea desproporcionada.

Me gustaría saber, que también en mozilla, se vea bien la imagen en pantalla completa.

Problema con imagen FullScreen en Mozilla

Tengo mi función para agrandar una imagen a pantalla completa, lo cual me funciona en Google Chrome pero no en otros navegadores. 

Tengo el siguiente código:

$("#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" />
 

Pero cuando lo pruebo en Mozilla, para agrandar la imagen en pantalla completa, ocurre lo siguiente: Ocupa todo el ancho y alto, lo cual hace que la imagen se vea desproporcionada.

Me gustaría saber, ¿qué debo hacer para que también en Mozilla se vea bien la imagen en pantalla completa?

Simplificación de pregunta. Problema con mozilla al agrandar imagen en pantalla completa
Origen Enlace
Danilo
  • 2.5k
  • 6
  • 51
  • 103

Agrandar y restaurar Problema con full Screen imagen en pantalla completa de un sliderMozilla

estaba modificando un slider, donde le agregue un botónSimplificaré mi pregunta. Resulta que tengo mi función para ver laagrandar una imagen ena pantalla completa, lo cual me funciona en google chrome. De la siguiente forma teníaTengo el siguiente código:

function launchFullScreen(element) {        
    if (element.requestFullScreen) {
      <img id="imagen_test" elementsrc=".requestFullScreen();
    } else if (element.mozRequestFullScreen) {
        element/.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {            
        element/Archivos/Noticias/Fotos/14-01-2016/hhhhasas/CAM00414.webkitRequestFullScreen();                    jpg" style="height:180px;width:100px;max-width:120px;" />
<input id="Button1" type="button" value="button" }
}/>

 $(".full_pantalla""#Button1").click(function (eev) {
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:

$launchFullScreen(id_imagen)document.removeAttrgetElementById('style''imagen_test'), 'imagen_test');

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:auto80% !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 peroPero cuando lo pruebo en mozilla no funciona, a pesar que le agregue o no le agregue algun estilo, siempre muestrapara agrandar la imagen al 100% en pantalla completa, ocurre lo siguiente:

Ocupa todo el ancho y alto, produciéndose desproporciónlo cual hace que la imagen se vea desproporcionada. Necesito

Me gustaría saber como podría hacer funcionar el estilo aumenta_imagen para mozilla, ya que al ocupar toda la pantalla al 100%también en mozilla, se vea bien la imagen, el ancho o alto,se desproporciona en pantalla completa.

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.

Problema con full Screen imagen en Mozilla

Simplificaré mi pregunta. Resulta que tengo mi función para agrandar una imagen a pantalla completa, lo cual me funciona en google chrome. Tengo el siguiente código:

<img id="imagen_test" src="../../Archivos/Noticias/Fotos/14-01-2016/hhhhasas/CAM00414.jpg" style="height:180px;width:100px;max-width:120px;" />
<input id="Button1" type="button" value="button" />

 $("#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_foto_full).addClass('aumenta_imagen');
} 

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

Pero cuando lo pruebo en mozilla, para agrandar la en pantalla completa, ocurre lo siguiente:

Ocupa todo el ancho y alto, lo cual hace que la imagen se vea desproporcionada.

Me gustaría saber, que también en mozilla, se vea bien la imagen en pantalla completa.

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
Origen Enlace
Danilo
  • 2.5k
  • 6
  • 51
  • 103

-------------------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.

-------------------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.

Origen Enlace
Danilo
  • 2.5k
  • 6
  • 51
  • 103
Loading