在 fancybox 中定位缩略图

Question

只要你打开全尺寸的window，一切都很好。但是，当您水平调整 window 大小时，拇指会移动并消失。我希望它像大型弹出图像一样保持原样，固定在它们的位置，以便调整大小的用户能够通过 y 滚动看到它们。

有什么帮助吗？

JSFIDDLE：http://jsfiddle.net/ny9ytae5/4/

HTML:

<a caption="<h2>Image Header</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>" rel="Sold" class="fancybox" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>

        <a class="fancybox" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>

更新：我发现删除：

 'left': Math.floor($(window).width() * 0.5 - (obj.group.length / 2 * this.width + this.width * 0.5))

从 jquery.fancybox-thumbs.js 解决了问题，但前提是浏览器以全尺寸打开。如果用户打开网站时 window，缩略图甚至不会出现。

Answer 1

新的简单解决方案：

由于您希望缩略图不适应屏幕宽度并且不根据当前活动元素重新定位，一个非常简单的解决方案是否决属性，即 jquery.fancybox-thumbs.js 脚本通过内联设置样式。

this way, you do not need to make any modification to the original jquery.fancybox-thumbs.js

通过在 (!) jquery.fancybox-thumbs.css（或任何其他样式表，在 jquery.fancybox-thumbs.css:

之后加载）的末尾添加这些行来做到这一点

/* added Rules: */

#fancybox-thumbs {
   width: 920px !important;
}

#fancybox-thumbs ul {
  left: inherit !important;
  margin: 0 auto;
}

而且：瞧...updated jsfiddle

旧的解决方案

如您所知，fancybox thumbnail-helper 使用 $(window).width() 获取屏幕宽度并相应地调整缩略图的位置。

我认为你应该像这样修改 jquery.fancybox-thumbs.js 的本地版本：

添加固定宽度变量

在此之下：

//Shortcut for fancyBox object
var F = $.fancybox;

添加这个：

var fixedWidth = 920;

将 `$(window).width()` 替换为 `fixedWidth`。

这样：

this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));

变成

this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor(fixedWidth * 0.5 - (obj.index * this.width + this.width * 0.5)));

还有这个：

'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))

变成：

'left': Math.floor(fixedWidth * 0.5 - (obj.index * this.width + this.width * 0.5))

我目前没有时间检查它是否真的有效，但机会很大;-)

祝你好运！

在 fancybox 中定位缩略图

Position thumbnails in fancybox

html

javascript

css

jquery

fancybox

新的简单解决方案：

旧的解决方案

添加固定宽度变量

将 `$(window).width()` 替换为 `fixedWidth`。

在 fancybox 中定位缩略图

Position thumbnails in fancybox

html

javascript

css

jquery

fancybox

新的简单解决方案：

旧的解决方案

添加固定宽度变量

将 $(window).width() 替换为 fixedWidth。

将 `$(window).width()` 替换为 `fixedWidth`。