Ir para conteúdo
glrtlucas

Lightbox gallery

Recommended Posts

Boa tarde pessoal,

 

meu conhecimento em JS é bem limitado e estou apanhando para criar o seguinte:

 

Tenho um acordeon horizontal de imagens feito em HTML que está funcionando normalmente, neste acordeon há 8 itens.

 

Ao clicar em um dos itens gostaria que abrisse um lightbox com imagens referentes a aquele item aberto.

 

Abaixo estarei disponibilizando o código para vocês darem uma olhada, o item musicalização está funcionando, mas o item corpo e movimento não. Estou testando primeiramente neste dois, tendo sucesso aí replicaria para os demais itens.

 

Estou tentando fazer isto para utilizar no WordPress, procurei e não encontrei um plugin que faça exatamente o que preciso. Um acordeon e ao clicar em algum item abra um lightbox gallery das imagens referentes ao item, só achei plugin que façam isto separadamente.

 

Agradeço desde já.

 

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* accordion */
.accordion {
  width: 100%;
  max-width: 1080px;
  height: 250px;
  overflow: hidden;
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div a {
  display: block;
  height: 250px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 160px;
}

.accordion ul li div a p {
  top: 160px;
  font-size: 13.5px;
}

.accordion ul li:nth-child(1) { background-image: url("https://unsplash.it/650/250?image=680"); }

.accordion ul li:nth-child(2) { background-image: url("https://unsplash.it/650/250?image=668"); }

.accordion ul li:nth-child(3) { background-image: url("https://unsplash.it/650/250?image=659"); }

.accordion ul li:nth-child(4) { background-image: url("https://unsplash.it/650/250?image=655"); }

.accordion ul li:nth-child(5) { background-image: url("https://unsplash.it/650/250?image=657"); }

.accordion ul li:nth-child(6) { background-image: url("https://unsplash.it/650/250?image=661"); }

.accordion ul li:nth-child(7) { background-image: url("https://unsplash.it/650/250?image=665"); }

.accordion ul li:nth-child(8) { background-image: url("https://unsplash.it/650/250?image=664"); }

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 @media screen and (max-width: 600px) {

body { margin: 0; }

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}
}

.about {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #666;
}

.about a {
  color: blue;
  text-decoration: none;
}

.about a:hover { text-decoration: underline; }
</style>
<body>

<div id="accordion" class="accordion">
  <ul>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal('musicalizacao');currentSlide(1)" class="hover-shadow cursor">
        <h2 style="color:white;">Musicalizacao</h2>
        </a> </div>
    </li>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal('corpo-e-movimento');currentSlide(1)" class="hover-shadow cursor">
        <h2 style="color:white;">Corpo e Movimento</h2>
        </a> </div>
    </li>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
        <h2 style="color:white;">Teatro e Contação de Estórias</h2>
        </a> </div>
    </li>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
        <h2 style="color:white;">Artes</h2>
        </a> </div>
    </li>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
        <h2 style="color:white;">Aulas de Inglês</h2>
        </a> </div>
    </li>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
        <h2 style="color:white;">Higiene Bucal</h2>
        </a> </div>
    </li>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">
        <h2 style="color:white;">Capoeira</h2>
        <p>Extracurricular</p>
        </a>
        </div>
    </li>
    <li>
      <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(6)" class="hover-shadow cursor">
        <h2 style="color:white;">Ballet</h2>
        <p>Extracurricular</p>
        </a> </div>
    </li>
  </ul>
</div>

<!--<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>-->

<!-- musicalizacao -->
<div id="musicalizacao" class="modal">
  <span class="close cursor" onclick="closeModal('musicalizacao')">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">5 / 5</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(1)" alt="Musicalizacao 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(2, 'Mus')" alt="Musicalizacao 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(3, 'Mus')" alt="Musicalizacao 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(4, 'Mus')" alt="Musicalizacao 4">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(5, 'Mus')" alt="Musicalizacao 5">
    </div>
  </div>
</div>
<!-- /musicalizacao -->

