Gallery filter, tagged images help


#1

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);
}


#2

Hi @graphimat, if you open the browser console you’ll see an

Uncaught TypeError: $(…).addClass(…).sibblings is not a function

– it’s a simple misspelling of the siblings() method name here:

$(this)
  .addClass('active')
  .sibblings()
  .removeClass('active');

#3

Genius!
Thanks a million. I totally missed that in the console!
100% working and you just made my day!


#4

np :-)