Clever Geek Handbook

Make fancybox elements stay in their position

whenever you open a window at full size level everything is fine. However, when you resize the window horizontally, the thumbs move and disappear. I want it to stay like a big popup image, fixed at their position so that a variable sized user can see them using y-scroll.

Any help please?

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: I found that deleting:

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

from jquery.fancybox-thumbs.js solved the problem, but only if the browser is open at full size. If the user opens the site in a small window, the thumbnails won't even appear.

+3


source to share


1 answer


This should work smoothly for your purpose:

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;}
0


source






More articles:


All Articles