9
Add Image Lightbox for Ghost blog
source link: https://muyexi.im/add-image-lightbox-for-ghost-blog/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Feb 14, 2022
1 min read
Tutorial
Add Image Lightbox for Ghost blog
If your blog post are filled with chart images, like my last one, it'd be nice if the visitor can view the bigger version in a popup with a simple click.
After searching around for some time, below is the best code I came up with. To install, paste the code in your Site Footer section in Ghost Settings > Code Injection.
<script>
$('.post img ').each(function() {
$(this).wrap("<a data-no-swup data-fslightbox href='" + this.src + "'/>");
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.0.9/index.min.js"></script>
It's using fslightbox.js for the lightbox effect, here's an official demo.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK