How to load dynamically the content of a Modal (Bootstrap 4)

Question

I'm setting up a web site rich of images . I've designed it as a landing page: all content has to be on the main HTML page, without flow in others, actually there is the only index.html .

This will be the official website of a Theater, the images are all related to their shows. To estimate the number of images:

• 40 shows an almost 40 pics per show (About 600kb per Image)

Almost 1gb of pictures in the same page !

Every show is represented with an image and when you click the Show image a Modal is opened showing the related pics in a grid and information about it.

I'm using Bootstrap 4, Jquery and CSS.

The problem is: if I add all the modals (with the pics in it) to HTML page my website get very lazy and doesn't ** load properly**.

I'm searching a way to load dynamically the pics every time you click on the show , avoiding to load the Dom with ALL the pictures from the first moment.

I've tried with Jquery injection , but is very hard to handle when the modal is open and when modal is closed and I don't think that is a proper and strict way to code.

I was thinking about a PHP server manipulation of images . Php elaborate and minimize the images to make thumbnail so when images are seen in a grid they are not in the full size, and only when images are clicked they shown in full size (with lightbox.js). But I'm a complete noob with PHP, and I didn't find an easy tutorial.

I'm opened to any solution you think I can implement, mostly to those who care about SEO optimization and faster loading time for client !

 <!-- MODAL EXAMPLE --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-full " data-dismiss="modal"> <div class="modal-content mx-auto"> <div class="modal-body"> <div class="column mx-auto"> <div class="sidebar-box"> <h2 class="title">SHOW TITLE</h2> <h2 class="subtitle"> SHOW SUBTITLE</h2> <p class="middle">MIDDLE INFORMATION</p> <p class="description">SHOW DESCRIPTION</p> </div> </div> <div class="column mx-auto"> <!-- THERE WILL BE ALL THE IMAGES IN A GRID--> <div class="row justify-content-center"> <a href="stages/alesi/alesi1.JPG" data-title="Fotografia ©" data-lightbox="alesi"> <img src="stages/alesi/alesi1.JPG" alt="" /> </a> <a href="stages/alesi/alesi2.JPG" data-title="Fotografia ©" data-lightbox="alesi"> <img src="stages/alesi/alesi2.JPG" alt="" /> </a> <a href="stages/alesi/alesi3.JPG" data-title="Fotografia ©" data-lightbox="alesi"> <img src="stages/alesi/alesi3.JPG" alt="" /> </a> </div> </div> </div> </div> </div> </div> 

Thank you very much to all stack overflow community!

Answer 1

One way to do it is with AJAX, yeah, you can have the content of each modal into a different HTML/PHP file, and on click on the modal to make an AJAX request, and putting the specific modal content(html file) into the page.

So, basically, you will have the whole <div class="modal-body"> div in a different HTML file, and on modal click you will have something like that

$("the_modal").click(function(){
  $.ajax({url: "modal1.html", success: function(result){
    $("#myModal modal-content").append(result);
  }});
});

Of course, you can put data attributes on the modal and use them in the AJAX, so it will work for all the modal across the website.

The other thing that will help a lot is optimizing the images, reducing the size, the quality.

Answer 2

You can use this link to refer how to load dynamic data in a single bootstrap modal. https://getbootstrap.com/docs/4.3/components/modal/#varying-modal-content

If you have the show data in database or JSON file, you can then pass the id of the show which is clicked in the data attribute as given in above example.

Then using modal event show.bs.modal , you can fire an ajax call, which will populate the required data in the .modal-body and on close you can clear the data from the modal.

Answer 3

If your main problem is the amount of images that will have to be loaded delaying your page so I suggest that you try to implement images lazy-loading. This is going to enhance the performance of your website since your images will load only when they are shown in the viewport.

There is a jQuery plugin you can use for that: jQuery.Lazy()

Answer 4

I would advise against loading 40pics x 600k by default. You need to be thinking about mobile users. I would use a gallery script (I recommend Photo Swipe) and a request to a server-side script returning a json that will be used to create the gallery only on demand. Check this page: https://photoswipe.com/documentation/custom-html-in-slides.html