Question

我正在为艺术画廊开发一个WordPress网站。客户希望艺术家名单图像库完全像这样：http://www.walkercontemporary.com/artists/

我创建了一个自定义帖子类型，用于生成列表，指向艺术家特定内容的链接。现在我需要一个效果，在鼠标悬停链接时在相邻的DIV中显示样本图像。基于查看上述站点的源代码，我确信这是一个Dreamweaver功能。我想将我的解决方案集成到WordPress易于使用的CMS功能中。否则我会建议客户寻求其他解决方案。他们没有足够的东西来维持大量的艺术家进行手工编码，他们不希望缩略图让访问者悬停（这是其他解决方案有多少）。

理想情况下，我希望在列表项中生成某种REL值或自动生成的onmouseover值，这些列表项调用与自定义帖子类型中的每个艺术家相关联的特色图像。这可能吗？ -thx - 史蒂夫

Answer 1

出于某种原因，我无法访问您的网站来查看示例。

但是，如果我理解正确，你只需要3-4行jQuery ..

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));// if you want to add description also
});

DEMO

编辑我

OP评论后发表 -

我承认我错了......你不需要4行代码 - 你只需要2行代码。： - ）

但我没有错，因为相同的代码同时适用于悬停和点击。它基本上是一样的。

你只需要用“HOVER”改变单词（功能）“CLICK” （注意没有其他改变）

$('#thumbs img').hover(function(){
        $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    });

我也承认有时候我会把一些基本技能视为理所当然，我不应该这样做。当我在学习的时候，我遇到了同样的问题。所以，如果你仍然有疑问 - 我做了3个演示小提琴。

用拇指交换
使用实时链接切换
与虚拟链接交换

在此处查看所有内容：Demo

我希望现在很清楚。

编辑II

我的上帝!!我又错了。代码应该更加紧凑！（不需要替换（））

$('#largeImage2').attr('src',$(this).attr('href'));

最终Demo（更短的代码）

（和BTW - 当网站在服务器上运行时，没有“Dreamweaver功能”这样的东西 - Dreamweaver只是一个生成CODE的UI。可能是html / javascript / php或者其他什么。它是在最后只是TXT文件。在这方面 - 它没有关于代码执行的“功能”。它可以被视为记事本的GUI :-)。您看到的代码的“MM”部分，只是通过Dreamweaver插入的普通JAVASCRIPT（甚至不是最佳的）。这就是全部）

将鼠标悬停在链接上所需的WordPress黑客/插件，在DIV（图库）中显示图像

1 个答案: