Position Thumbnails In Fancybox

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 lar

Solution 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!