Fancybox导航右下角

Question

是否可以在制作屏幕 bigger/smaller 时使 fancybox 中的导航位于右下角并响应 screen/fancybox 图像缩放？

fancybox 模板示例 http://fiddle.jshell.net/t91p3g7s/?utm_source=website&utm_medium=embed&utm_campaign=t91p3g7s

我的目标：

fancybox右下角导航window:

Answer 1

在 fancybox 2 中存在两个属性来移动你的弹出窗口，默认情况下 leftRatio 和 topRatio 都接收值 0.5，这意味着中心，在 leftRatio 中，如果你把 1.0 放在右边，如果你把 0 放在左边，你的弹出窗口会向右, topRatio 如果你把 1.0 放到底部，0 到顶部。

jQuery(document).ready(function($) {
  try{
   $(".fancybox").fancybox({
        helpers: {
            buttons: {
                tpl: '<div id="fancybox-buttons"><ul>' +
                    '<li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li>' +
                    '<li><a class="btnClose" title="Close" href="javascript:;"></a></li>' +
                    '</ul></div>'
            }
        },
        leftRatio: 1.0,
        topRatio: 0
    });
   } catch(e){
   console.log(e.message);
   }
});

#fancybox-buttons ul {
    /* 166 for 4 buttons */
    width: 86px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>



<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

Fancybox导航右下角

Fancybox navigation right bottom corner

html

css

jquery

fancybox

fancybox-2