Filter Gallery with Lightbox


Topic: Filter Gallery with Lightbox

infin80 asked 10 months ago

Expected behavior Filter by category with working lightbox

Actual behavior Can filter or can lightbox but not both together

Resources (screenshots, code snippets etc.) Using Pro, included mdb-filter.min.js and copying exactly from https://mdbootstrap.com/plugins/jquery/filter/#lightbox. Might there be more info/demos for this? I have run into countless issues so far and quite honestly the quick and competent support is the reason I continue building w MDB and I gratefully thank you for that.


Piotr Obrebski staff commented 10 months ago

Hi infin80, As you can see on the page you posted this implementation is working and is easy to implement. If your project can't accomplish that there need to be an issue with your implementation. Please create a snippet with your code for us to check where the mistake is. https://mdbootstrap.com/snippets/

Best Regards, Piotr


infin80 commented 10 months ago

I got it working! Getting them in the right order was the issue and putting the css & js on the page (no imports).

Two more questions... 1. Can that same gallery lightbox work using the "Mixed Content" layout (https://mdbootstrap.com/plugins/jquery/filter/#mixed-content)? ... 2. Is it possible to have single image lightbox? It doesn't need to be in its own separate gallery. Just sprinkling an image or two elsewhere on the page.Again, a tremendous shout-out to you & your team on excellent support


Piotr Obrebski staff commented 10 months ago

The mixed content is not supported with lightbox because these two functionalities both require on click effect and implementing them both by default could cause some issues. If you want to create a lightbox with a single image just simply create lightbox structure containing only one image https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1304776

Best Regards, Piotr


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.10
  • Device: Desktop
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: Yes