Position thumbnails in fancybox

Question

whenever you open the window on full-size, everything is okay. However when you re-size the window horizontally, the thumbs shift and disappear. I want it to stay put like the large pop-up image, fixed in their position, so that the user on re-size would be able to see them by 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 removing:

 '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 opened on full-size. If the user opens the site in a small window, the thumbnails won't even appear.

Answer 1

New, simple solution:

As you want the thumbnails not to adapt to the screenwidth and not to be repositioned based on the currently active element, a very simple solution is to overrule the properties, that the jquery.fancybox-thumbs.js script is setting via inline styles.

this way, you do not need to make any modification to the original jquery.fancybox-thumbs.js

Do so by adding these lines at the end of (!) jquery.fancybox-thumbs.css (or any other stylesheet, that is loaded after jquery.fancybox-thumbs.css:

/* added Rules: */

#fancybox-thumbs {
   width: 920px !important;
}

#fancybox-thumbs ul {
  left: inherit !important;
  margin: 0 auto;
}

And: voila... updated jsfiddle

---

Old solution

As you already have found out, the fancybox thumbnail-helper uses $(window).width() to get the width of the screen and adapts the placement of the thumbnails accordingly.

I think you should modify your local version of jquery.fancybox-thumbs.js like this:

---

add fixedWidth variable

below this:

//Shortcut for fancyBox object
var F = $.fancybox;

add this:

var fixedWidth = 920;

---

Replace $(window).width() with fixedWidth.

So that this:

this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));

becomes

this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor(fixedWidth * 0.5 - (obj.index * this.width + this.width * 0.5)));

and this:

'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))

becomes:

'left': Math.floor(fixedWidth * 0.5 - (obj.index * this.width + this.width * 0.5))

---

I currently have no time to check out if it really works, but the chances are high ;-)

Good Luck!