jquery - Fancybox navigation right bottom corner -
is possible make navigation in fancybox located on right bottom corner , having respond screen/fancybox image scaling while 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:

in fancybox 2 exists 2 properties move popup, leftratio , topratio default both receive value 0.5 means center, in leftratio if put 1.0 popup go right if put 0 left, topratio if put 1.0 go bottom , 0 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 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
Post a Comment