кнопки вспомогательного перемещения fancybox ниже изображения

Я хочу, чтобы кнопки из вспомогательного меню кнопок fancybox отображались ниже изображения вместо сверху. Я попытался использовать позицию: «снизу», но кнопки все еще находятся поверх изображения. Я не знаю, какую позицию нужно делать.кнопки вспомогательного перемещения fancybox ниже изображения

Это мой код.

<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>

источник

2013-05-30 iH8WorkingWith.NetGraphics

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

добавить позицию кнопки. и регулировать в файле css. найти # FancyBox-buttons.bottom настроить

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

источник

2013-05-30 08:09:15

Таким образом, вы должны были поместить его внутри кнопок {}. Благодарю. –

@silentcon: обязательно удалите последнюю конечную запятую после 'position: 'bottom',', чтобы избежать проблем с IE – JFK

кнопки вспомогательного перемещения fancybox ниже изображения

ответ

Смежные вопросы