Question

我希望来自fancybox按钮助手的按钮显示在图像下方而不是顶部。我尝试使用position：'bottom'但按钮仍然在图像的顶部。我不知道应该做什么职位。

这是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fancybox attempt 1</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css" />

<script type="text/javascript">
    $(document).ready(function(){
        $(".single_image").fancybox({
            openEffect : 'elastic'
        });

        $(".fancybox_button").fancybox({
            arrows : true,
            loop : false,
            openEffect : 'elastic',
            closeEffect : 'elastic',

            helpers     : {
                title   : { type : 'inside' },
                buttons : {},
                position: 'bottom',
            }
        });
    });
</script>

<style type="text/css">
.fancybox-nav span {
 visibility: visible;
}
</style>

</head>
<body>
    <h1>Single Image</h1>
    <a class="single_image" title="skyscraper" href="http://farm9.staticflickr.com/8254/8856281122_1a0c678825_b.jpg"><img src="http://farm9.staticflickr.com/8254/8856281122_1a0c678825.jpg" width="100px" height="100px"/></a><br />
    <h1>Button Helper</h1>
    <a class="fancybox_button" rel="gallery 1" title="airplanes" href="http://farm9.staticflickr.com/8398/8856153523_b992192905_b.jpg"><img src="http://farm9.staticflickr.com/8398/8856153523_b992192905_z.jpg" alt="" width="100" height="100" /></a>
<a class="fancybox_button" rel="gallery 1" href="http://farm8.staticflickr.com/7395/8855348484_bdb84435bf_b.jpg" title="raspberry"><img src="http://farm8.staticflickr.com/7395/8855348484_bdb84435bf.jpg" alt="" width="100" height="100" /></a>
</body>
</html>

Answer 1

helpers     : {
   title   : { type : 'inside' },
   buttons : {position:'bottom'},
   position: 'bottom',
 }

添加按钮位置。并在css文件中进行规范。找到＃fancybox-buttons.bottom 来自定义

#fancybox-buttons.bottom {
 bottom: 0;
}

fancybox按钮帮助移动按钮下面的图像

1 个答案: