jQuery图片库定制

编辑：这个问题在这一点上部分回答，感谢尼尔谁已经把我放在正确的路径使用scrollTo插件;但是，如下所述，我仍然遇到了让“下一个”和“上一个”链接按照需要正确调整滚动缩略图列表的问题。因此，我想知道是否有任何其他熟练的jQuery程序员愿意尝试一下，并试图帮助我克服这个障碍......非常感谢。jQuery图片库定制

/////////////////////////

知道如果任何精通jQuery的程序员，可以修改图片库提供了一些援助脚本：我想在即将推出的项目中使用Galleriffic--如果您不熟悉的话，可以使用一个伟大的插件，但不要将缩略图分成多个页面，我想要一个滚动div来同时显示所有的大拇指，如here所示。

我的问题是，是否有可能让大拇指的滚动列表“跟随”大图像的状态 - 也就是说，如果点击“下一张照片”显示全尺寸图像以及相应的缩略图不在视图中时，列表将自动滚动显示当前缩略图，如果这是有道理的。我想这样的脚本会要求全尺寸的图像遵循或“感知”缩略图的可见状态并根据需要调整可见性。请让我知道，如果我应该更具体。

我希望可能有一些现有的jQuery功能来完成这项任务（？），并且我预先感谢你在这里的任何方向。

来源

2011-01-25 nickpish

.scrolltop（值）（http://api.jquery.com/scrollTop/ ）和.position（）应该做的伎俩 – generalhenry 2011-01-25 23:16:34

有a plug-in，会为你做到这一点。

它允许您指定一个元素，例如您想要滚动的缩略图“IMG”。它还允许您指定如何执行滚动的效果。

查看关于如何使用它的示例。

至于下方的跟进评论：

按钮旁边移动和以前有类“下一步”或“上一页”和包含大形象类“提前链接”的主播，他们都有一个“href”属性可以转到下一张/上一张幻灯片。因此，要滚动到该幻灯片的缩略图，您应该在jQuery代码的开头或附近编码如下所示的代码。我只用肉眼检查，所以它可能有AA错字的，但你应该得到的漂移：

$('.next, .prev, .advance-link').live().click().function(){ 
    var href = $(this).attr('href'); 
    $('#thumbs').scrollTo($('.thumb[href=' + href + ']'), {axis: 'y'}); 
});

来源

2011-01-25 23:36:19 Neil

感谢您的反应尼尔 - 我想我有点困惑的事实是，在右边的全尺寸图像容器是由jQuery生成的，所以我不知道在哪里指定通过缩略图列表来调用scrollTo脚本以获取滑动位置的值...正如我在下面的评论中提到的，当用户点击全尺寸图像或下一个/上一个按钮时，我希望不仅显示下一个/上一个全尺寸图像，而且反映相应缩略图的滚动位置左... – nickpish 2011-01-26 00:16:29

这里有一个粗略的例子

$('.current img').live('mouseenter',function(){ 

    var alt = $(this).attr('alt'); 
    var thumb = $('.thumbs [alt='+alt+']'); 
    var position = thumb.position(); 
    var thumbs = $('.thumbs'); 
    thumbs.scrollTop(position.top); 
});

来源

2011-01-25 23:34:25 generalhenry

非常感谢所有的答复家伙;和generalhenry，如果你会原谅我平淡的编程知识，并提供一些更具体的如何应用，我会非常感激。我意识到，当用户点击较大图像或下一个/上一个按钮时，我正在有效地尝试做两件事：（1）切换到下一个/上一个全尺寸图像和（2）在位置上反映该选择的缩略图滚动列表 – nickpish 2011-01-26 00:11:46

jQuery图片库定制

回答

相关问题