lightbox thumbnails images same size


Topic: lightbox thumbnails images same size

itsued pro premium 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

Mikołaj Smoleński staff answered 6 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
Please insert min. 20 characters.

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