悬停时的特色图像显示该图像的数据未显示在缩略图上

Question

我需要在右侧的特色图片中添加尺寸/文本数据。我打算将它添加到另一个图像并交换它......或者可能隐藏带有图像数据的标题并在特色上显示它们？对此有最佳方法的任何想法？非常感谢你帮助我！

http://test.pillarsoflifebook.com/ottomans/

目前它只是一行尺寸，但我希望这是可扩展的，以防客户希望其他页面具有描述或比单行更深入的文本。

非常感谢！这是我目前用于交换的 JQuery：

function myFunction2() {
    var $large = jQuery('#largeImage1');

    //store the default image as the data src
    $large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs1 img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        //$large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction2);
});

Answer 1

首先将此代码用于最底部的 4 个图像（设计选项），并告诉它是否正确地提醒项目名称？

并将鼠标悬停在最底部的 4 张图片上

function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    //$large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');


    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
        var altText =jQuery(this).attr("alt");

        //alert(jQuery(this).parent().text());
        var existsClass=$large.parent().children().hasClass("prodName");
        //alert(existsClass);
        if(existsClass)
            //$large.parent().children().remove(".prodName");
            $large.parent().find("div").remove(); 

$large.parent().append('<div class="prodName" style="margin-left:220px">'+jQuery(this).parent().text()+'<br/>'+altText+'</div>');

    }, function () {
        //on mouse leave put back the original value
        $large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

检查这个新代码