每当您将窗口打开到全屏状态时,一切都很好。但是当您水平调整窗口大小时,缩略图会移动并消失。我希望它像大型弹出图像一样固定在其位置上,保持不变,以便用户在调整大小时可以通过垂直滚动条查看它们。
请帮忙解决吗?
JSFIDDLE链接:http://jsfiddle.net/ny9ytae5/4/ HTML:
更新:我发现删除以下内容可以解决问题:
从jquery.fancybox-thumbs.js解决了这个问题,但只有当浏览器处于全屏状态时才有效。如果用户在小窗口中打开网站,则缩略图甚至不会出现。
请帮忙解决吗?
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解决了这个问题,但只有当浏览器处于全屏状态时才有效。如果用户在小窗口中打开网站,则缩略图甚至不会出现。