Jump to content

Search the Community

Showing results for tags 'lightbox'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Calendars

  • Comunidade iMasters

Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Web Development
    • HTML e CSS
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets and other environments
    • WordPress
    • Mobile
    • Agile
    • Desenvolvimento de Games
    • Banco de Dados
    • Design and UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • iMasters's pub

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 11 results

  1. Jack Oliveira

    Abrir imagem no lightbox

    Olá boa noite pessoal preciso de uma ajuda em CSS...... Se puderem preciso abrir uma imagem feito lightbox, da maneira que esta esta abrindo em uma nova url mostrado o diretório das imagem no navegador. codigo <div class="col overlay building"> <img src="<?php echo ConfigPainel('base_url'); ?>/control/thumb.php?src=<?php echo ConfigPainel('site_url'); ?>assets/imagem/album/fotos/<?php echo $fotos['imagem']; ?>&w=400&h=400" alt="<?php echo $fotos['titulo']; ?>" class="img-responsive"> <div class="over text-center"> <strong class="title text-uppercase"><a href="<?php echo ConfigPainel('site_url'); ?>assets/imagem/album/fotos/<?php echo $fotos['imagem']; ?>"> Ampliar </a></strong> <span class="sub-title" style="color:#FFF;"><?php echo $fotos['titulo']; ?></span> </div> </div> fico no aguardo.....
  2. fabiodurgante

    abrir lightbox ao carregar pagina

    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 ?????
  3. 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.
  4. Amigos, seria possível vincular uma lightbox a uma imagem mapeada? Para quando clicar na parte de referencia da imagem abrir a Lightbox?
  5. 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>
  6. 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!
  7. 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>
  8. 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
  9. 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?
  10. 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.
  11. 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>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.