Imágenes recortadas en theme DZ al pantalla completa

ramonjosegn Seguir
Seguidores
12

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
Estoy armando un sitio web para un cliente y tengo un problemita con las imágenes en el theme DZ

Al poner el navegador a pantalla completa, las imágenes quedan recortadas en la parte superior, supongo que es un error de programación del autor, ya que revisé otras páginas con el mismo theme y pasa lo mismo, intenté poner una banda negra en la parte superior pero ocurre lo mismo...

¿alguna solución?

---------- Post agregado el 23-dic-2013 hora: 16:07 ----------

dejo el link
Portfolio 1 ? TheWiz Weddings
 

cep999

No recomendado
Verificado por Whatsapp
Desde
30 Nov 2009
Mensajes
951
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Cuando dices recortado te refieres a esto: de815006bb313737712c669fc36f2bfd.png

---------- Post agregado el 23-dic-2013 hora: 14:51 ----------

Porque si es asi, yo lo veo normal

---------- Post agregado el 23-dic-2013 hora: 14:53 ----------

de815006bb313737712c669fc36f2bfd.png
 

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
Sí, me refiero a que a la pobre señorita le cortaron la cabeza como muestras en la captura [MENTION=4312]cep999[/MENTION]

Según el autor -al que ya le estoy empezando a coger manía por sus "soluciones" tan malas- las imágenes deberían ser de 1990, pero si hago eso es peor todavía...
 

cep999

No recomendado
Verificado por Whatsapp
Desde
30 Nov 2009
Mensajes
951
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
y colocando espaciosn con el br, ya haz probado con eso..

Sí, me refiero a que a la pobre señorita le cortaron la cabeza como muestras en la captura [MENTION=4312]cep999[/MENTION]

Según el autor -al que ya le estoy empezando a coger manía por sus "soluciones" tan malas- las imágenes deberían ser de 1990, pero si hago eso es peor todavía...


---------- Post agregado el 23-dic-2013 hora: 15:36 ----------

para que la imagen se desplaze hacia abajo.
 

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
y colocando espaciosn con el br, ya haz probado con eso..



---------- Post agregado el 23-dic-2013 hora: 15:36 ----------

para que la imagen se desplaze hacia abajo.

el theme usa una galería viejísima que no actualizan hace mil años... o sea que tengo que atenerme a lo que la galería haga, con quizás las modificaciones que hizo el autor en el theme... quién sabe qué chapuza hizo, lo que entiendo es que el responsive está mal programado...
 

jackemathe

Mi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
9 Nov 2011
Mensajes
3.110
el theme usa una galería viejísima que no actualizan hace mil años... o sea que tengo que atenerme a lo que la galería haga, con quizás las modificaciones que hizo el autor en el theme... quién sabe qué chapuza hizo, lo que entiendo es que el responsive está mal programado...


Y si el menu el lugar de que quede horizontal lo cambias vertical del lado izquierdo? .. la imagen se veria amplia y el menu en esa parte no estorbaria
 

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
Y si el menu el lugar de que quede horizontal lo cambias vertical del lado izquierdo? .. la imagen se veria amplia y el menu en esa parte no estorbaria

No es problema del menú, el problema es que las imágenes son responsive y el autor del theme las programó mal

Cuando se amplía el navegador las imágenes estas se salen de la pantalla... a saber qué les hizo, de pronto les puso que se ampliaran a un 125% o algo por el estilo, quién sabe, pero no sé qué hacer realmente, no entiendo nada del CSS...
 

Jonic

Gamma
Programador
Desde
23 Nov 2013
Mensajes
194
Bueno realmente no comprendo muy bien lo de la galeria, pero si te puedo decir que si es posible modificar el Css le daria un
Insertar CODE, HTML o PHP:
img, video {
	max-width: 100%
}

despues del body para que las imagenes se acomoden al tamaño de la pagina y le daría al div donde se muestran las imágenes una propiedad de
display: inline-block;

aunque también buscaría errores en el código Css como tú lo dices, sectores donde halla mas de 100 % en el whith por que se supone que lo correcto es que en las etiquetas padres sobre un 5 % para que se acomode a la página en la que se visualiza.
 

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
Bueno realmente no comprendo muy bien lo de la galeria, pero si te puedo decir que si es posible modificar el Css le daria un
Insertar CODE, HTML o PHP:
img, video {
	max-width: 100%
}

despues del body para que las imagenes se acomoden al tamaño de la pagina y le daría al div donde se muestran las imágenes una propiedad de
display: inline-block;

aunque también buscaría errores en el código Css como tú lo dices, sectores donde halla mas de 100 % en el whith por que se supone que lo correcto es que en las etiquetas padres sobre un 5 % para que se acomode a la página en la que se visualiza.

El css responsive es muy complicado para mí... le echaré un vistazo

Estaba pensando si sería posible ocultar en un 90% de opacidad el menú al estar el cursor detenido, se me ocurre que esa sería una excelente opción, porque tal como está ahora el menú cubre según el tamaño del navegador o del dispositivo sobre el que se mire, vamos que el responsive está hecho una chapuza

No sé si funcionaría algún plugin para móviles, nunca los he usado...

---------- Post agregado el 23-dic-2013 hora: 18:07 ----------

- hay 7 archivos CSS y otros más segun el skin que se use... ya me dirás...
 

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
Acá se ve claramente el problema

La imagen que yo subí
portafolio - 3 - (3).jpg

Lo que muestra el theme

Maximizado el navegador
error001.jpg

Con la ventana restaurada
error002.jpg
 

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
Creo que el problema puede estar en alguna parte de este código

[/COLOR]- y el autor del theme ni se molestó en subir el theme con un plugin actualizado que genere este código... y uno pagando en themeforest? en fin...

/*
Supersized - Fullscreen Slideshow jQuery Plugin
Version 3.1.3
Supersized - Full Screen Background Slideshow jQuery Plugin

By Sam Dunn / One Mighty Roar (One Mighty Roar - Digital Product & Experience Company)
Released under MIT License / GPL License
*/


* { margin:0; padding:0; }
body { background:#111; height:100%; }
img { border:none; }

#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background: url(../img/progress.gif) no-repeat center center; visibility: hidden;
}

#supersized_overlay
{
display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-998; height:100%; width:100%; background: transparent url(../images/overlay2.png) repeat;
}

#supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/

#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

a#prevslide { z-index:999; cursor: pointer; margin-right: 10px; }
a#nextslide { cursor: pointer; margin-left: 10px; }
#play-button { cursor: pointer; }

/*Controls Section*/
#controls-wrapper { margin:0 auto; width: 100%; bottom:0px; left:0; z-index:4; position:fixed; }
#controls { width: 120px; overflow:hidden; height:100%; text-align:center; z-index:5; padding: 15px 0 8px 0; margin: auto; background: #000; -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#slidecounter { float:left; color:#888; font:23px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; text-shadow:#000 0 -1px 0; margin:19px 10px 18px 20px; }
#navigation { float:right; margin:10px 0 0 0; }

/*Thumbnail Navigation*/
#nextthumb,#prevthumb { z-index:6; display:none; position:fixed; bottom:12px; height:75px; width:100px; overflow:hidden; background:#ddd; border:2px solid #fff; -webkit-box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000; box-shadow:0 0 5px #000; }
#nextthumb { right:12px; }
#prevthumb { left:12px; }
#nextthumb img, #prevthumb img { width:150px; height:auto; }
#nextthumb:active, #prevthumb:active { bottom:10px; }
#navigation > :hover,#nextthumb:hover, #prevthumb:hover { cursor:pointer; }

/* Progress Bar
----------------------------*/
#progress-back{ z-index:5; position:fixed; bottom:0; left:0; height:4px; width:100%; background: #222; }
#progress-bar{ position:relative; height:4px; width:100%; background: #e6040c; }

/* Thumbnail Tray
----------------------------*/
#thumb-tray{ position:fixed; z-index:3; bottom:0; left:0; background: #000; padding-top: 8px; height:88px; width:100%; overflow:hidden; text-align:center; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; }

#thumb-back, #thumb-forward{ position:absolute; z-index:5; bottom: -2px; height:108px; width:40px; }
#thumb-back{ left:0; background: transparent;}
#thumb-forward{ right:0; background: transparent no-repeat center center;}
#thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); }
#thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); }
#thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); }


