Jekyll x Markdown 图片美化 - Lightbox.js

<a href="someurl" data-toggle="lightbox">Launch modal</a>

<a href="someurl" id="mylink">Open lightbox</a>
$('#mylink').ekkoLightbox(options);

<p>
    <img src="path_to_image" alt="">
    <em>image_caption</em>
</p>

![](path_to_image)
*image_caption*

$('#post-content img').each(function(index, val) {
    var link = $('<a></a>').attr({
        'rel': 'lightbox',
        'href': $(val).attr('src'),
        'data-lightbox':"roadtrip"
    });
    if ($(val).next('em')!=null) {
        link.attr('title', $(val).next('em').html());
    }
    $(val).parent().prepend(link);
    link.append($(val));
    $(val).addClass('img-fluid'); /*add BS4 image fluid class*/
});

<p>
    <a rel="lightbox" href="path" data-lightbox="roadtrip" title="Enjoy It！">
        <img src="path" alt="" class="img-fluid">
    </a>
    <em>Enjoy It！</em>
</p>

$('#subcontainer img').on("click",function(){
    event.preventDefault();
    $(this).ekkoLightbox({
        remote: $(this).attr('src'),
        title: $(this).next().html()
    });
})

![]( https://assets.pic.szhshp.org/site/portrait.jpg)
*Enjoy It！*

img + em {
    display: block;
    padding-left: 10px;
    color: grey;
 }