1

我正在为艺术画廊开发一个 WordPress 网站。客户想要一个与此完全相同的艺术家名册图片库：http ://www.walkercontemporary.com/artists/

我创建了一个自定义帖子类型，它生成一个列表、指向艺术家特定内容的链接。现在我需要一个在链接鼠标悬停时在相邻 DIV 中显示示例图像的效果。根据查看上述站点的源代码，我可以确定这是 Dreamweaver 的一项功能。我希望我的解决方案能够集成到 WordPress 易于使用的 CMS 功能中。否则我会建议客户寻求其他解决方案。他们没有足够的能力来维持大量进行手动编码的艺术家名单，并且他们不希望访客悬停在缩略图上（这是许多其他解决方案的方法）。

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

4

1 回答 1

5

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

但如果我理解正确，你只需要 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
});

演示

编辑我

在OP的评论之后 -

我承认我错了……你不需要 4 行代码——你只需要 2 行。:-)

但是我没有错，相同的代码适用于 hover 和 click 。它本质上是一样的。

您只需要用“HOVER”更改单词（功能）“CLICK”（请注意，没有其他任何更改）

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

我也承认，有时我认为一些基本技能是理所当然的，这是我不应该的。当我学习时，我遇到了同样的初学者问题。因此，如果您仍有疑问 - 我做了 3 个演示。

  1. 用拇指交换
  2. 与实时链接交换
  3. 与虚拟链接交换

在这里查看所有这些： 演示

我希望现在很清楚。

编辑二

我的上帝 ！！我又错了。代码应该更短！（不需要 replace() ）

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

最终演示（更短的代码）

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

于 2012-07-06T03:23:24.377 回答