Question

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

请帮忙吗？

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

HTML：

/m

更新：我发现删除：

<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>

来自jquery.fancybox-thumbs.js的

解决了这个问题，但前提是浏览器是以全尺寸打开的。如果用户在小窗口中打开网站，则缩略图甚至不会出现。

Answer 1

这应该可以顺利地用于您的目的：

HTML：

<div id="wrapper">
     <!-- Your fancybox html here -->
</div>

<强> CSS：

#wrapper{
    width:100%; /* Any width you want */
    -webkit-overflow-scrolling: touch; /* Mobile support */
    overflow-x: auto;
    white-space: nowrap;}

使fancybox元素保持在他们的位置

1 个答案: