Ir para conteúdo
Entre para seguir isso  
gisesonia

Transformar galeria de imagens jquery em Javascript

Recommended Posts

Tem vários modelos de galeria de imagens na internet, mas para aprender eu queria entender duas coisas:

1 - Como eu sei qual é a nova imagem e qual é a velha no código

2 - Como trocar a imagem dentro da div container ao clicar em uma thumbnail

Achei o código Jquery que é exatamente o que eu preciso, só que eu queria transformar em javascript e não consegui por causa desses dois motivos, não sei como trocar a imagem com clique no Javascript, achei muitos tutoriais que explicam com mouseover:

http://www.livrosdomaujor.com.br/jquery/jq3/cap_12/arquivo-12.3.1c.html


//<![CDATA[
	$(document).ready(function() {
		$('.abre-fecha').hide();
		$('<div id="tela" ><img src="10.jpg" alt="Descrição da imagem" /></div>')
		.insertAfter('#galeria');
		$('.foto').click(function(event) {
			event.preventDefault();
			$('#tela img').remove();
			$('<img />')
			.attr('src', $(this).attr('src'))
			.css('opacity', '0.3')
			.appendTo('#tela')
			.animate({opacity: 1 }, 2000);
		});
	});
   // ]]>

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
Entre para seguir isso  

  • Conteúdo Similar

    • Por helkton
      Olá galera blz com ocêis rss
      seguinte como faço para chamar a galeria e ou a câmera na minha app. Tipo igual o olx tem uma imagem que ao clicar nos da a opção de abrir a câmera e tirar uma foto ou abrir a galeria e escolher uma foto.
      Olhem o que tenho..
      btnCamera.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(Intent.createChooser(intent, "Tire uma Foto"), CAMERA_PICTURE); } }); este botão Onclick me chama a câmera pega a foto tirada e me mostra aqui...
      public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); Bitmap bitmap = (Bitmap)data.getExtras().get("data"); imgProd.setImageBitmap(bitmap); } agora to tentando esse outro botão para abrir a galeria....
      btnGaleria.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.setType("image/*"); startActivityForResult(intent, SELECT_PICTURE); } }); Bom este botão me chama a galeria para eu escolher a imagem porem não me retorna a imagem selecionada como no botão btnCamera acima
      Agora como eu faço para abrir com um único botão ele me dar a opção de escolher tirar uma foto ou pegar da galeria???
      agradeço aos camaradas
    • Por Zaelcs
      Olá, esse é meu primeiro post, eu sou MUITO novato com o desenvolvimento de sites, na realidade esse é meu primeiro trabalho sério, sendo que antes a unica coisa que eu programei eram scripts de jogos e algumas coisas pra minecraft haha!

      O meu problema é o seguinte, eu sou um animal  eu preciso criar um site para uma imobiliaria, no qual precisaria incluir uma "biblioteca" de itens onde cada item seria um imóvel com diversas fotos e videos, a "biblioteca" precisaria de uma ferramenta de busca e que pudessem ser separados os itens por tags (n° de quartos, vagas pra carro), além disso seria interessante se houvesse uma interface "user-friendly" para os administradores da imobiliária adicionarem novos imóveis... 
       
      Estou esperançoso de que eu possa fazer tudo isso apenas com html e css, pois eu creio que só necessitaria usar javascript caso precisasse de carrinho de compras e um mecanismo de pagamento... mas não, o contato será feito via telefone ou e-mail entre o comprador e os próprios corretores.
       
      Espero não estar sendo muito folgado... é minha primeira tentativa nesse ramo que eu AMO, mas nunca tive oportunidade de adentrar.
    • Por GiselePassoni
      Bom dia a todos do forum.
      Comecei a pouco tempo com laravel e ainda me perco bastante com ele. Preciso desenvolver uma galeria de fotos responsiva para as notícias cadastradas. Ao acessar uma noticia, aparece o texto referente à notícia e sua respectiva galeria de fotos. 
      A listagem de todas as notícias (titulo) com paginação, eu consegui fazer. Minha dúvida é como vou fazer para ao clicar em um dos títulos, abrir a noticia com o texto, etc e a galeria.
      Teria algum curso online que vcs poderiam me indicar? Ou alguma vídeo-aula? Procurei, mas não achei nada que pudesse me ajudar!
      Desde já agradeço!
    • Por bia_cabele
      Boa noite, estou criando uma galeria, usando html e css,  e quero fazer uma animação quando clico na miniatura que fica na parte inferior, sendo assim acontece uma animação rolando para baixo automaticamente, para isso é necessário um códico JavaScript e Jquery, mas quando eu coloco o códico não funciona, vou deixar imagens de como estou fazendo e o link de onde fiz.
       
      link do vídeo,-- se colocarem no final vão saber como que eu quero--   tirem espaços : https://ww w .youtube.  com/wat ch?v=Q4odePg5zB8&t=498s
       
      Aqui está o código JavaScript:
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    

              </script>
              <script type="text/javascript">
                  $(document).ready(function(e) {
                  $('a').click(function(e){
                          $('#rolagem').animate({
                                  scrolltop: $( $.attr(this, 'href') ).offset().top + $('#rolagem').scrolltop()
                          }, 2000);
                          return false;
                  });
          });
              </script>
       
      SOU NOVO AQUI, SE EU FIZ ALGO ERRADO ME AVISE
       
      Agradeço desde já´ :)
       


    • Por sumoner80
      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.
×

Informação importante

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