Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''lightbox''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 17 registros

  1. andrade6g

    Vincular lightbox a uma imagem mapeada

    Amigos, seria possível vincular uma lightbox a uma imagem mapeada? Para quando clicar na parte de referencia da imagem abrir a Lightbox?
  2. glrtlucas

    Lightbox gallery

    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>
  3. 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!
  4. Wictor Menkalha

    lightbox erro (imagem abre ao fundo)

    Fala galera, sou novo aqui mais quem sabe alguém pode me ajuda, estou programando um site aqui e esta dando um erro na lightbox, ela esta abrindo ao fundo. (imagem em anexo) alem de esta abrindo ao fundo do background ela esta grande demais segue o código usado: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Supermercado Marinho</title> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="vendor/css/style.css" /> <link href="path/to/lightbox.css" rel="stylesheet"> <style type="text/css"> .galeria img{ width: 50%; padding: 15px; } .galeria img:hover{ cursor: pointer; } /*estilo do bg*/ .bg{ position: absolute; background-color: #333; opacity: 0; top: 0px; left: 0px; display: none; height: 100%; width: 100%; } .lb{ position: relative; top: 10%; left: 25%; display: none; border:10px solid #fff; box-shadow: 2px 2px 12px #333; background:#fff; text-align: center; .lb {z-index: 1000;} } .lb img{ opacity: 0; width: 100%; height: 100%; } /*botão fechar*/ .close{ color: #fff; background-color: #000; width: 20px; height: 15px; text-align: center; position: absolute; right: -5px; bottom: -20px; padding: 0 auto; } .close:hover{ cursor: pointer; } </style> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://fonts.googleapis.com/css?family=Baumans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet"> <body> <div id="container" class="container"> <div id="page" class="container-fluid"> <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img src="vendor/images/logo.png" /></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="empresa.html">EMPRESA</a></li> <li><a href="ofertas.html">OFERTAS</a></li> <li><a href="fotos.html">FOTOS</a></li> <li><a href="receitas.html">RECEITAS</a></li> <li><a href="contato.html">CONTATO</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <script type="text/javascript" src="jquery-1.12.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.galeria img').click(function(){ $('.bg').animate({'opacity':'0.60'}, 500, 'linear'); $('.bg, .lb').css('display','block'); var big = $(this).attr('src'); $('.lb img').attr('src', big); $('.lb img').animate({'opacity':'1.00'},1500, 'linear'); }); $('.close').click(function(){ $('.lb img').css('opacity','0'); $('.bg, .lb').css('display','none'); }); }); </script> </head> <section> <div class="galeria"> <img src="vendor/images/ENCARTE_204.jpg"div=""style="width: 450px;height: 550px;"> <img src="vendor/images/ENCARTE_(2).jpg" div=""style="width: 450px;height: 550px;"> <img src="vendor/images/ENCARTE_(3).jpg" div=""style="width: 450px;height: 550px;"> <img src="vendor/images/ENCARTE_4).jpg" div=""style="width: 450px;height: 550px;"> </div> </section> </div> <div class = "bg"></div> <!--box de imagens--> <div class="lb"> <img src=""/> <div class="close">FECHAR</div> </div> <div id="footer" class="container-fluid"> <div style="height:35%; width: 100%; display: inline-block;"></div> <div id="footerContent"> <div class="footerItem col-md-2 col-xs-6"> <h4>LOJAS FÍSICAS</h4> <ul> <li><a href="">Sobre o Marinho</a></li> <li><a href="">Missão e Valores</a></li> <li><a href="">Código de Ética</a></li> <li><a href="">RH - Trabalhe Conosco</a></li> <li><a href="">Concessões</a></li> <li><a href="">Ofertas</a></li> <li><a href="">Sustentabilidade</a></li> <li><a href="">Imprensa</a></li> </ul> </div> <div class="footerItem col-md-3 col-xs-6"> <h4>MARINHO FEST 11</h4> <ul><p> <li><a href="">Conheça o Programa</a></li> <li><a href="">Parceiros</a></li> <li><a href="">Cupom</a></li> <li><a href="">Lojas</a></li> <li><a href="">Regulamento</a></li> <li><a href="">Perguntas Frequentes</a></li> <li><a href="">Contato</a></li></p> </ul> </div> <div class="footerItem col-md-3"> <h4>ATENDIMENTO</h4> <p>Nosso horário de atendimento é das 8 as 20h, de segunda a sábado.</p> <h2>32 3741-2809</h2> <p>Matriz</p> <h2>32 3741-2345</h2> <p>Filial</p> </div> <div class="footerItem col-md-4"> <h4>SIGA-NOS NAS REDES SOCIAIS.</h4> <ul> <li><a href=""><img src="vendor/images/faceIco.png" /> Fique por dentro das novidades. </a></li> <li><a href=""><img src="vendor/images/instaico.png" /> Conheça nossos produtos.</a></li> <li><a href=""><img src="vendor/images/youtubeico.png" /> Acompanhe nosso canal.</a></li> <li><a href=""><img src="vendor/images/twiterico.png" /> Fale com a gente.</a></li> </ul> </div> </div> </div> </div> <script src="vendor/bootstrap/js/jquery-3.2.1.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <script src="vendor/bootstrap/js/npm.js"></script> <script src="path/to/lightbox.js"></script> </body> </html>
  5. Davi Araújo

    Link no lightbox

    Bom dia amigos Em um site de um cliente coloquei um lightbox para abrir uma imagem ao carregar o site (http://www.wrlink.com.br/) Queria colocar um link nessa imagem, mas não sei como.... <link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.ie6.css" /> <![endif]--> <script type="text/javascript" src="js/lightbox/jquery.lightbox.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $.lightbox("images/panfleto.jpg"); }); </script> Como posso colocar um link? Grato
  6. Chronic

    Janela lightbox ao clicar no serviço

    Olá, estou com uma dúvida e não sei se é possível fazer isso, mas vamos lá. Tenho uma página de serviços no meu site, nessa página eu quero colocar um botão de saiba mais. Quando a pessoa clicar nesse botão gostaria que abrisse uma "janela" como um lightbox de imagem, e dentro dessa janela quero colocar as informações desse serviço. Não sei se deu pra entender muito bem, mas enfim... Tem como fazer isso em html e css?
  7. Olá, primeiramente um boa noite. sou novo aqui no forum e busco solução pra um problema que faz 1 semana que estou quebrando a cabeça para resolver. então vamos lá tenho esse lightbox HTML eu especifiquei o html só nos lightbox mesmo para não ficar muito grade o tópico. <div class="bgrid"> <h3 style="text-align:center;">Intelbrás AMT 2018</h3> <p style="text-align:center;">Click para abrir a imagem</p> <div class="row"> <div class="column"> <img src="servi/alarme/imodelo.png" width="200" height="100" onclick="openModal();currentSlide(1)" class="hover-shadow cursor center"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="servi/alarme/a.png" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="servi/alarme/b.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="servi/alarme/c.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="servi/alarme/d.jpg" style="width:100%;height:50%;"> </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="servi/alarme/a.png" style="width:100%" onclick="currentSlide(1)" alt="Intelbrás AMT 2018"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/b.jpg" style="width:100%" onclick="currentSlide(2)" alt="Intelbrás AMT 2018"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/c.jpg" style="width:100%" onclick="currentSlide(3)" alt="Intelbrás AMT 2018"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/d.jpg" style="width:100%" onclick="currentSlide(4)" alt=""> </div> </div> </div> <div class="service-content"> <p>discrição...</p> </div> </div> <!-- end bgrid --> <div class="bgrid"> <h3 style="text-align:center;">Central Elite 06 zonas</h3> <p style="text-align:center;">Click para abrir a imagem</p> <div class="row"> <div class="column"> <img src="servi/alarme/emodelo.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor center"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="servi/alarme/aa.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="servi/alarme/bb.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="servi/alarme/cc.jpg" style="width:100%;height:50%;"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="servi/alarme/dd.jpg" style="width:100%;height:50%;"> </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="servi/alarme/aa.jpg" style="width:100%" onclick="currentSlide(1)" alt="Central de Alarme Elite 6 zonas"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/bb.jpg" style="width:100%" onclick="currentSlide(2)" alt="Central de Alarme Elite 6 zonas"> </div> <div class="column"> <img class="demo cursor" src="servi/alarme/cc.jpg" style="width:100%" onclick="currentSlide(3)" alt="Central de Alarme Elite 6 zonas"> </div> <div class="column"> <img class="demo cursor" src="images/alarme/dd.jpg" style="width:100%" onclick="currentSlide(4)" alt="Central de Alarme Elite 6 zonas"> </div> </div> <div class="service-content"> <p>Discrição...</p> </div> </div> <!-- end bgrid --> CSS /*algumas config adicionais de style das páginas */ img.center { position: relative; top: 0; left: 90px; } body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; } .row > .column { padding: 0 0px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 50%; } /* 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: 500px; } /* 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; } .Slides { display: none; } .cursor { cursor: pointer } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: black; 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: #000000; 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) } JavaScript function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { 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; } O que acontece. tenho numa mesma página esses 2 lightbox só que o problema é um seguinte quando click no segundo lightbox abre as imagens do primeiro como se só tivesse 1 lightbox e eu gostaria que fossem individual pelo fato de ser produtos diferentes... posso estar enganado mais creio eu que pode ser os IDs mais de qualquer forma se alguém poder me ajudar Ficarei muito grato e também isso server para compartilhar também esse Ligthbox de imagem pra quem necessita. Novamente muito obrigado aguardo respostas E se precisar posso estar mandando um print do que está acontecendo.
  8. DinhoPHP

    Abrir imagem em lightbox ao abrir página

    Olá! Desenvolvi um site e desejo que uma página abra uma imagem em lightbox, essa imagem vai trazer um anúncio em evidência. Tenho dois scripts, aonde um, só faz isso por meio de link e o outro, ensina com o onload, porém segundo as instruções da página, não obtive êxito. Socorro!! Me ajudem!!!! Preciso muito disso. http://www.frescojs.com/documentation/options => Esse me atendeu em uma galeria, pensei em usá-lo em uma única foto mas é ativado por link http://www.tidbits.com.br/click-modal-plugin-de-jquery-para-fazer-modal-lightbox => O que eu achei ideal para a ocasião, porém, não consegui. <div id="interface"> <section id="conteudo"> <?php include 'cyrcle/cyrcle.php'; //include'cyrcle/cyrcle2.php'; ?> <article id="todas_divs_esq"> <img src="_img/cartaz_evento/anuncio.jpeg" class="fresco"/> <!--ESSE ABRE SOMENTE COM AÇÃO DO CLIQUE E PRECISA DA CLASSE FRESCO. DESEJO ALGO AUTOMATIZADO --> </article> </section> </div>
  9. ...tamanho da imagem. O "zoom" da imagem pode ser um Lightbox, imagem em tela cheia, ou qualquer coisa deste gênero.
  10. lucas1silva1s

    Ajuda com Lightbox!

    Olá Pessoal! Eu estou fazendo algo que explicadamente falando, é ridiculamente simples, mas na prática me parece que deve ser bem complicado. Seguinte: eu gerei um formulário no Google Forms, e queria colocar ele no site aqui da empresa, mas eu não queria inserir esse código em um lugar estático do site, o que eu quero basicamente, é que quando alguém abrir o site, tenha uma lightbox que abra depois de uns 5 segundos com essa tag que o Google forms me deu! Sabe? É só isso! Mas estou buscando na web sobre lightboxes, e tem muita complicação nisso que talvez não tenha necessidade para o meu caso! Os códigos que eu achei tem que usar até Java! Precisa mesmo? Ah, vale lembrar que se possível, queria que essa lightbox rodasse em dispositivos mobile também.. tem como? Tag do Formulário gerado: "<iframe src="https://docs.google.com/forms/d/1NwTDc6-qnbx2qEPBHcyRGnAa_Z69H2bCnG9bLD1LahI/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Carregando…</iframe>" Vou agradecer MUITO a ajuda para essa questão! Lucas Silva.
  11. Jeovane Carvalho

    Abrir combobox com efeito combobox ou lightbox

    Salve amigos programadores, estou com aqui com um probleminha que já revirei todos os fóruns inclusive aqui em especial no site do Jquery, e outos sites de plugins e não conseguir achar um exemplo do que queria fazer, o que acontece é que tenho um sistema de busca de imóveis neste site http://www.jcimoveisbrasil.com/inicio porém ele funciona normalmente, mas eu queria mudar a sua estrutura e efeitos, queria que quando o usuário clicar no botão BAIRROS ele irá abrir um efeito em lightbox e imprimir todos os bairros em uma checkbox, porém eu estou tentando aplicar isso dentro do java mas estou com dificuldades, se alguém puder me dar um help ficarei agradecido...
  12. ArthurCosta

    Problema no Primefaces + Lightbox - Java

    Fala galera, boa tarde! Estou com um problema de quebrar a cabeça aqui no trabalho, utilizando primefaces e lightbox. Estou querendo exibir a imagem em miniatura em baixo da descrição, na tela pro cliente. Entretanto, ta dando um erro de Scoped. JSF <p:dataTable id="tabelaAnexos" var="data" value="#{registroInformacaoManipularBean.form.anexoDtoList}" style="width:100%; margin-top:20px" emptyMessage="Não existem anexos para este registro"> <p:column headerText="Anexo" > <h:outputText value="#{data.nome}"/> </p:column> <p:column headerText="Descrição" > <h:outputText value="#{data.descricao}"/> <p:lightBox styleClass="imagebox" id="lighbox1"> <f:event type="preRenderComponent" listener="#{anexoInformacaoCRUDBean.iniciarArquivo(data)}"/> <h:outputLink value="#{anexoInformacaoCRUDBean.imagem}"> <p:graphicImage value="#{anexoInformacaoCRUDBean.imagem}"/> </h:outputLink> </p:lightBox> </p:column> <p:column> <p:commandButton icon="fa fa-eye" title="Visualizar" ajax="false" actionListener="#{anexoInformacaoCRUDBean.obterArquivo(data)}"> <p:fileDownload value="#{anexoInformacaoCRUDBean.arquivo}" /> </p:commandButton> <p:commandButton icon="fa fa-trash-o" title="Excluir" update=":tabelaAnexos" actionListener="#{anexoInformacaoCRUDBean.removerArquivo(data)}" rendered="#{not registroInformacaoManipularBean.isVisualizar()}" /> </p:column> </p:dataTable> Java package br.com.petrobras.ticepes.swot.jsf.registroinformacao.anexoinformacao; import org.primefaces.event.FileUploadEvent; import org.primefaces.model.DefaultStreamedContent; import org.primefaces.model.StreamedContent; import br.com.petrobras.ticepes.swot.jsf.commons.BaseBean; import br.com.petrobras.ticepes.swot.jsf.registroinformacao.RegistroInformacaoManipularBean; import br.com.petrobras.ticepes.swot.usecase.anexoinformacao.dtos.AnexoInformacaoDto; import org.omnifaces.cdi.ViewScoped; import javax.inject.Inject; import javax.inject.Named; import java.io.*; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; @Named @ViewScoped public class AnexoInformacaoCRUDBean extends BaseBean { private String nomeArquivo; private String descricao; private AnexoInformacaoDto anexoTemp; @Inject private transient RegistroInformacaoManipularBean manipularBean; @Inject private transient AnexoInformacaoService anexoInformacaoService; //OBTER private StreamedContent arquivo; //LIGHTBOX VISUALIZAR private StreamedContent imagem; //INICIAR O ARQUIVODTO private AnexoInformacaoDto arquivoSolicitado; public void obterArquivo(AnexoInformacaoDto arquivoSolicitado) { this.arquivo = new DefaultStreamedContent(new ByteArrayInputStream( arquivoSolicitado.getArquivo()), "", arquivoSolicitado.getNome() ); } public void iniciarArquivo(AnexoInformacaoDto arquivoSolicitado){ this.arquivoSolicitado = arquivoSolicitado; } public void setImagem(StreamedContent imagem) { this.imagem = imagem; } public StreamedContent getImagem(){ ByteArrayInputStream sdf = new ByteArrayInputStream(this.arquivoSolicitado.getArquivo()); return new DefaultStreamedContent(sdf, "image/jpg", this.arquivoSolicitado.getNome()); } public void removerArquivo(AnexoInformacaoDto arquivoRemover) { this.manipularBean.getForm().getAnexoDtoList().remove(arquivoRemover); } public void onFileUpload(FileUploadEvent event) { if(event.getFile().getSize() > 10000000){ super.messages.globalError("Tamanho do anexo superior a 10MB"); }else{ anexoTemp = new AnexoInformacaoDto(); nomeArquivo = event.getFile().getFileName(); anexoTemp.setArquivo(event.getFile().getContents()); anexoTemp.setNome(event.getFile().getFileName()); } } public void enviarArquivo(){ anexoTemp.setDescricao(this.descricao); if (this.manipularBean.getForm().getAnexoDtoList() == null){ this.manipularBean.getForm().setAnexoDtoList(new ArrayList<AnexoInformacaoDto>()); } this.manipularBean.getForm().getAnexoDtoList().add(anexoTemp); prepararProximoAnexo(); } private void prepararProximoAnexo(){ this.nomeArquivo = ""; this.descricao =""; this.anexoTemp = null; } public boolean desabilitarUpload(){ if(anexoTemp == null){ return true; }else { return false; } } public String getNomeArquivo() { return nomeArquivo; } public void setNomeArquivo(String nomeArquivo) { this.nomeArquivo = nomeArquivo; } public String getDescricao() { return descricao; } public void setDescricao(String descricao) { this.descricao = descricao; } public StreamedContent getArquivo() { return arquivo; } public void setArquivo(StreamedContent arquivo) { this.arquivo = arquivo; } } Erro Então, resumindo. Eu pego a imagem em byte, transformo utilizando o DefaultStreamedContent. Dá erro de Scoped. Outra observação é que o botão de download que criei funciona perfeitamente. Agradeço quem puder ajudar, serei muito grato!
  13. Olá, Estou usando um exemplo de Lightbox do site: http://lokeshdhakar.com/projects/lightbox2/ No Chrome funcionou certinho, porém no Firefox o botão "DETALHES" fica sublinhado. Segue o código: <a href="Anuncios/01.jpg" data-lightbox="01" data-title="PC GAMER 01"> <input type="button" value="DETALHES" /> </a> O que teria que ser alterado para o botão detalhes não ficar sublinhado no Firefox?
  14. Nilsonjts

    div lightbox não cobre toda a tela

    Boa noite galera! estou montando uma pg em um site de fotografias usando o lightbox do jquery. Ficou perfeito e tudo funciona que é uma beleza! porém a div que cobre toda a tela ao acionar uma imagem cobre apenas até um certo ponto. Eu imagino que é devido ao fato de a maioria das pessoas usarem poucas fotos, porém, é um site de fotografia e só para iniciar o negócio já postei 40 imagens. usando a tag position:fixed consegui fazer cobrir toda a extensão, mas funciona só ns comp de mesa... no tablet e no fone não funciona. o site esta no ar. Se alguém puder dar uma olhada, é na parte "ensaios e casamentos (portfólio)" o endereço é: nilsonjose.com.br Obrigado
  15. leoamrl

    Quero deixar essas imagens em uma lightbox

    Quero que as imagens dessa página: http://www.canatibago.com.br/novo/quem-usa/ ao clicar abra tipo um "pop up" , estilo lightbox, ao invés da maneira que está agora, quando clica abre a imagem sozinha e sai do site. Site rodando em wordpress, tem algum plugin que faça isso automaticamente ?
  16. Galera, o seguinte: Estou tetando fazer com que a galeria do wordpress, vire esse carousel http://leslolos.com/it-aint-easy-being-vert/ (Clique em alguma foto para vê). Não estou achando nenhum plugin, e ja tentei fazer de várias formas e não consegui.. Alguém pode me ajudaR? Abraços
×

Informação importante

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