diapositiva di immagini jquery
Domanda
ecco la pagina di test
http://www.studioteknik.com/html/test-portfolio.html
Non ho ricevuto alcun errore, ma nessun effetto hover-slide ...
qualche indizio qualcuno?
Aggiorna, molf ha risolto il problema, quella era la posizione assoluta che ha fatto il trucco .. ma, ora, quando appare il testo, il link sottostante NON È CLICABILE
la pagina corretta è qui: http://www.studioteknik.com/html /test-portfolio3.html
Soluzione
Devi aggiornare il tuo CSS, assicurati che .image img
sia posizionato in modo assoluto:
.image img {
position: absolute; // added
height: 100%;
width: 100%;
}
Questo farà funzionare la diapositiva. L'immagine verrà visualizzata all'esterno del div
circostante. Per risolvere il problema, aggiungi una proprietà overflow: hidden
a .image
:
.image {
// ...
overflow: hidden; // added
}
Aggiornamento: dato che nella soluzione sopra di te finisci con il testo dietro il .image div
(cioè con link non cliccabili) , faresti meglio a scorrere quello anziché l'immagine. Invece di quanto sopra, procedi come segue:
.box {
// ...
overflow: hidden; // added
}
E nel tuo 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});
});
Nota che ora stiamo monitorando l'evento hover
su div.box
, quindi scorri verso il basso div.image
.
Altri suggerimenti
funziona con
position:relative;
anche ma devi cambiare il tuo JS in:
$('div.webpreview').hover(....);
in quanto non vi sono div con la classe "image" nella tua pagina :)
Per link cliccabili:
STYLE:
.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>
Inoltre puoi farlo modificando z-index del div contenente link:
$('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");
});