Retrieving + Displaying Alt Tag of Image on Variant Select in a Div

Taylor_Butler-E
Shopify Partner
1 0 0

Hi there,

I'm trying to retrieve + display the Alt Tag of the product image in a different div caption when the user has selected the variant and the featured image changes.

I think i've found the relevant code in the theme.js but I need some guidance. I can provide access to the theme if needbe.

Thank you.

setFeaturedImage = function(new_image_src, $thumbLink) {
$piDiv = $('.product #featured-image');
$piLink = $piDiv.find('a').first();
$pi = $piDiv.find('img').first();

image = {
src: new_image_src
};


var original_image = $pi, new_image = image;

Shopify.Image.switchImage(new_image, original_image[0], function (new_image_src, original_image,
element) {
$(element).parents('a').attr('href', new_image_src);
$(element).attr('src', new_image_src);
});

if ($thumbLink) {
$piLink.attr('href', $thumbLink.attr('href'));
$piLink.attr('title', $thumbLink.attr('title'));
$piLink.attr('data-image-index', $thumbLink.attr('data-image-index'));
$pi.attr('src', $thumbLink.attr('data-primary-image'));
$pi.attr('alt', $thumbLink.find('img').attr('alt'));
}

$('.product-thumb a').each(function( index ) {
src=$(this).attr('data-primary-image');

if(Shopify.Image.removeProtocol(src) == Shopify.Image.removeProtocol(new_image_src)){

$piLink.attr('data-image-index', $(this).attr('data-image-index'));

}

});

};

window.setFeaturedImage = setFeaturedImage;

// setFeaturedImage = function(newImgThumbLink) {
// var current_height, fic, ficIconZoom, ficImg;
// fic = $(".product #featured-image");
// ficIconZoom = fic.find(".icon-zoom");
// ficImg = fic.find("img");
// current_height = 0;
// $(".product .thumbs a").removeClass("active");
// newImgThumbLink.addClass("active");
// current_height = ficImg.outerHeight();
// fic.css("height", current_height);
// ficIconZoom.hide();
// return ficImg.animate({
// opacity: 0
// }, 300, function() {
// var img;
// img = $(this);
// img.parent("a").attr("href", newImgThumbLink.attr("href"));
// img.parent("a").attr("title", newImgThumbLink.attr("title"));
// img.parent("a").attr("data-image-index", newImgThumbLink.attr("data-image-index"));
// img.attr("src", newImgThumbLink.attr("data-grande-image"));
// img.attr("alt", newImgThumbLink.find("img").attr("alt"));
// return img.one("load", function() {
// var new_height;
// new_height = ficImg.outerHeight();
// return fic.animate({
// height: new_height
// }, 800, "easeInOutQuint", function() {
// return ficImg.animate({
// opacity: 1
// }, 300, function() {
// fic.removeAttr('style');
// return ficIconZoom.css("display", "block").css("opacity", 0).animate({
// opacity: 1
// }, 300, function() {
// return $(this).click(function() {
// return fic.find("a").trigger("click");
// });
// });
// });
// });
// }).each(function() {
// if (this.complete) {
// return $(this).load();
// }
// });
// });
// };
//
// window.setFeaturedImage = setFeaturedImage;

// loadThumbnailImage = function(thumbnail) {
// var current_height, img;
// current_height = 0;
// img = $(thumbnail).find(".image img");
// img.hide();
// return img.one("load", function() {
// return $(thumbnail).find(".image").animate({
// height: img.outerHeight()
// }, 500, "easeOutQuint", function() {
// img.fadeIn(300);
// return $(this).closest('.image').removeAttr('style');
// });
// }).each(function() {
// if (this.complete) {
// return $(this).load();
// }
// });
// };

 

Taylor Butler-Eldridge
0 Likes