diapositiva de la imagen de jquery
Pregunta
aquí está la página de prueba
http://www.studioteknik.com/html/test-portfolio.html
No recibí ningún error, pero no tengo efecto de desplazamiento deslizante ...
alguna pista a alguien?
Actualización, molf ha solucionado el problema, esa fue la posición absoluta que hizo el truco ... pero, ahora, cuando aparece el texto, el enlace debajo NO ES CLICABLE
la página corregida está aquí: http://www.studioteknik.com/html /test-portfolio3.html
Solución
Debe actualizar su CSS, asegúrese de que .image img
esté posicionado absolutamente:
.image img {
position: absolute; // added
height: 100%;
width: 100%;
}
Esto hará que la diapositiva funcione. Sin embargo, la imagen se mostrará fuera del div
circundante. Para solucionarlo, agregue una propiedad overflow: hidden
a .image
:
.image {
// ...
overflow: hidden; // added
}
Actualización: dado que en la solución anterior terminas con el texto detrás el .image div
(es decir, con enlaces que no se pueden hacer clic) , es mejor que deslice eso en lugar de la imagen. En lugar de lo anterior, haga lo siguiente:
.box {
// ...
overflow: hidden; // added
}
Y en tu javascript:
$('div.box').hover(function() {
$(this).find(".image").animate({top:'200px'},{queue:false,duration:500});
}, function() {
$(this).find(".image").animate({top:'0px'},{queue:false,duration:500});
});
Tenga en cuenta que ahora estamos rastreando el evento hover
en el div.box
, y deslice hacia abajo el div.image
.
Otros consejos
funciona con
position:relative;
también, pero necesita cambiar su JS a:
$('div.webpreview').hover(....);
ya que no hay div con la clase '' imagen '' en tu página :)
Para el enlace en el que se puede hacer clic:
ESTILO:
.webpreview img {
height: 100%;
position:relative;
overflow:hidden;
width: 100%;
z-index:100;//note this
}
.box .linkDiv{
top:-300px;
position:absolute;
overflow:hidden;
z-index:200;
}
JS:
$(document).ready(function() {
$('div.box').hover(
function(){
$('div.webpreview',$(this)).find("img").animate(
{top:'200px'},{queue:false,duration:1000});
$("div.linkDiv", $(this)).animate({top:'0px'},
{queue:false, duration:500});
},
function(){
$('div.webpreview',$(this)).find("img").animate(
{top:'0px'},{queue:false,duration:1000});
$("div.linkDiv",$(this)).animate({top:'-300px'},
{queue:false, duration:500});
}
);
});
HTML:
<div class="box">
<div class="linkDiv">
<strong>Client :</strong> Sous le charme des érables<strong><br>
Manda : </strong>Conception et réalisation<br>
<strong>Adresse : <a href="http://www.souslecharme.ca/"
target="_blank">www.souslecharme.ca</a></strong>
</div>
<div class="webpreview"><img src="test-portfolio_files/souslecharme.jpg"></div>
</div>
También puede hacer esto cambiando el índice z del enlace que contiene div:
$('div.box').hover(
function(){
$('div.webpreview',$(this)).find("img").animate(
{top:'200px'},{queue:false,duration:1000});
$("div.linkDiv", $(this)).css("z-index","200");
},
function(){
$('div.webpreview',$(this)).find("img").animate(
{top:'0px'},{queue:false,duration:1000});
$("div.linkDiv", $(this)).css("z-index","50");
});