2013-11-08 2 views
0

Я использую довольно основную функцию 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); 
}); 

ответ

1

Javascript для этого будет выглядеть примерно так:

// Load variant image into feature area 
$('.product-photo-thumb a').click(function(e) { e.preventDefault(); 
    $elem = $(this).find('img')[0]; 
    var newAttributes = { 
     src: $elem.attr('src'), 
     title: $elem.attr('title'), 
     alt: $elem.attr('alt') 
    } 
    $('#product-photo-container img').attr(newAttributes); 
}); 

Читать все параметры непосредственно из изображения и повторно их к функции img.

+0

Ты мужчина! Это сделало трюк, единственное, что я изменил, это то, что я использовал «image.alt» как для заголовка данных, так и для data-alt, чтобы он работал в Shopify. Спасибо большое! – APAD1

+0

Np. Может быть, я с большим трудом справился с этим в начале. Я редактировал сообщение. Это должно относиться к вашему оригинальному html. Я не заметил, что у вас уже есть эти данные на img, и это хорошая практика не дублировать html. –

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