Я использую довольно основную функцию Javscript для замены избранных изображений, в зависимости от того, какой значок пользователь нажимает. Изображение отлично меняет изображение, но теги title/alt всегда остаются такими же, как и по умолчанию, которое отображается при загрузке страницы. Мне интересно, как я могу вытащить теги alt/title из миниатюрных изображений, когда они будут выбраны. Любая помощь очень ценится!Вытягивание надписей/заголовков из миниатюр при замене выделенного изображения?
UPDATE отредактировано, чтобы отразить рабочий код благодаря ROK!
HTML:
<div id="product-photos">
{% if product.images.size == 0 %}
<div id="product-photo-container">
<img src="{{ '' | product_img_url: 'grande' }}" title="{{ image.alt | escape }}" title="{{ image.alt | escape }}" alt="{{ image.alt | escape }}" />
</div>
{% else %}
<div id="product-photo-container">
<img src="{{ product.featured_image.src | product_img_url: 'grande' }}" title="{{ product.featured_image.alt | escape }}" alt="{{ product.featured_image.alt | escape }}" />
</div>
{% if product.images.size > 1 %}
<ul id="product-photo-thumbs" class="clearfix grid">
{% for image in product.images %}
<li class="product-photo-thumb">
<a href="{{ image.src | product_img_url: 'grande' }}" data-title="{{ image.alt }}" data-alt="{{ image.alt }}">
<img src="{{ image.src | product_img_url: 'small' }}" title="{{ image.alt | escape }}" alt="{{ image.alt | escape }}" />
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
</div><!-- #product-photos -->
Javscript:
// Load variant image into feature area
$('.product-photo-thumb a').click(function(e) { e.preventDefault();
$elem = $(this);
var newAttributes = {
src: $elem.attr('href'),
title: $elem.data('title'),
alt: $elem.data('alt')
}
$('#product-photo-container img').attr(newAttributes);
});
Ты мужчина! Это сделало трюк, единственное, что я изменил, это то, что я использовал «image.alt» как для заголовка данных, так и для data-alt, чтобы он работал в Shopify. Спасибо большое! – APAD1
Np. Может быть, я с большим трудом справился с этим в начале. Я редактировал сообщение. Это должно относиться к вашему оригинальному html. Я не заметил, что у вас уже есть эти данные на img, и это хорошая практика не дублировать html. –