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

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个演示小提琴.

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

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

我希望现在很清楚.

编辑二

天哪 !!我又错了.代码应该更加紧凑!(无需替换())

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

最终演示(更短的代码)

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