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>

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

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

Add comment

sunshine88 answered 4 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

ciscom

Pro User

70Support score
5Questions 5Answers

0Snippets likes 0Snippets