Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

carlosmadeiracunha

Relacionar atributo rel a classe de div

Recommended Posts

Boa noite, um dia desses eu fiz um blog para um site e nas imagens eu usei o Magnific PopUp ( Documentação), e achei bacana pela facilidade de se usar, cheguei a abrir um tópico ( Como verificar se uma imagem contém link? ) pra poder implementar oque eu queria, quem quiser ver o blog, está aqui http://www.neoraddepoxipiso.com.br/blog.php , é só clicar nas imagens que abrirão em uma galeria lightbox.

 

Só que agora eu estou tentando bolar uma galeria de imagens, não pra este blog mas pra poder usar em um projeto posterior a este, é o seguinte, eu tenho um div com a classe zoom-gallery e um atributo rel com conteúdo indicando, por exemplo uma categoria e dentro deste div eu tenho várias imagens com links contendo a classe gallery_popup que acionam o Magnific popUp, como mostrado abaixo.

<div class="zoom-gallery" rel="aguia">    
        <a class="gallery_popup" href="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" data-info="O vôo nas montanhas geladas" title="O vôo nas montanhas geladas">
            <img src="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" alt="O vôo nas montanhas geladas" class="thumb">
        </a>
        
        <a class="gallery_popup" href="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" data-info="A visão da águia voando" title="A visão da águia voando">
            <img src="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" alt="A visão da águia voando" class="thumb">
        </a>
        
</div>

<div class="zoom-gallery" rel="animais">
		<a class="gallery_popup" href="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" data-info="Coelhinho" title="Coelhinho">
            <img src="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" alt="Coelhinho" class="thumb">
        </a>
        
        <a class="gallery_popup" href="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" data-info="Ao amanhecer" title="Ao amanhecer">
            <img src="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" alt="Ao amanhecer" class="thumb">
        </a>
</div>

<!--b sem o atributo rel -->
<div class="zoom-gallery">
		<a class="gallery_popup" href="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" data-info="Coelhinho" title="Coelhinho">
            <img src="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" alt="Coelhinho" class="thumb">
        </a>
        
        <a class="gallery_popup" href="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" data-info="Ao amanhecer" title="Ao amanhecer">
            <img src="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" alt="Ao amanhecer" class="thumb">
        </a>
</div>

Eu estou tentando fazer com que cada div.zoom-gallery abra somente as imagens relativas ao seu respectivo atributo rel.

Da forma que está, quando o lightbox é acionado, todas as imagens entram na galeria independente de existir o atributo rel ou não ou do conteúdo deste atributo. 

 

Eu estava testando aqui e por curiosidade eu copiei o script que aciona o lightbox pela classe zoom-gallery e mudei a classe acionadora para zoom-gallery-rel, é claro que somente as imagens que estiverem dentro do div.zoom-gallery-rel abrem, partindo disso aí, eu imaginei que se eu conseguisse, com javascript ou Jquery, mudar div.zoom-gallery para div.zoom-gallery-rel eu conseguiria isso, mas pra funcionar perfeito teria que fazer com que as classes se relacionassem com o atributo rel também.

Mas se eu conseguir fazer este relacionamento não vou precisar da classe zoom-gallery-rel, seria só relacionar a classe zoom-gallery com o atributo rel e pronto.

 

Está meio confuso, oque eu quero é mais ou menos oque acontece com o prettyPhoto que para agrupar as imagens em galerias basta atribuir um rel com prettyPhoto[galeria1].

Porque não usar o prettyPhoto?? Porque acho ele muito pesado, só isso. 

Tem como fazer isso que eu quero, se entenderam é claro.

 

o script que estou usando é esse aqui.

$(document).ready(function() {
	/*****************************************
		GALERIA DE IMAGENS
	******************************************/
	/*****************************************
		zoom-gallery
	******************************************/
	$('.zoom-gallery').magnificPopup({
		delegate: 'a.gallery_popup',
		type: 'image',
		closeOnContentClick: false,
		closeBtnInside: false,
		mainClass: 'mfp-with-zoom mfp-img-mobile',
		image: {
			verticalFit: true,
			titleSrc: function(item) {
				return item.el.attr('data-info');
			}
		},
		gallery: {
			enabled: true
		},
		zoom: {
			enabled: true,
			duration: 300, 
			opener: function(element) {
				return element.find('img');
			}
		}
		
	});
	
	/*****************************************
		zoom-gallery-rel
	******************************************/
	$('.zoom-gallery-rel').magnificPopup({
		delegate: 'a.gallery_popup',
		type: 'image',
		closeOnContentClick: false,
		closeBtnInside: false,
		mainClass: 'mfp-with-zoom mfp-img-mobile',
		image: {
			verticalFit: true,
			titleSrc: function(item) {				
				return item.el.attr('data-info');
			}
		},
		gallery: {
			enabled: true
		},
		zoom: {
			enabled: true,
			duration: 300, 
			opener: function(element) {
				return element.find('img');
			}
		}
		
	});

Desde já agradeço e me desculpem se escrevi demais e ficou muito texto pra ler, é que eu tento passar por escrito oque eu estou pensando.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por enquanto só cheguei até aqui, conseguindo somente pegar o conteúdo do atributo rel, falta agora fazer o relacionamento deste conteúdo com o div pra identificar que é pra mostrar somente imagens que estejam dentro deste div.

$('.zoom-gallery').each(function() {
	var zoomGallery = $(this);
	zoomGallery.attr('data-rel');
	var relzoomGallery = zoomGallery.attr('data-rel');
	
	if(relzoomGallery == null){
		
		alert('Não existe relacionamento com conteúdo do atributo data-rel:\n '+ relzoomGallery);
	}
	else if(relzoomGallery){
		var relzoomGallery = $(this);
		//$(this).attr('class','zoom-gallery-rel');
		$(".zoom-gallery").addClass("zoom-gallery-rel");
		$(".zoom-gallery").removeClass("zoom-gallery");
        
			
			alert('Existe relacionamento com conteúdo do atributo data-rel:\n '+ relzoomGallery);
		
		}	
	
})

Estou seguindo a lógica de primeiro identificar o conteúdo do atributo rel, depois de acionar a galeria nas fotos dentro do div[rel].

Eu acho que vou chegar lá logo, se alguém ajudar vai ser mais rápido. 

Valeu.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tive algum avanço mas não a ponto de postar aqui, está difícil relacionar os atributos.

Estou precisando de um empurrãozinho. 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Primeiramente, hospedei temporariamente um exemplo do que eu já tenho neste link aqui.

link removido

Bom, não passei disso aqui,

$(document).ready(function() {
	$('*[data-rel]').each(function() {
		var dataRel = $(this);
		var conteudoRel = dataRel.attr('data-rel');
		
		if(conteudoRel == null || !conteudoRel){
			
			alert('Não existe classe '+ conteudoRel +' no div com data-rel');
			/*****************************************
				se não existir relacionamento
			******************************************/
			$('.zoom-gallery').magnificPopup({
				delegate: 'a.gallery_popup',
				type: 'image',
				closeOnContentClick: false,
				closeBtnInside: false,
				mainClass: 'mfp-with-zoom mfp-img-mobile',
				image: {
					verticalFit: true,
					titleSrc: function(item) {
						//return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">Link imagem</a>';
						return item.el.attr('data-info');
					}
				},
				gallery: {
					enabled: true
				},
				zoom: {
					enabled: true,
					duration: 300, // don't foget to change the duration also in CSS
					opener: function(element) {
						return element.find('img');
					}
				}
				
			});//$('.zoom-gallery').magnificPopup({
			/*****************************************
					//imagem com link automático
			******************************************/			
			
		}//if(conteudoRel == null || !conteudoRel){
		else if(conteudoRel){
			
			alert('Existe classe="'+ conteudoRel +'" no div com data-rel="'+ conteudoRel +'"');
			
			var ClassRel = '.'+ conteudoRel;
			$('[data-rel]').addClass(conteudoRel);
			
			$('.'+ conteudoRel).each(function() {
				/*****************************************
					se existir relacionamento
				******************************************/
				$(ClassRel).magnificPopup({
					delegate: 'a.gallery_popup',
					type: 'image',
					closeOnContentClick: false,
					closeBtnInside: false,
					mainClass: 'mfp-with-zoom mfp-img-mobile',
					image: {
						verticalFit: true,
						titleSrc: function(item) {
							//return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">Link imagem</a>';
							return item.el.attr('data-info');
						}
					},
					gallery: {
						enabled: true
					},
					zoom: {
						enabled: true,
						duration: 300, // don't foget to change the duration also in CSS
						opener: function(element) {
							return element.find('img');
						}
					}
					
				}); //$(ClassRel).magnificPopup({
				/*****************************************
					// imagem com link automático
				******************************************/
					
			})//$('.'+ conteudoRel).each(function() {
			
		} //else de if(conteudoRel == null){
		
	})//$('*[data-rel]').each(function() {

});

Modificação no html da galeria, retirei a classe zoom-gallery e estou adicionando dinamicamente uma classe com nome idêntico ao valor do atributo data-rel conforme script acima.

HTML modificado:

<!-- container com data-rel aguia -->
<div data-rel="aguia">
	<a class="gallery_popup" href="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" rel="tooltip" data-info="O vôo nas montanhas geladas" title="O vôo nas montanhas geladas">
		<img src="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" alt="O vôo nas montanhas geladas" class="thumb">
	</a>
                
	<a class="gallery_popup" href="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" rel="tooltip" data-info="A visão da águia voando" title="A visão da águia voando">
		<img src="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" alt="A visão da águia voando" class="thumb">
	</a>
</div>

<!-- container com data-rel carrocas -->
<div data-rel="carrocas">
	<a class="gallery_popup" href="http://www.travessiadasamericas.com.br/wp-content/uploads/2012/04/zCarro%C3%A7a-2.jpg" rel="tooltip" data-info="carroça com cockpit" title="carroça com cockpit">
		<img src="http://www.travessiadasamericas.com.br/wp-content/uploads/2012/04/zCarro%C3%A7a-2.jpg" alt="carroça com cockpit" class="thumb">
	</a>
                
	<a class="gallery_popup" href="https://www.listenandlearn.com.br/blog/wp-content/uploads/2014/09/George_Bowman_Hopetoun_2005_horse_driving.jpg" rel="tooltip" data-info="Carroça aberta" title="Carroça aberta">
		<img src="https://www.listenandlearn.com.br/blog/wp-content/uploads/2014/09/George_Bowman_Hopetoun_2005_horse_driving.jpg" alt="Carroça aberta" class="thumb">
	</a>
</div>

Consegui identificar quais div´s contém o atributo data-rel e também identificar o valor deste atributo e passar este valor para uma classe adicionada dinamicamente, mas oque está acontecendo é que sem um looping, ( acho eu ) o script está abrindo todas as imagens que estejam dentro de div´s com data-rel independente do valor, ele abre como se somente o primeiro valor existisse, no exemplo acima, temos o valor de data-rel do primeiro div como aguia e no segundo como carrocas, neste exemplo também temos duas imagens em cada div somando quatro imagens, o script está abrindo todas as quatro e não somente duas a cada container, sei disso porque tem um contador na galeria pra mostrar quantas imagens estão abrindo.
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

RESOLVIDO

-------------------------------

Coisa boa, agora foi identificado o problema, galeria funcionando certinho.

o problema estava nesta linha aqui:

$('[data-rel]').addClass(conteudoRel);

//mudei para
data-rel.addClass(conteudoRel);

Mudei para a variável pois no início eu indico que a var dataRel = $(this);

$('*[data-rel]').each(function() {
        let dataRel = $(this);

e também troquei onde tinha a indicação de variável "var" por "let".

Um amigo me ajudou e me explicou que $('[data-rel]') neste caso é muito genérico e o script estava interpretando que era pra adicionar a classe com o valor do primeiro atributo data-rel em todos os div´s contendo data-rel, no caso, "aguia", explicou por alto que "let" não faz entrar no escopo global, foi oque eu entendi, resolvemos por whatsApp pois moramos distantes, eu ainda vou precisar de mais informações que ele disse que me dará quando estivermos juntos.
 

Precisei de ajuda nisso, não queria incomodar ele mas foi preciso, me matei 3 dias até tomar a iniciativa de pedir ajuda a ele pois aqui ninguém fez nenhum comentário, mas deixa quieto porque foi até bom, eu aprendi pra caramba estudando fóruns e pesquisando pela internet, aprendi um pouco de tudo, até do que nem precisava, com ele foi uma aula de uns 30 minutos, sim 30 minutos, o bastante pra ele ler, entender e me mostrar o erro, foi bastante aprendizado e vou aprender mais.

 

Até.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma pequena dúvida, referente a PEGAR AUTOMATICAMENTE a HORA e alimentar o campo INPUT.
       
      Tenho uma rotina, que estava aparentemente funcionando corretamente, mas agora estou tendo problema.
       
      A rotina, pega a HORA atual e informa automaticamente o INPUT, não estou entendendo porque agora não está mais fazendo.

      Abaixo a rotina.

       
      <div class="col-lg-3"> <label for="cotaHrsinicio">Hora da Abertura<span class="required">*</span></label> <div class="controls"> <input type="time" id="cotaHrsinicio" name="cotaHrsinicio" class="form-control" style="width:100%;" value="" /> <!-- NESSE INPUT A ROTINA INFORMA A DATA ATUAL --> </div> </div>  
       
      function date_time() { var date = new Date(); //var am_pm = "AM"; var hour = date.getHours(); /* if(hour>=12){ am_pm = "PM"; } */ if (hour == 0) { hour = 12; } if(hour<12){ hour = hour - 12; } if(hour>12){ hour + 12; } if(hour<10){ hour = "0"+hour; } var minute = date.getMinutes(); if (minute<10){ minute = "0"+minute; } var sec = date.getSeconds(); if(sec<10){ sec = "0"+sec; } /* *Formato da Hora (h:m:s) * Passar para a Variável: Hora Atual */ var cotaHrsinicio = document.getElementById("cotaHrsinicio").value = hour+":"+minute; }
      Grato,
       
      Cesar

       
    • Por luiz monteiro
      Bom dia.
      Estou precisando formatar um campo de entrada type text somente para numero com a seguinte formatação.
      se menor que 999 mostrar dessa forma mesmo, nesse caso seria para centena.dezena.unidade. Tipo 001 até 009 depois 010 até 099 depois 100 até 999
      de 1.000 até 999.999  mostrar com o ponto, nesse caso seria para milhar.centena.dezena.unidade. Tipo 001.000 até 001.999 e assim por diante.
      de 1.000.000 até 9.999.000, nesse caso seria para milhão.milhar.centena.dezena.unidade. aqui mesma ideia....
      Parecidos com aqueles campos de preço, que ao digitar os zeros ficam a esquerda até o valor atingirem a unidade correspondente.
       
      Tentei adaptar esse que encontrei na net.
      function moeda(a, e, r, t) { let n = "" , h = j = 0 , u = tamanho2 = 0 , l = ajd2 = "" , o = window.Event ? t.which : t.keyCode; if (13 == o || 8 == o) return !0; if (n = String.fromCharCode(o), -1 == "0123456789".indexOf(n)) return !1; for (u = a.value.length, h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++) ; for (l = ""; h < u; h++) -1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h)); if (l += n, 0 == (u = l.length) && (a.value = ""), 1 == u && (a.value = "0" + r + "0" + l), 2 == u && (a.value = "0" + r + l), u > 2) { for (ajd2 = "", j = 0, h = u - 3; h >= 0; h--) 3 == j && (ajd2 += e, j = 0), ajd2 += l.charAt(h), j++; for (a.value = "", tamanho2 = ajd2.length, h = tamanho2 - 1; h >= 0; h--) a.value += ajd2.charAt(h); a.value += r + l.substr(u - 2, u) } return !1 } Mas sem sucesso.
       
      Grato por enquanto.
       
       
       
    • Por Giovanird
      O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
      Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php  tudo vai junto.  Será que isto é possivel?

      Desde já meu muito obrigado!
      <script> function atualiza(){ var url = 'centro.php'; $.get(url, function(dataReturn) { $('#centro').html(dataReturn); }); } setInterval("atualiza()",60000); </script>  

    • Por luiz monteiro
      Bom dia. Eu estou tentando encontrar uma maneira de evitar que após o usuário selecionar, se selecionar, uma imagem, essa seja substituída apenas por outra selecionada. Porém quando o usuário cancela a seleção, o input file remove o arquivo se já foi selecionado anteriormente.
      Essa é a estrutura que estou usando HTML
      form action="#" method="post" name="formulario" id="formulario" enctype="multipart/form-data"
      input type="file" name="file_name[]" br input type="file" name="file_name[]" br button enviar /button /form
      JS PURO
      Peguei esse script em um post aqui do stackoverflow e adaptei
      script type="text/javascript"
      let formulario = document.querySelector("#formulario"); formulario.addEventListener("change", (e)=>{ e.preventDefault(); var file = e.target.files[0]; if (e.target.files.length === 1 && e.target.files !== undefined && e.target.files !== null && file.type.match('image.*')) { console.log("if okay"); } else { //preciso entender o que devo fazer aqui para verificar se há arquivo no DOM desse target caso, o usuário cancele a seleção, para evitar que se há um arquivo no DOM esse permaneça. console.log(file); //CASO O USUÁRIO CANSELA A SELEÇÃO, RETORNA undefined } }); /script
      O if está correto, porém o que falta é o que fazer no else. Agradeço desde já.
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
×

Informação importante

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