1

Boa tarde, Preciso montar um projeto para um cliente de fotografia e o mesmo me pediu algo que eu nunca havia feito, tentei pesquisar na internet mas não achei algo que ajudasse no que preciso.

Preciso que na DIV onde apareça a previa do album, ao ser passado por cima com o mouse (hover) inicie um slider de imagens (umas 4 ou 5 imagens).

Algo como isso, mas tentei diminuir o tempo de mudança, mas deu erro... https://tympanus.net/TipsTricks/FastHoverSlideshow/

Alguém conhece alguma biblioteca que faça isso? Ou que seja CSS simples para não pesar muito o site

2 Respostas 2

3

Você pode fazer com mouseenter (iniciar) e mouseleave (parar) e setInterval que irá fazer o looping alternando entre as imagens.

$(document).ready(function(){
   
   var tempo;
   $("#slider").on("mouseenter", function(){
      var img = $(this).find("img"); // pego as imagens
      var num = img.length; // pego o número de imagens
      var idx = $(this).find("img:visible").index(); // pego o index da imagem visível
      
      tempo = setInterval(function(){
         $(img).eq(idx).hide();
         idx++;
         if(idx >= num) idx = 0;
         $(img).eq(idx).show();
      }, 150);
      
   }).on("mouseleave", function(){
      clearInterval(tempo);
   });
   
});
#slider{
   width: 200px;
   height: 400px;
   position: relative;
}

#slider img{
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   display: none;
}

#slider img:nth-child(1){ /* primeiro imagem visível*/
   display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
   <img src="http://img2.timeinc.net/instyle/images/2006/galleries/071206_the_look_celtic_03a.jpg" />
   <img src="http://cdn-img.instyle.com/sites/default/files/styles/480xflex/public/images/2007/lotd/091007_richie_200x400_5.jpg" />
   <img src="https://www.japantimes.co.jp/wp-content/uploads/2013/02/fs20060926a3b.jpg" />
   <img src="http://sboutique.style/wp-content/uploads/2017/04/Tribal_Spring_17_56.jpg" />
   <img src="http://www.flare.com/wp-content/uploads/2009/09/online_Nixxi.jpg" />
</div>

1
  • Obrigado DVD ficou perfeito ! 18/02/2018 às 14:37
0

Opção com várias imagens e @keyframes sem precisar construir um Sprit, com essa opção vc pode usar imagens únicas e incluir quantas quiser.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 333px;
    height: 500px;
    overflow: hidden;
    position: relative;
}
.container:hover .foto {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    animation: sprite 600ms infinite;
}
.container .foto:nth-child(1) {

}
.container .foto:nth-child(2) {
    animation-delay: 200ms;
}
.container .foto:nth-child(3) {
    animation-delay: 400ms;
}
@keyframes sprite {
    0% {opacity: 1;}
    49% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}
.container:hover::after {
    content: "Seu Texto";
    color: #fff;
    line-height: 500px;
    font-size: 32px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    cursor: pointer;
}
<h1>Multiplar imagens no Hover</h1>
<div class="container">
    <img class="foto" src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/2.jpg" alt="">
    <img class="foto" src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/7.jpg" alt="">
    <img class="foto" src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/8.jpg" alt="">
</div>


Vc pode usar a antiga técnica do Sprite mais @keyframes para ter um efeito similar só com CSS.

Veja abaiso o exemplo de como é usado o Sprite no :hover e como vc pode aplicar a técnica nesse caso.

.container {
    width: 75px;
    height: 110px;
    background-image: url(http://finalbossblues.com/wp-content/uploads/2013/12/walk4.gif);
    background-repeat: no-repeat;
    overflow: hidden;
}
.container:hover {
    animation: andar 1s steps(4) infinite;
}
@keyframes andar {
    from {background-position: 0;}
    to {background-position: -302px;}
}
.container-moda {
    width: 100px;
    height: 300px;
    background-image: url(http://cdn04.cdn.justjared.com/wp-content/uploads/headlines/2017/09/kendall-jenner-bella-hadid-michael-kors-nyfw.jpg);
    background-repeat: no-repeat;
    overflow: hidden;
}
.container-moda:hover {
    animation: andar-moda 0.75s steps(3) infinite;
}
@keyframes andar-moda {
    from {background-position: 0;}
    to {background-position: -300px;}
}
<h1>Sprite</h1>
<div class="container"></div>
<h1>Troca foto</h1>
<div class="container-moda"></div>

OBS1: Vc precisa colocar todas as suas imagens em um arquivo só, como na imagem abaixo por exemplo: inserir a descrição da imagem aqui

OBS2: Não ficou perfeito pq usei imagens que encontrei no Google apenas como exemplo mesmo, mas com as medidas corretas de altura e largura da imagem fica perfeito

3
  • Bom dia Hugo, obrigado pela resposta, funcionou perfeitamente, poderia apenas me explicar como funcionaria para aumentar o tempo de cada imagem? Pois tentei aumentar mas ficou com um gap vazio entre a imagem 3 e 1, pode me explicar como tem que ser feito ? 18/02/2018 às 14:35
  • O delay da última img não pode ser no mesmo valor que a animação em si. Use por exemplo esses intervalos que vc vai conseguir prolongar a animação! .container:hover .foto { position: absolute; opacity: 0; cursor: pointer; animation: sprite 2000ms infinite; } .container .foto:nth-child(1) { } .container .foto:nth-child(2) { animation-delay: 750ms; } .container .foto:nth-child(3) { animation-delay: 1250ms; }
    – hugocsl
    18/02/2018 às 16:14
  • Repare que o animation-delay de último filho (1250ms) não é maior nem igual ao valor total da animação animation: sprite 2000ms infinite; Vai testando os valores que vc vai chegar em um que te atenda perfeito
    – hugocsl
    18/02/2018 às 16:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .