Topic: lightbox thumbnails images same size
itsued priority asked 6 years ago
Hi,
I have different images sizes in a lightbox. In my thumbnail-view I want to show them all the same size. Do you have a solution for that?
<div class="row"> <div class="col-md-12"> <div id="mdb-lightbox-ui-{{ siteid }}" class="mdb-lightbox-container"></div> <div class="mdb-lightbox"> {% for e in elements %} <figure class="col-md-4"> <a href="{{ asset('files/users/'~userid~'/gallery/'~e.id~'.jpg') }}" data-size="{{ e.width }}x{{ e.height }}"> <img src="{{ asset('files/users/'~userid~'/gallery/'~e.id~'_thumb.jpg') }}" class="img-fluid z-depth-1"> </a> </figure> {% endfor %} </div> </div> </div> <script type="text/javascript" src="{{ asset("./scripts/mdb/js/modules/lightbox.js") }}"></script> <script> $(function () { $("#mdb-lightbox-ui-{{ siteid }}").load("{{ asset('./scripts/mdb/mdb-addons/mdb-lightbox-ui.html') }}"); }); </script>Best reagrds
Add comment
Mikołaj Smoleński staff answered 5 years ago
Hi there,
Please try the following example:
https://mdbootstrap.com/snippets/jquery/mikolaj-smolenski/117458
Also, if You'd like to have the same width of images, You'll need to change grid layout into casual div's layout inside mdb-lightbox.
Best Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Desktop PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Tags