How to view dynamic images using fotorama (embedded in Bootstrap 3 modal)?

Question

I'm having difficulties displaying dynamic images from database to a Fotorama Image Viewer using Bootstrap 3 modal.

I have been able to display it correctly once, but that's it, once I try to open it again it does not display correctly and I've been trying for a few days now. I did research for a while, but with no sucess.

STEP 1

<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

PS: in addition to Bootstrap 3 libs

STEP 2

<!--IMAGE VIEWER-->
<div class="modal" id="ImgVwr" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-lg vertical-align-center" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel5" >Gallery</h4>
                </div>

                <div class="modal-body body" style="background-color: #808080;">
                    <script>
                        $(function () {
                            // 1. Initialize fotorama manually.
                            var $fotoramaDiv = $('#fotorama').fotorama();

                            // 2. Get the API object.
                            var fotorama = $fotoramaDiv.data('fotorama');

                            // 3. Inspect it in console.
                            console.log(fotorama);
                        });
                    </script>

                    <!-- Add images to <div class="fotorama"></div> -->
                    <div class="fotorama" data-thumbfit="cover" data-transition="slide" data-clicktransition="crossfade" data-auto="false"  data-hash="true" data-keyboard='{"space": true, "home": true, "end": true, "up": true, "down": true}'" data-loop="true" data-arrows="true" data-click="true" data-swipe="false" data-nav="thumbs" data-width="100%" data-height="70%" ></div>

                    <script>
                        $(function () {
                            $('.fotorama').fotorama();
                        });
                    </script>
                    <%--<div id="fotorama" class="fotorama" data-auto="false"></div>--%>
                    <%--data-ratio="800/600" data-minwidth="400" data-maxwidth="1000" data-minheight="300" data-maxheight="100%"--%>
                </div>
            </div>
        </div>
    </div>
</div>

STEP 3

function ViewGallery() {            
        $.ajax({
            type: "POST",
            url: window.location.pathname + "/FILE_VIEW_FILES",
            data: "{'partnerID':'" + $('#lblPartnerID').html() + "','branch':'" + $('#lblBranch').html() + "','ID':'" + $('#lblID').html() + "','crDate':'" + null + "'}",
            dataType: "json",
            contentType: "application/json; chatset=utf-8",
            beforeSend: function() {                  
            },
            success: function (res) {                    

                $('.imgAttach').html("");
                $('.fotorama').html("");
                $('#fotorama').empty();
                $('.fotorama--hidden').remove();

                var obj = JSON.parse(res.d);
                var i = 0;
                $.each(obj.FilesList, function (index, value) {
                    i++;

                    $('.fotorama').fotorama({
                        data: [
                             {
                                 img: 'data:image/png;base64,' + value.filer,
                                 thumb: 'data:image/png;base64,' + value.filer
                             }
                        ]
                    });
                });
            },
            complete: function () {
            },
            error: function (xhr, status, error) {
                alert(error);
            },
        });
    }

I expect to see the fotorama constructor working everytime I open up Bootstrap modal and display the images in the fotorama viewer