NyroModal：将图像标题放在底部答案

【问题标题】：NyroModal: Position image titles at the bottomNyroModal：将图像标题放在底部
【发布时间】：2011-09-15 23:43:06
【问题描述】：

我正在使用出色的NyroModal 创建照片库。但是，我正在努力将照片的标题放置在图像下方而不是它们上方（NyroModal 默认）。有没有人将它们定位在下面？

【问题讨论】：

【解决方案1】：

如果您使用“beforeShowCont”回调，您的标题位置将在调整浏览器窗口大小后再次变为顶部。使用“afterReposition”回调，标题的定位也将在调整浏览器窗口大小后起作用。您还需要使用$('.nyroModalImage img').offset() 找到图像的绝对位置。在本例中，图片和标题之间的偏移量选择为 10(px)。

<script type="text/javascript">
jQuery(function($) {
  $(".nyroModal").nm({
    callbacks: {
      afterReposition: function(nm) {
        if (nm._hasFilter('title')) {
          var pos = $('.nyroModalImage img').offset();
          $('h1.nyroModalTitle').css('top', pos.top+$('.nyroModalImage img').height()+10);
        }
      }
    }
  });
});
</script>

【讨论】：

【解决方案2】：

你必须通过回调改变标题标签（h1）的位置：

<script type="text/javascript">
jQuery(function($) {
    $('.nyroModal').nm({
        callbacks: {
            beforeShowCont: function(nm) {
                if (nm._hasFilter('title')) {
                    $('h1.nyroModalTitle').css('top', $('.nyroModalImage img').height()+5);
                }
            }
        }
    });
});
</script>

显然，您会根据需要更改偏移量。

【讨论】：