<!-- corpo-e-movimento -->
<div id="corpo-e-movimento" class="modal">
  <span class="close cursor" onclick="closeModal('corpo-e-movimento')">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Corpo e Movimento 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Corpo e Movimento 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Corpo e Movimento 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Corpo e Movimento 4">
    </div>
  </div>
</div>
<!-- /corpo-e-movimento -->

<script>
function openModal(id) {
	if(id === 'musicalizacao'){
		document.getElementById('musicalizacao').style.display = "block";
		document.getElementById('accordion').style.display = "none";
        document.getElementById('masthead').style.display = "none";

	} else {
		if(id === 'corpo-e-movimento') {
			document.getElementById('corpo-e-movimento').style.display = "block";
			document.getElementById('accordion').style.display = "none";
			document.getElementById('masthead').style.display = "none"; 
		}
	}
  
}

function closeModal(id) {
	if(id === 'musicalizacao'){
		document.getElementById('musicalizacao').style.display = "none";
		document.getElementById('accordion').style.display = "block";
		document.getElementById('masthead').style.display = "block"; 
	} else {
		if(id === 'corpo-e-movimento'){
			document.getElementById('corpo-e-movimento').style.display = "none";
			document.getElementById('accordion').style.display = "block";
			document.getElementById('masthead').style.display = "block"; 
		}
	}
  
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n, item) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
    
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Ricardo Beira
      Boa tarde.
       
      Sou bem leigo em php, sei o básico do básico e preciso muito de ajuda.
      Preciso enviar 1000 emails, porém queria dividir os envios de 50 por vez.
      Queria um campo onde ecolocava os 1000 emails ou importando de um txt e ele fizesse o processo de envio de 50-50 automaticamente.
       
    • Por Kelly Ferracine
      Adcionei um relógio no site, mas quando atualizo a pagina ele some e logo aparece, isso ta causado problema, pois a div abaixo sobe fazendo ficando esquisito, alguém poderia me ajudar?? Agradeço a atenção
    • Por ghlevin
      Estou precisando fazer um refresh automático em algumas páginas do site de um cliente. Porém, esse refresh precisa acontecer apenas UMA vez.
      Eu sei que daria pra eu colocar a meta tag abaixo, por exemplo:
      <meta content="3;url=http://www.meusite.com.br/index.php" http-equiv="Refresh" /> Mas aí ela atualizaria sempre a cada 3 segundos. E eu queria que atualizasse só uma vez. Como dá pra fazer isso? Com uso de SESSION, COOKIE ou alguma outra coisa?
    • Por Luisa Di Domenico
      Oi, pessoal
      Não tenho muito conhecimento em desenvolvimento, por isso estou aqui pra pedir ajuda.
      Contratei um desenvolvedor para adaptar um tema do wordpress as minhas necessidades, o trabalho foi entregue porém ficou faltando alguns detalhes, os quais a maioria eu já corrigi e um não consigo alterar de jeito nenhum. E a pessoa que contratei não me responde mais.
       
      Não consigo fazer com que abra uma nova janela quando a pessoa clica em "Candidatar-se à vaga". Atualmente ele abre um popup com o link da vaga.

                     <?php if ( candidates_can_apply() ) :
                      $external_apply = get_post_meta( $post->ID, '_apply_link', true ); 
                      if(!empty($external_apply)) {
                          echo '<a class="button" target="_blank" href="' . esc_url( $external_apply ) . '">' . esc_html__( 'Candidatar-se à Vaga', 'jobseek' ) . '</a>';
                      } else {
                          get_job_manager_template( 'job-application.php' ); 
                      }
                  endif; ?>
       
      Alguém pode me dar um luz, plis? 
      Obrigada!
       
    • Por Mark Augusto
      Tenho usado/tentado usar os seguintes plugins:
      config.extraPlugins = 'justify'; config.extraPlugins = 'sourcedialog'; config.extraPlugins = 'pagebreak'; Eles funcionam, mas quando coloco mais de um extraPlugins outro sai, é sempre o mais atual que entra. Nesse caso, dos 3 adicionados, somente um funciona... Alguém sabe como faço para usar todos?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.