带同位素的scrollTo插件

发布于 2024-12-11 13:54:28 字数 730 浏览 0 评论 0原文

我的作品集位于 http://www.visualise.ca/，我现在正在开发新版本运行同位素。它可以在 http://themes.visualise.ca/visualise 上找到。

当我单击将在页面中加载帖子的图像缩略图时，我希望页面使用 jQueryscrollTo 插件和以下代码滚动到该项目（单击的图像缩略图）：

$container.delegate( $itemString, 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
        $('html,body').scrollTo(this, 800);
});

但是经过测试，似乎位置项目的始终是容器的 top:1 left:1 （如果项目没有 1px 边框，则为 0）。另外，当我使用 Firebug 检查项目时，突出显示的蓝线不在项目本身上，而是位于容器的 top:1 left:1 处。

所以我怀疑，由于同位素，所有插件现在都认为所有项目都位于 0,0（1,1 因为我的情况是边距）。

我该怎么做才能正确滚动？

非常感谢您的时间和帮助。

原文

My portfolio is located at http://www.visualise.ca/ and I am now working on a new version running isotope. It is available at http://themes.visualise.ca/visualise.

When I click on an image thumbnail which will load the post within the page I would like the page to scroll to the item (the clicked image thumbnail) using the jQuery scrollTo plugin and the following code:

$container.delegate( $itemString, 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
        $('html,body').scrollTo(this, 800);
});

But after testing, it seems like the position of the item is always top:1 left:1 of the container (this would be 0 if the item didn't have a 1px border). Also when I use Firebug to inspect the item, the highlighted blue line is not on the item itself but located at top:1 left:1 of the container.

So I suspect that because of isotope all the plugins now thinks all the items are located at 0,0 (1,1 because the margins in my case).

What can I do in order to scroll properly?

Many thanks for your time and help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野侃 2024-12-18 13:54:28

您可以使用以下技术获取项目相对于其容器的正确位置：设置 itemPositionDataEnabled： true 在选项中，并使用 .data('isotope-item-position') 获取位置。对于你的代码

$container.isotope({
  // options...
  itemPositionDataEnabled: true
});

$container.delegate( $itemString, 'click', function(){
  var $this = $(this),
      itemPosition = $this.data('isotope-item-position');
  $this.toggleClass('large');
  $container.isotope('reLayout');
  $('html,body').scrollTo( itemPosition.y, 800);
});

You can get the proper position of an item, relative to its container, using the following technique: set itemPositionDataEnabled: true in the options, and get the position using .data('isotope-item-position'). For your code

$container.isotope({
  // options...
  itemPositionDataEnabled: true
});

$container.delegate( $itemString, 'click', function(){
  var $this = $(this),
      itemPosition = $this.data('isotope-item-position');
  $this.toggleClass('large');
  $container.isotope('reLayout');
  $('html,body').scrollTo( itemPosition.y, 800);
});

回复收藏 0 原文