Предварительный просмотр галереи изображений не отображается правильно в Chrome и Safari

Question

Предварительный просмотр галереи изображений не отображается правильно в Chrome и Safari

0

Я создал галерею изображений, где вы можете щелкнуть изображение, чтобы отобразить большую версию. При нажатии на изображение в строку ниже вставляется новое изображение. Я получил ошибку, и я не могу понять, как ее решить. Например, если вы нажмете на изображение в первой строке, отобразится предварительный просмотр изображения. Затем, если вы нажмете на изображение в два ряда ниже, не будет показан предварительный просмотр изображения. Он не работает в Chrome или Safari. В Firefox он отлично работает.

Вот Javascript и jQuery (2.0.3), которые я использую:

$(document).on("click", ".imgBox", function(){
    imgsrc = $(this).find('img').attr('src');
    var bigBox = $('<div class="bigBox"><img src="'+imgsrc+'"/></div>');
    imgClicked = $(this);
    $('.bigBox').remove()
    if ($(".bigBox").length > 0){

            bigBox.find('img').attr('src', imgsrc);
            bigBox.insertAfter(imgClicked);
    } else {
            bigBox.insertAfter(imgClicked).css('display', 'block');
    }


});

Я создал JSFiddle, чтобы вы могли попробовать сами. Просто убедитесь, что вы изменили размер окна браузера, чтобы получить как минимум 3 строки.

Я протестировал его в Chrome 30.0.1599.101, Safari 6.0.5 и Firefox 24.0 на OSX.

Oskar Persson 18 окт. 2013, в 16:41

Источник

0

Было бы выгодно, если бы вы указали width в .bigBox в px вместо % ? Я немного подправил CSS, мне кажется, что проблема есть.
darshandzend 18 окт. 2013, в 14:20
0

Мне нужно в %
Oskar Persson 18 окт. 2013, в 14:23
0

это странно. если вы измените размер окна jsfiddle, оно появится)
skip405 18 окт. 2013, в 14:27

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

google-chrome

2 ответа

0

Я тестировал его в Chrome 30.0.1599.101 м на Windows, и он работает очень хорошо.

fDruga 18 окт. 2013, в 11:51

Ещё вопросы

Было бы выгодно, если бы вы указали width в .bigBox в px вместо % ? Я немного подправил CSS, мне кажется, что проблема есть.
это странно. если вы измените размер окна jsfiddle, оно появится)

skip405 · Accepted Answer · 2013-10-18T12-09-00.000Z

Предупреждение. Это решение немного хакерское. :)

Я заметил, что хром показывает это изображение, когда я изменяю размер окна jsfiddle, как я выразился в комментарии. Поэтому я начал экспериментировать над тем, как "обмануть" хром перерисовать еще раз. Есть много способов вызвать перерисовку. Я решил манипулировать атрибутом style.

Поэтому я создал простую проверку, чтобы динамически overflow свойство overflow с auto на visible (оба эти значения не должны разрушать ваш макет. И я переключаю эти значения, когда пользователь щелкает изображение. Например: http://jsfiddle.net/HeQGL/5/

Ps Обратите внимание, что я немного изменил ваш скрипт. Изменил элемент для прослушивателя событий, использовал переменные внутри функции и использовал .detach() вместо .remove() поскольку он лучше подходит, когда нам нужно снова вставить элемент обратно в DOM.