Как просматривать динамические изображения с помощью фоторамки (встроенной в мод Bootstrap 3)? - PullRequest
Новая
       31

Как просматривать динамические изображения с помощью фоторамки (встроенной в мод Bootstrap 3)?

0 голосов
/ 12 июня 2019

У меня проблемы с отображением динамических изображений из базы данных в Fotorama Просмотр изображений с использованием модема Bootstrap 3.

Мне удалось один раз правильно отобразить его, но это все, как только я пытаюсь открыть его снова, он не отображается правильно, и я пытался в течение нескольких дней. Некоторое время я проводил исследования, но безуспешно.

ШАГ 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: в дополнение к Bootstrap 3 libs

ШАГ 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>

ШАГ 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);
            },
        });
    }

Я ожидаю, что конструктор фоторамки будет работать каждый раз, когда я открываю модальный Bootstrap и отображаю изображения в средстве просмотра фоторамки

...