Question

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

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

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

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

NyroModal：将图像标题置于底部

2 个答案: