jquery slideshow no puede centrar las imágenes verticalmente
Tengo una presentación de diapositivas jquery con dos tamaños de imagen diferentes en posición vertical y horizontal. Logré centrarlos horizontalmente, pero no pude lograr que se centraran verticalmente.
Intenté usar la alineación vertical en el #slideshow { pero no funcionó. Intenté especificar una posición de píxel 'superior' para centrar las imágenes de paisaje, pero luego las de retrato no están centradas. ¿Alguien podría ayudar? He incluido los códigos a continuación. ¡Gracias!
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 300, function() {
$active.removeClass('active last-active');
});
}
var intervalID = "";
$(function() {
intervalID = setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
#slideshow {
position:relative;
height:600px;
width: 800px;
margin: 0 auto;
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:15;
opacity:0.0;
height: 600px;
background-color: #FFF;
min-width: 100%;
filter: alpha(opacity=0);
cursor: pointer;
width: 800px;
}
#slideshow DIV.active {
z-index:17;
opacity:1.0;
filter: alpha(opacity=100);
}
#slideshow DIV.last-active {
z-index:16;
}
#slideshow DIV IMG {
display: block;
border: 0;
margin: auto;
max-height: 550px;
min-width: 350px;
max-width: 800px;
center= vertical: true, horizontal: true;
}
#Main_Nav {
font-family: "Univers LT Std 55";
font-size: 24px;
font-weight: normal;
color: #333;
text-decoration: none;
background-color: #FFF;
text-align: left;
cursor: crosshair;
padding: 35px 030px;
}
#Menu {
font-family: "Univers LT Std 55";
font-size: 18px;
color: #333;
background-color: #FFF;
text-align: right;
}
#Header {
font-family: "Univers LT Std 45 Light", Arial, sans-serif;
background-color: #FFF;
text-align: center;
font-size: 36px;
font-weight: lighter;
padding-top: 20px;
min-width: 100%;
padding-bottom: 40px;
}
#Footer {
font-family: "Univers LT Std 45 Light", Arial, sans-serif;
font-size: 16px;
font-weight: lighter;
color: #333;
text-align: center;
padding-top: 10px;
}
</style>
</head>
<body style="font-weight: lighter; font-style: normal; font-family: 'Univers LT Std 45 Light', Arial, sans-serif; text-align: center;">
<div class="Header" id="Header"><a style="color:#333; text-decoration:none; font-size: 28px;" href="http://csutorasliando.com/">Csutoras + Liando</a></div>
</div>
<div id="slideshow">
<div class="active">
<img src="../Images/Final/Web/CL_Puri_2_CL.jpg" alt="Slideshow Image 1" width="600" height="420" align="absmiddle" onclick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)"; top="100" /></p>
<p>Puri House (expected completion 2012), Indonesia </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Warsaw-Embassy_1_Richters.jpg" alt="Slideshow Image 2" width="735" height="365" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Warsaw Embassy 2009, Poland </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Warsaw-Embassy_2_Cook.jpg" alt="Slideshow Image 3" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Warsaw Embassy 2009, Poland </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Natsis_1_TFA.jpg" alt="Slideshow Image 4" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Natsis House 2011, Greece </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Turban_2_CL.jpg" alt="Slideshow Image 5" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Turban utca 2007, Hungary </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Broadway_4_Nolan.jpg" alt="Slideshow Image 6" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Broadway School 2011, United Kingdom </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Broadway_1_Nolan.jpg" alt="Slideshow Image 7" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Broadway School 2011, United Kingdom </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Blaak_6_CL.jpg" alt="Slideshow Image 8" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Blaak Apartments 2005, the Netherlands </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Brentwood_3_Riddle.jpg" alt="Slideshow Image 9" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Brentwood School 2011, United Kingdom </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Brentwood_4_Riddle.jpg" alt="Slideshow Image 10" width="600" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Brentwood School 2011, United Kingdom </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Puri_7_CL.jpg" alt="Slideshow Image 11" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Puri House (expected completion 2012), Indonesia </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Furn_1_LC.jpg" alt="Slideshow Image 12" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Movable furniture 2011, United Kingdom </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Erste_1_TFA.jpg" alt="Slideshow Image 13" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Erste Bank 2008, Austria </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Solid-11_2_TFA.jpg" alt="Slideshow Image 14" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Solid 11 mixed used complex 2011, the Netherlands </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Phillimore_1_TFA.jpg" alt="Slideshow Image 15" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Phillimore Garden Residence 2011, United Kindom </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Silver-Rain_1_ML.jpg" alt="Slideshow Image 16" width="420" height="550" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Summer Pavillion 2005, Estonia </p>
</div>
<div>
<img src="../Images/Final/Web/CL_Furn-4_ML.jpg" alt="Slideshow Image 14" width="600" height="420" onClick="clearInterval(intervalID); slideSwitch(); intervalID = setInterval( "slideSwitch()", 5000)" />
</p>
<p>Kingscross Library desk 2004, Australia </p>
</div>
preguntado el 01 de junio de 12 a las 13:06
waikiki
1 Respuestas
Un truco que he usado en el pasado para que los divs se centren vertical y horizontalmente dentro de otro div es hacer algo como esto:
Solo estoy escribiendo en la parte superior de mi cabeza, por lo que no puedo pegar mi código original, pero tal vez esto sea útil.
<div style="width:800px; overflow:hidden">
<div style="display:table; margin:0 auto">
<div style="display:table-cell; vertical-align:middle; text-align:center; height:400px">
<img src="folder/myImage.jpg" />
</div>
</div>
</div>
Respondido 02 Abr '13, 23:04
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery slideshow or haz tu propia pregunta.
Pon este código en jsFiddle para que podamos jugar con él. Además, si tiene una página activa, comparta su URL. - U.P
@UmairP; primera vez que uso jfiddle, por lo que puede haber algunos errores, pero aquí está el enlace jsfiddle.net/NcQhr/8 - waikiki
@Andy; gracias por poner el código en el formato correcto... estaba luchando un poco allí - waikiki
@Umair; de alguna manera, las imágenes no se muestran cuando traté de reabrir la página (en Google Chrome) ... solo su cuadro delimitador ... en Firefox, los cuadros delimitadores ni siquiera se muestran. Sin embargo, parecen estar cambiando/reproduciendo continuamente. Si alguien puede ayudar ... será muy apreciado - waikiki