NyroModal:将图像标题置于底部

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>

显然你可以根据你的需要改变偏移量