Vimpil Vimpil - 3 months ago 29
HTML Question

Fancybox navigation right bottom corner

Is it possible to make navigation in fancybox to be located on the right bottom corner and having respond to screen/fancybox image scaling while I making screen bigger/smaller?

fancybox template example http://fiddle.jshell.net/t91p3g7s/?utm_source=website&utm_medium=embed&utm_campaign=t91p3g7s

my goal:
navigation in right bottom corner of fancybox window

Answer

In fancybox 2 exists two properties to move your popup, leftRatio and topRatio by default both receive the value 0.5 what means center, in leftRatio if you put 1.0 your popup will go to the right if you put 0 to the left, topRatio if you put 1.0 will go to bottom and 0 to the top.

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>

Comments