GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Galeria de fotos Modal

css
html
bootstrap
Tags: #<Tag:0x00007f653bee68d8> #<Tag:0x00007f653bee6680> #<Tag:0x00007f653bee6388>
#1

Olá, boa noite. Queria fazer uma galeria, consegui fazer uma modal, só queria colocar seta pra esquerda para ir à foto anterior e para à esquerda, indicando a próxima foto, como posso fazer isso deixando responsívo? Algo como » e « (o código é um pouco grande kkk)

index.html (10,2 KB)

0 Likes

#2

Dá uma olhada nesse link abaixo, eles tem um exemplo bem detalhado com três passos.
How TO - Lightbox (Modal Image Gallery)

0 Likes

#3

Já vi na w3, só queria colocar as setas, mas colocando ela escapa da tela, não fica ‘responsíva’ :frowning:

0 Likes

#4

Entendi!
Basta criar uma <div> e setar o position: absolute;, dentro da div tu crias dois <span>, problema resolvido, agora é só usar CSS. Por exemplo:

No HTML:

<div id="setas">
   <span class="arrow esquerda">«</span>
   <span class="arrow direita">»</span>	
</div>

No CSS:

#setas{width: 100%; height:50px; position:absolute; top:50%; margin-top:-25px; display:inline-block; z-index:9999;}
#setas .arrow{ width: 30px; height: 100%; position: relative; background: red; font-size: 30px; cursor: pointer; display:inline-block; text-align:center;}
#setas .arrow.esquerda{left:0; border-radius: 0 10px 10px 0;}
#setas .arrow.direita{float:right; right:0; border-radius: 10px 0 0 10px;}

FIM:

Agora é só usar JavaScript e capturar os eventos e executar as ações.

0 Likes

#5

só colocar um slider

0 Likes