Gallery with image filtering


Topic: Gallery with image filtering

ciscom pro asked 6 years ago

I have image gallery with filtering (html below). It works fine until I introduce <div class="view overlay zoom"> around the image, then the filtering stops working. How can I use view overlay with filtering?
<div class="row">
<div class="col-md-12 d-flex justify-content-center mb-5">
<button type="button" class="btn btn-outline-black waves-effect filter" data-rel="all">All</button>
<button type="button" class="btn btn-outline-black waves-effect filter" data-rel="bathrooms">Bathrooms</button>
<button type="button" class="btn btn-outline-black waves-effect filter" data-rel="kitchens">Kitchens</button>
<button type="button" class="btn btn-outline-black waves-effect filter" data-rel="floors">Floors</button>
</div>
</div>

<div class="gallery" id="gallery">

<div class="mb-3 pics animation all kitchens">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/kitchen-3.jpg" alt="Kitchen Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Kitchen<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all bathrooms">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/bathroom-2.jpg" alt="Bathroom Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Bathroom<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all bathrooms">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/bathroom-4.jpg" alt="Bathroom Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Bathroom<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all bathrooms">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/bathroom-3.jpg" alt="Bathroom Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Bathroom<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all kitchens">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/kitchen-5.jpg" alt="Kitchen Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Kitchen<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all floors">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/floor-1.jpg" alt="Floor Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Floor<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all floors">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/floor-2.jpg" alt="Floor Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Floor<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all kitchens">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/kitchen-4.jpg" alt="Kitchen Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Kitchen<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

<div class="mb-3 pics animation all floors">
<div class="view overlay zoom">
<img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/floor-3.jpg" alt="Floor Tiling">
<div class="mask flex-center waves-effect waves-light rgba-grey-light">
<h4 class="ph white-text">Floor<i class="fa fa-external-link ml-1" aria-hidden="true"></i></h4>
</div>
</div>
</div>

</div>

Anna Morawska staff answered 6 years ago

Hi there, To use view overlay you have to adjust your js code. Basically, in this line :
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
we want to select only immediate children divs so it should look like this:
$("#gallery > div").not("." + selectedClass).fadeOut().removeClass('animation');
Best, Ania

sunshine88 answered 4 years ago

Hi, I am using the Gallery with image filtering code too however there must be more js needed than the js you have in the snippet code because the filtering is not working. Nothing happens. Can you post exactly all the js needed to make the filtering from https://mdbootstrap.com/plugins/jquery/gallery/ work? Thank you :)


Tomasz Makowski commented 4 years ago

Are you sure that you are using pro package? This component requires MDB Pro

Regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No