0

我的模态图像似乎只能在 Chrome 下工作。在 Firefox 和 Internet Expoler 模态图像中生成错误代码：

<img src="" http:="" localhost="" ceramikakornak="" images="" realizacje="" klasyczne="" 3.jpg""="" class="img-responsive">

在 Chrome 模态窗口中可以并且看起来：

<img src="images/realizacje/1.jpg" class="img-responsive">

我用来生成模态窗口的 JavaScript：

    $(document).ready(function() {
    $('.realizacje-fota').each(function(){
        var checkClass = $(this);
        var image_url = checkClass.css('background-image'),
        image;

            // Remove url() or in case of Chrome url("")
                image_url = image_url.match(/^url\("?(.+?)"?\)$/);
               if (image_url[1]) {
                image_url = image_url[1];
                image = new Image();

                // just in case it is not already loaded
                $(image).load(function () {
                 //   alert(image.width + 'x' + image.height);
                    var ratio = image.width/image.height;

                if (ratio > 1) {
                  checkClass.addClass("realizacje-fota-pion");
                }
                else if (ratio <= 1) {
                  checkClass.addClass("realizacje-fota-poziom");
                }
                });

                image.src = image_url;
                }
    });
});

$(document).ready(function(){
            $('.lazy div').on('click',function(){
                var src =  $(this).css('background-image');
                var src = src.substring(4, src.length);
                var src = src.substring(0, src.length - 1);
                var img = '<img src="' + src + '" class="img-responsive"/>';

                var index = $(this).parent('div').index();
                var html = '';
                html += img;
                html += '<div style="clear:both;display:block;">';
                html += '<a class="controls next" href="'+ (index+1) + '">next &raquo;</a>';
                html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>'
                html += '</div>';

                $('#myModal').modal();
                $('#myModal').on('shown.bs.modal', function(){
                    $('#myModal .modal-body').html(html);
                    //new code
                    $('a.controls').trigger('click');
                })
                $('#myModal').on('hidden.bs.modal', function(){
                    $('#myModal .modal-body').html('');
                });
           });
        })

         $(document).on('click', 'a.controls', function(){
            var index = $(this).attr('href');
            var src = $('.row div:nth-child('+ index +') img').attr('src');

            $('.modal-body div').str('scr', src);

            var newPrevIndex = parseInt(index) - 1;
            var newNextIndex = parseInt(newPrevIndex) + 2;

            if($(this).hasClass('previous')){
                $(this).attr('href', newPrevIndex);
                $('a.next').attr('href', newNextIndex);
            }else{
                $(this).attr('href', newNextIndex);
                $('a.previous').attr('href', newPrevIndex);
            }

            var total = $('.row div').length + 1;
            //hide next button
            if(total === newNextIndex){
                $('a.next').hide();
            }else{
                $('a.next').show()
            }
            //hide previous button
            if(newPrevIndex === 0){
                $('a.previous').hide();
            }else{
                $('a.previous').show()
            }


            return false;
        });
4

0 回答 0