Liquid, JavaScript, themes, sales channels
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();
// }
// });
// };
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024