2016-02-04 2 views
1

Как часть галереи изображений, я использую приведенный ниже код, чтобы отключить атрибут src на элементе изображения, когда пользователь нажимает на различные миниатюры. Каждая его часть работает отлично в течение 7 месяцев, так как я построил его, но где-то в последние несколько недель эта часть кода перестала работать:Изменение атрибута src не обновляет изображение

var nextLgSrc = $('.gallery-image._'+selected).data('lgsrc'); 
$('.hero-image').attr('src', nextLgSrc); 

nextLgSrc является успешно возвращение абсолютного URL к изображению который будет заменять текущий. И src элемента img на самом деле меняется при щелчке эскизов, но изображения больше не меняются. Первое (по умолчанию) изображение остается застрявшим, хотя атрибут src меняется под ним.

Может ли кто-нибудь сказать мне, что могло случиться, и как это исправить?

Вот ссылка на полный галерея код, чтобы увидеть его в контексте, если это полезно: http://pastebin.com/mae8YQi2

И на самом деле, вот ссылка на страницу, которая не работает: http://penumbralux.com/project/marisol

+0

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

+0

Что я получаю из этого примера, вы не должны изменять 'src' элемента, но вы должны перемещать слайдер на элемент с щелчком. – Rayon

+0

Ваша ссылка показывает 'data-lgsrc =" Array "', это может быть проблема. при просмотре в консоли значение currentSrc не изменяется – diEcho

ответ

3

Becuase когда вы нажимаете на изображения, отличные от первого,

Вы обновляете только src атрибут img.

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

<img width="970" height="647" src="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg" class="hero-image wp-post-image" alt="Caption Test" data-smsrc="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-100x100.jpg" data-lgsrc="Array" srcset="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-300x200.jpg 300w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-1024x683.jpg 1024w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-750x500.jpg 750w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg 970w" sizes="(max-width: 970px) 100vw, 970px"> 

Таким образом, в одном предложении, обновить src и srcset обоих.

+0

Спасибо, все были правильно, вы получили его первым. – Eckstein

1

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

1

Удалить srcset и все будет работать так, как ожидалось. И IE не поддерживает его на сегодняшний день, если вы хотите работать во всех браузерах. См. http://caniuse.com/#feat=srcset

Также было бы неплохо предварительно загрузить изображения, чтобы сделать вашу страницу более отзывчивой.

+0

Спасибо за советы. В наши дни я действительно не очень люблю IE, но я могу рассмотреть решение alt, если оно станет серьезной жалобой. И предварительная загрузка - хорошая идея, спасибо. – Eckstein

Смежные вопросы