Сделайте элементы fancybox оставайтесь в своем положении

Question

всякий раз, когда вы открываете окно на полный размер, все в порядке. Однако, когда вы изменяете размер окна по горизонтали, большие пальцы смещаются и исчезают. Я хочу, чтобы он оставался похожим на большое всплывающее изображение, фиксированное в их положении, так что пользователь по размеру будет иметь возможность видеть их с помощью y-scroll.

Любая помощь пожалуйста?

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> 

UPDATE: я обнаружил, что удаление:

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

из 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;}