实施宏伟的灯箱到Tumblr问题

Implementing magnific lightbox to tumblr issue

本文关键字：Tumblr 问题 施宏伟      更新时间：2023-09-26

我目前在尝试将宏伟的灯箱实现到我的 tumblr 博客单张照片页面时遇到了一些问题。在阅读之后，我最好的选择似乎是尝试整合宏伟的灯箱。非常感谢对此的任何帮助。

快速说明：我没有javascript语言的经验，主要是css和html，所以如果任何答案可以尽可能具有描述性，甚至可能一步一步地说明我在这方面出错的地方，我将不胜感激。我知道有很多问题要问，但非常感谢一些初学者的耐心等待，谢谢:)

     The HTML
        {block:Photo}
            <div class="single-content">
                <figure class="photo-post-wrapper">
                    <div class="photo-lightbox">
                        <a href="{PhotoURL-HighRes}"><img data-interchange="{PhotoURL-500}, {PhotoURL-HighRes}"></a>
                    </div>
                </figure>
            </div>
            {block:Caption}{Caption}{/block:Caption}
        {/block:Photo}

    The CSS
    .photo-lightbox a { 
        -moz-cursor: zoom-in; -webkit-cursor: zoom-in; cursor: zoom-in;
    }
    .photo-lightbox a:hover { 
    opacity: 0.7; 
    } 
    .photo-post-wrapper {
    margin: 2em 0; 
    text-align: center;
    }
    .photo-post-wrapper img {
        width: 100%;
        height: auto;
    }
    /* Magnific Popup CSS Below (Just the copy and pasted css code provided by magnific its pretty long so i'll just add  the link  */

    //The script I have added before </body> and after </footer> for magnific lightbox.
    {block:PermalinkPage}
        $(document).ready(function() {
            $('.photo-lightbox').magnificPopup({
                delegate: 'a',
                type: 'image',
                tLoading: 'Loading image #%curr%...',
                mainClass: 'mfp-img-mobile',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0,1]
                }
            });
        });

不确定这是否是问题所在，但一切都是内联的，没有链接任何外部文件。

链接到 Magnific CSS

https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/magnific-popup.css

编辑：也只是想补充一点，我正在考虑创建一个纯 css 灯箱，如果这对我来说太麻烦了，有人知道纯 css 灯箱是否是个好主意吗？

我已经找到了解决方案。(Tumblr 通常没有用于单个照片帖子的灯箱，仅用于全景和照片集(，这意味着您要么必须集成一个外部灯箱，就像我试图用 magnific 灯箱所做的那样，或者您输入一些代码使 tumblr 灯箱能够在单个照片帖子上运行。这就是我所做的，它非常容易地解决了这个问题。

<script class="inline_embed" type="text/javascript">
var domain = document.domain,
photo_{PostID} = [{
    "width": "{PhotoWidth-HighRes}",
    "height": "{PhotoHeight-HighRes}",
    "low_res": "{PhotoURL-250}",
    "high_res": "{PhotoURL-HighRes}"
}];
function event_is_alt_key(e) {
    return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
};
document.getElementById('photo_{PostID}').onclick = function (e) {
    if (event_is_alt_key(e)) return true;
    window.parent.Tumblr.Lightbox.init(photo_{PostID});
    return false;
}

现在下一点是我将引用@Jayowend的一些简单说明，因为他是提出这个简单解决方案的人。

"在主题自定义的编辑HTML屏幕中，搜索{Block：Photo}并在里面寻找，使其类似于以下内容：

完成此操作后，将修改后的javascript代码块复制到顶部并将其粘贴到图像代码之后，然后保存。当你点击一个图片帖子时，它应该会调出tumblr用于照片集的灯箱，并显示晕影背景。

我从这里得到的原始SO帖子来自这里：

Tumblr 照片/照片集弹出窗口

不幸的是，我不得不发布这个问题，因为我试图弄清楚如何让 magnific 灯箱在过去 2 天工作，我相信这对于具有一些基本 JS 技能的人来说并不难，但是对于任何像我这样的业余爱好者来说，也许这可以通过更改一些代码并使用 Tumblr 的灯箱来节省您的时间，就像我对单张照片帖子所做的那样。

除此之外，很抱歉，宏伟的灯箱没有结论，但可能真正的目标是为单个照片帖子提供一个灯箱，至少已经实现了。 希望替代解决方案也适用于其他任何试图为单个照片帖子获取灯箱的人。 :)

还有Big UP to @Jayowend，他/她可以轻松修复灯箱在单个照片帖子上工作，所有的功劳都归@Jayowend。

相关文章：