Warning: session_start(): open(/var/lib/php/fpm/session/sess_ru7ge2omlsicl2uhl4npraq3t9, O_RDWR) failed: No such file or directory (2) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Gallery with image filtering - Material Design for Bootstrap

Gallery with image filtering


Topic: Gallery with image filtering

ciscom pro asked 2 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="/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="/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="/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="/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="/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="/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="/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="/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="/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 2 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 2 months 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 :)


Please insert min. 20 characters.
Status

Answered

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