在幻灯片中放置缩略图 [英] Position thumbnails in fancybox

问题描述

每当你打开全尺寸的窗口，一切都没关系。但是，当您水平调整窗口大小时，大拇指会移动并消失。我想让它保持像大弹出图像，固定在他们的位置，以便用户可以通过y滚动看到他们的大小。

有任何帮助吗？

JSFIDDLE： http： //jsfiddle.net/ny9ytae5/4/

HTML：

 < a caption =< h2>图片标题< / 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 =Soldclass =fancyboxdata-fancybox-group =thumb1href =http://fancyapps.com/fancybox/demo/4_b.jpg>< img src =http：// fancyapps.com/fancybox/demo/4_s.jpgalt =/>< / a> 
 
< a class =fancybox hiddendata-fancybox-group =thumb1href =http://fancyapps.com/fancybox/demo/3_b.jpg>< img src =http://fancyapps.com/fancybox/demo/3_s.jpgalt =/>< / a> 
 
< a class =fancyboxdata-fancybox-group =thumb2href =http://fancyapps.com/fancybox/demo/2_b.jpg>< img src =http://fancyapps.com/fancybox/demo/2_s.jpgalt =/>< / a> 
 
< a class =fancybox hiddendata-fancybox-group =thumb2href =http://fancyapps.com/fancybox/demo/1_b.jpg>< img src =http://fancyapps.com/fancybox/demo/1_s.jpgalt =/>< / a> 
  

更新：我发现删除：

 'left'：Math.floor（$（window）.width（）* 0.5  - （obj.group.length / 2 * this.width + this.width * 0.5））$ jquery.fancybox-thumbs.js中的b $ b  

解决了这个问题，尺寸。

解决方案

新的，简单的解决方案：

/ h1>

由于您希望缩略图不适应屏幕宽度，并且不会根据当前活动元素重新定位，一个非常简单的解决方案是取消属性， code> jquery.fancybox-thumbs.js 脚本是通过内联样式设置的。

，您不需要对原始 jquery.fancybox-thumbs.js

$ b进行任何修改$ b

通过在（！） jquery.fancybox-thumbs.css （或任何其他样式表c $ c> jquery.fancybox-thumbs.css ：

  / * added规则：* / 
 
＃fancybox-thumbs {
 width：920px！important; 
} 
 
＃fancybox-thumbs ul {
 left：inherit！重要; 
 margin：0 auto; 
} 
  

。 更新jsfiddle

---

旧解决方案

正如您已经发现的，fancybox缩图助手使用 $（window）.width（）以获得屏幕宽度，并相应地调整缩略图的位置。

修改您的本地版本 jquery.fancybox-thumbs.js ，如下所示：

---

$ b $

  / b 
添加fixedWidth变量
 
 
  var F = $ .fancybox; 
  

添加：

  var fixedWidth = 920; 
  

---

替换 $ ）.width（）与 fixedWidth 。

>

  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）））; 
  

成为

  this.list.width（this.width *（obj.group.length + 1））。css（'left'，Math.floor（fixedWidth * 0.5  - （obj.index * this.width + this） width * 0.5）））; 
  

和此：

 'left'：Math.floor（$（window）.width（）* 0.5  - （obj.index * this.width + this.width * 0.5））
  
 
 
 
变为：
 'left'： Math.floor（fixedWidth * 0.5  - （obj.index * this.width + this.width * 0.5））
  
 
 
 
 
 
 
我目前没有时间查看是否真的有效，但机会很高;  - ）
 
 
 
祝你好运！ 
 
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.
解决方案
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! 

                        
这篇关于在幻灯片中放置缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！