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