Fancybox导航右下角

Question

是否可以使fancybox中的导航位于右下角，并且在我将屏幕变大/变小时响应屏幕/ fancybox图像缩放？

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

我的目标：

fancybox窗口右下角的导航：

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>