【问题标题】:jquery image swap - for gallerifficjquery 图像交换 - 用于画廊
【发布时间】:2013-02-16 03:29:19
【问题描述】:

我这里有一个有点复杂的功能,但我基本上是在尝试将图像交换功能放入 Galleriffic。我一直在调整 jquery Galleriffic 图片库以满足客户的需求,除了我需要添加的这一功能之外,一切都进展顺利。

http://www.susanyounganimation.com/test/drawings/carnival.html

左侧大图下方是文字“负/正”。客户希望用户可以选择查看负片,即当点击“负片”时图像的反转版本,然后当他们点击“正片”时图像恢复为原始版本。我将画廊中的每张图片都作为负片版本(尺寸完全相同),所以我需要做的就是在点击下方的负片或正片文本时将当前图片替换为另一张图片。

希望这一切都有意义。任何人都可以帮助我使用一些可以启用此功能的脚本吗?欢迎任何 cmets,因为我对此束手无策!

一切顺利

S

【问题讨论】:

标签: jquery galleriffic


【解决方案1】:

我不是该画廊的专家,但我将通过以下方式解决该问题。我会创建负片图像并将它们存储在与主图像相同的文件夹中,并在文件末尾添加一个负片,例如:

绘画-001.jpg

绘画-001-neg.jpg

然后为负链接和正链接添加一个单击事件处理程序,该处理程序将用相同的图像替换当前的大图像 src,前面带有“neg-”。

$("img#ID_OF_MAIN_IMAGE").src($(this).attr('src').replace('.jpg','-neg.jpg'));

然后恢复它:

$("img#ID_OF_MAIN_IMAGE").src($(this).attr('src').replace('-neg.jpg','.jpg'));

您只需要一个正/负链接实例,而不是每张照片一个。

如果不清楚,请告诉我

【讨论】:

  • 谢谢Rural,但还是有问题。我按照指示做了,但仍然不知道用什么包装链接(请原谅我的无知)。如何激活(在 html 中)页面上的“否定”和“肯定”文本,以便触发 jquery?
  • @user2076700 给每个链接一个类,例如 .link_negative 和 .link_positive。然后像这样触发它: $('.link_negative').click(function() { $("img#ID_OF_MAIN_IMAGE").src($(this).attr('src').replace('.jpg', '-neg.jpg')); });
  • 喜欢这个? 消极/积极
猜你喜欢
  • 2011-03-11
  • 2011-02-19
  • 2015-06-28
  • 1970-01-01
  • 1970-01-01
  • 2011-04-14
  • 2012-02-04
  • 2020-01-11
  • 1970-01-01
相关资源
最近更新 更多