-
Conteúdo Similar
-
Por fabiodurgante
ola tenho o lightbpox na pagina funcionando tudo OK quando clico no link ele abre lightbox, agora quero abrir 1 vez automaticamente quando carrega o site, abro o site ele abre o lightbox como posso fazer ???
para abrir lightbox com link assim
<a class="example-image-link"href="teste.jpg" data-lightbox="example-1">
<img class="example-image" src="teste1.jpg" width="90px" height="100px">
</a>
eu clico na imagem teste1,jg ele abre lightbox toda tela grande teste.jpg
abrir automaticamente o teste.jpg quando abrir o site como faco ?????
-
Por Aureo Almeida
Eu estou desenvolvendo um carrinho de compras num arquivo chamando carrinho.php e entre os scripts disponíveis da API para pagar através PagSeguro escolhi um que chama um arquivo com as informações da API (pagseguro.php), pega os dados presente nele e abre API do Checkout Transparente para o pagamento. Este é o script:
<script> function enviaPagseguro(){ $.post('pagseguro.php','',function(data){ $('#code').val(data); $('#comprar').submit(); }) } </script> O que eu não estou conseguindo fazer é passar o valor total das compras do carrinho para o arquivo com os parâmetros da APPI. Com valores fixos a API funciona bem, como posso exemplificar com os seguintes parâmetros:
$data['token'] =OCULTO'; $data['email'] = OCULTO'; $data['currency'] = 'BRL'; $data['itemId1'] = '1'; $data['itemQuantity1'] = '1'; $data['itemDescription1'] = 'Produto de Teste'; $data['itemAmount1'] = '299.00'; $url = 'https://ws.pagseguro.uol.com.br/v2/checkout'; O que eu desejo é fazer três coisas, que não estou sabendo fazer.
Primeira: passar como valor do parâmetro $data['itemAmount1'] a variável que possuo na página que faz a totalização da compra, chamada de $ttcompra;
Segunda: passar como valor do parâmetro $data['itemQuantity1'] a variável que mostra o total de itens, chamada $ttitems.
E a terceira é que desejaria que nas informações a serem enviadas para o PagSeguro estivesse um novo item, com o valor do código da compra.
É possível isso nesta API eu estou utilizando? Busquei na documentação dela no PagSeguro e não achei. Eles estão mudando a página e não se encontra muita coisa.
-
Por andrade6g
Amigos, seria possível vincular uma lightbox a uma imagem mapeada? Para quando clicar na parte de referencia da imagem abrir a Lightbox?
-
Por glrtlucas
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')">×</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)">❮</a> <a class="next" onclick="plusSlides(1)">❯</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')">×</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)">❮</a> <a class="next" onclick="plusSlides(1)">❯</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>
-
Por InstaladorX
Estou enfrentando problemas para mostrar uma imagem em um lightbox.
Todos os caminhos indicados para a localização da imagem já foram testados mas a imagem não é mostrada.
O código utilizado no arquivo .js é este:
var img = document.createElement('img');
img.src = "imagens/imagem.png";
img.alt = "imagem";
lightbox.appendChild(img);
O arquivo imagem.png está dentro da pasta imagens mas, não importa onde ele se encontra pois a imagem nunca é mostrada.
já adicionei:
img.src = "imagem.png"; - nada
img.src = "/imagem.png"; - nada
img.src = "imagens/imagem.png"; - nada
img.src = "/imagens/imagem.png"; - nada
img.src = "./imagens/imagem.png"; - aqui já é um absurdo.
img.src = "../imagens/imagem.png"; - absurdo também.
já coloquei a imagem junto ao arquivo js ou seja, na mesma pasta do js e nada.
já coloquei o caminho completo para a imagem mas, não adiantou.
Por fim, fiz uma inspeção do elemento pelo navegador e observei que a tag <img> não é fechada na criação do document.createElement('img'); e no final é adicionado a tag style=""> como mostra o exemplo abaixo que copiei diretamente do inspecionador de elementos.
<img src="imagens/imagem.png" alt="imagem" style="">
Pois bem, a mim me pareceu que o document.createElement('img'); gerou esta tag style=""> no final do código e que isso poderia estar causando o problema da imagem não aparecer.
Mas por enquanto, sou apenas um estudante.
Se alguém já possou por isso, se pode enxergar ou tem a solução para este erro, seria interessante posta-la aqui.
Muito obrigado!
-
POWERED BY:
