1

ファンシーボックスボタンヘルパーのボタンを画像の上ではなく下に表示したい。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>
4

1 に答える 1

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

ボタンの位置を追加します。cssファイルで調整します。#fancybox-buttons.bottomを見つけてカスタマイズします

#fancybox-buttons.bottom {
 bottom: 0;
}
于 2013-05-30T08:09:15.593 に答える