Relacionar atributo rel a classe de div
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.Discussão (4)
Carregando comentários...