当你打开全屏窗口时,一切都很好。但是,当您水平调整窗口大小时,拇指会移动并消失。我希望它像大型弹出图像一样保持不动,固定在它们的位置,以便调整大小的用户能够通过 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 解决了这个问题,但前提是浏览器以全尺寸打开。如果用户在小窗口中打开网站,缩略图甚至不会出现。
最佳答案
这应该可以顺利实现您的目的:
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;}
关于javascript - 使 fancybox 元素保持在它们的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31241152/