NyroModal: Position image titles at the bottom

I'm using the excellent NyroModal to create a photo gallery. However, I am struggl开发者_运维技巧ing to position the titles of the photos below the images instead of above them (NyroModal default). Has anybody achieved positioning them below?

If you use the "beforeShowCont" callback, your title position will change to the top again after resizing the browser window. Using the "afterReposition" callback the positioning of the title will also work after resizing the browser window. You also need to find the absolute position of the image using $('.nyroModalImage img').offset(). For this example the offset between image and title is chosen 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>

You have to change the position of the title tag (h1) through callback:

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

Obviously you will change the offset according to your needs.