Hi,
I am trying to have a sort filter on a gallery of divs that contain images and captions.
This seemed to be working before but now the first button (ver todos — show all) is not working. All the others work.
I think Flexbox is conflicting with my JS?
I just can’t figure out how to make it work. I am a beginner in JS, so please be thorough in your reasoning in this regard.
Any help is appreciated!
HTML
<section class="catalog">
<div id="buttons">
</div>
<div id="gallery">
<div class="gallery-item cadeiras" data-tags="cadeiras">
<div class="item_views">
<img src="images/C642_A.jpg" alt="cadeira de despacho" />
<p class="legendas">Cadeirão de orelhas<br />Mogno entalhado <br />Trabalho do fim do Séc. XIX, estofo posterior</p>
</div>
<div class="item_views">
<img src="images/C642_B.jpg" width="296" height="342" alt="cadeira de despacho" />
<p class="legendas legendas_en">Armchair<br />Carved mahogany<br />Late 19th century <span class="legenda_notas">(reupholstered)</span></p>
</div>
</div>
<div class="gallery-item cadeiras" data-tags="cadeiras">
<div class="item_views">
<img src="images/C608_A.jpg" alt="cadeirão de orelhas" />
<p class="legendas">Cadeira de despacho<br />Pau santo entalhado<br />Portugal, meados do Séc. XVIII</p>
</div>
<div class="item_views">
<img src="images/C608_B.jpg" alt="cadeirão de orelhas" />
<p class="legendas legendas_en">Bureau armchair<br />Carved rosewood<br />Portugal, mid-18th century</p>
</div>
</div>
<div class="gallery-item cadeiras bancos" data-tags="bancos">
<div class="item_views">
<img src="images/C249_A.jpg" alt="tamborete" />
<p class="legendas">Tamborete<br />Nogueira entalhada<br />Portugal, Séc. XVIII</p>
</div>
<div class="item_views">
<img src="images/C249_B.jpg" alt="tamborete" />
<p class="legendas legendas_en">A stool<br />Carved walnut<br />Portugal, 18th century</p>
</div>
</div>
<div class="gallery-item bancos" data-tags="bancos">
<div class="item_views">
<img src="images/C508.jpg" alt="banco sec XIX" />
<p class="legendas">Banco<br />Madeira, ferro e sola, feito à maneira do sec. XVII<br />Dimensões: 1,40 x 0,.43 x 0,93 m. (A.)<br />Portugal, Séc. XIX</p>
</div>
<div class="item_views">
<p class="legendas legendas_en">Bench<br />Wood, leather and iron, manufactured in the way of the 17th century<br />1,40 m. long<br />Portugal, 19th century</p>
</div>
</div>
<div class="gallery-item mesas indo-port" data-tags="mesas, indo-português">
<div class="item_views">
<img src="images/mesa_ip1.jpg" alt="mesa" />
<p class="legendas">Mesa de centro Indo-Portuguesa<br />Teca com embutidos e guarnições em ébano. Fecharias e pingentes de ferro forjado.<br />Caixa com 8 gavetas moldadas e 4 aparentes. Pés entalhados com forma de sereias (Naguinis) e travessas decoradas com enrolamentos.<br /> Dimensões: 1,30 (C.) x 0,97 (L.) x 0,85 (A.) m.<br />Séc. XVII</p>
</div>
<div class="item_views">
<img src="images/mesa_ip2.jpg" alt="mesa" />
<p class="legendas legendas_en">Indo-Portuguese hall table<br />Teak with ebony inlay, cast iron mounts<br />With 8 drawers and 4 aparent drawers. Legs carved in the shape of mermaids (naginis).<br />1,30 (long) x 0,97 (deep) x 0,85 (tall) m. <br />17th century</p><br />
</div>
</div>
<div class="gallery-item mesas indo-port" data-tags="mesas, indo-português">
<div class="item_views">
<img src="images/C444_A.jpg" alt="mesa indo-portuguesa" />
<p class="legendas">Mesa Indo-Portuguesa<br /> Teca, sissó e marfim, com ferragens de metal serrado<br />Dimensões: 90 (L.) x 58 (P.) x 77 (A.) cm<br />Trabalho do Séc. XVII</p>
</div>
<div class="item_views">
<img src="images/C444_B.jpg" alt="tampo da mesa" />
<p class="legendas legendas_en">Indo-Portuguese table<br />Teak, sisoo and ivory. Pierced metal mounts.<br />90 cm. x 58 cm. x 77 cm. high <br />17th century</p>
</div>
</div>
JS
(function() {
var $items = $('div.gallery-item');
var $buttons = $('#buttons');
var tagged = {};
$items.each(function() {
var thisDiv = this;
var tags = $(this).data('tags');
if(tags) {
tags.split(',').forEach(function(tagName) {
if(tagged[tagName] == null) {
tagged[tagName] =[];
}
tagged[tagName].push(thisDiv);
});
}
});
$('<button/>', {
text: 'ver todos',
class: 'active',
click: function() {
$(this)
.addClass('active')
.sibblings()
.removeClass('active');
$items.show();
}
}).appendTo($buttons);
$.each(tagged,function(tagName) {
$('<button/>', {
text: tagName,
click: function() {
$(this)
.addClass('active')
.siblings()
.removeClass('active');
$items
.hide()
.filter(tagged[tagName])
.show();
}
}).appendTo($buttons);
});
}());
CSS
#gallery {
margin-top:2em;
display: flex;
flex-wrap: wrap;
}
.gallery-item {
width: 950px;
display: flex;
margin:0 2.5em 1em 0;
padding: 0;
}
.item_views {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 50%;
margin-right: .2em;
justify-content: flex-end; /*v-align to bottom */
background-image: url(../images/bg4.gif);
background-repeat: repeat;
}
.gallery-item > .item_views:nth-child(2) {
align-items: flex-start;
}
button {
color: #7e7e9c;
font-family: "motiva-sans",sans-serif;
font-size: .9em;
text-transform: uppercase;
padding: 6px 15px;
margin: 0 9px 10px 0;
display: inline-block;
border: none;
text-decoration: none;
border-radius: 0;
background: #fff;
cursor: pointer;
text-align: center;
border-radius: 0;
border: solid thin #c8cdd5;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
button:hover {
box-shadow: inset 0 -2px 0 #7e7e9c;
}
button.active {
color: #000;
border: solid 2px #000;
}
button:focus {
outline: none;
}
button:active {
box-shadow: inset 0 -3px 0 #000;
transform: scale(0.99);
}