ul#thumb-list{ display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px; }
ul#thumb-list li{ background:#111; list-style:none; display:inline; width:130px; height:80px; overflow:hidden; float:left; margin-right: 10px; }
ul#thumb-list li img { opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); }
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); }
ul#thumb-list li:hover{ cursor:pointer; }

#tray-button { position: fixed; right: 50px; top: 20px; cursor: pointer; }


---------- Post agregado el 23-dic-2013 hora: 18:26 ----------
 

Jonic

Gamma
Programador
Desde
23 Nov 2013
Mensajes
194
Prueva con este código y dime cuales son los resultados
Insertar CODE, HTML o PHP:
* { margin:0; padding: 0; }
body { background:#111; height:90%;  }
img { border:none; padding: 0.5em; top: 5px;}

#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background: url(../img/progress.gif) no-repeat center center; visibility: hidden;
}

#supersized_overlay
{
display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-998; height:100%; width:100%; background: transparent url(../images/overlay2.png) repeat;
}

#supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:95%; width:95%; padding: 0.4em }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }	 /*Quality*/

#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

a#prevslide { z-index:999; cursor: pointer; margin-right: 10px; }
a#nextslide { cursor: pointer; margin-left: 10px; }
#play-button { cursor: pointer; }

/*Controls Section*/
#controls-wrapper { margin:0 auto; width: 100%; bottom:0px; left:0; z-index:4; position:fixed; }
#controls { width: 120px; overflow:hidden; height:100%; text-align:center; z-index:5; padding: 15px 0 8px 0; margin: auto; background: #000; -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; 
}
#slidecounter { float:left; color:#888; font:23px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; text-shadow:#000 0 -1px 0; margin:19px 10px 18px 20px; }
#navigation { float:right; margin:10px 0 0 0; }

/*Thumbnail Navigation*/	
#nextthumb,#prevthumb { z-index:6; display:none; position:fixed; bottom:12px; height:75px; width:100px; overflow:hidden; background:#ddd; border:2px solid #fff; -webkit-box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000; box-shadow:0 0 5px #000; }
#nextthumb { right:12px; }
#prevthumb { left:12px; }
#nextthumb img, #prevthumb img { width:150px; height:auto; }
#nextthumb:active, #prevthumb:active { bottom:10px; }
#navigation > :hover,#nextthumb:hover, #prevthumb:hover { cursor:pointer; }

/* Progress Bar
----------------------------*/	
#progress-back{ z-index:5; position:fixed; bottom:0; left:0; height:4px; width:100%; background: #222; }
#progress-bar{ position:relative; height:4px; width:100%; background: #e6040c; }

/* Thumbnail Tray
----------------------------*/	
#thumb-tray{ position:fixed; z-index:3; bottom:0; left:0; background: #000; padding-top: 8px; height:88px; width:100%; overflow:hidden; text-align:center; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; }

#thumb-back, #thumb-forward{ position:absolute; z-index:5; bottom: -2px; height:108px; width:40px; }
#thumb-back{ left:0; background: transparent;}
#thumb-forward{ right:0; background: transparent no-repeat center center;}
#thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); }
#thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); }
#thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); }


ul#thumb-list{ display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px; }
ul#thumb-list li{ background:#111; list-style:none; display:inline; width:130px; height:80px; overflow:hidden; float:left; margin-right: 10px; }
ul#thumb-list li img { opacity:0.5; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); }
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); }
ul#thumb-list li:hover{ cursor:pointer; }

#tray-button { position: fixed; right: 50px; top: 20px; cursor: pointer; }
 
Última edición:

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
Encontré el problema pero no sé cómo solucionarlo, ya que el código se genera dinámicamente

Acá está el problemita

<ul id="supersized" class="quality" style="visibility: visible;">
<li class="slide-0 activeslide">
<a target="_blank">
<img src="http://www.thewizwedding.com/wp-content/uploads/2013/12/prueba01.jpg" style="width: 1920px; height: 1209.6px; left: 0px; top: -148px;">
</a>
</li>
</ul>
<div id="supersized_overlay"></div>

Necesito poner el top en 0
 
Última edición:

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
14 Feb 2010
Mensajes
70.591
************

Bueno chicos ya vi que el código está embebido, pero si pongo todo al 80% por ejemplo, entonces todo se reduce pero se pega al lado izquierdo...
 
Arriba