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:

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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -