Topic: lightbox thumbnails images same size
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
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
- User: Pro
- 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