javascript - 实现 magnific lightbox to tumblr 问题

Question

我目前在尝试将 magnific lightbox 应用到我的 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]
                }
            });
        });

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

链接到华丽的 CSS

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

编辑: 还只是想补充一点，我正在考虑创建一个纯 css 灯箱，如果这证明对我来说设置起来有太多问题，有人知道纯 css 灯箱是否是个好主意吗？

Answer 1

我已经找到了解决办法。 (Tumblr 通常没有用于单张照片帖子的灯箱，只有全景图和照片集)这意味着您要么必须集成一个外部灯箱，就像我尝试使用 magnific lightbox 所做的那样，要么您输入一些代码来启用 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 Photo/Photoset popup

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

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

也非常感谢@Jayowend，他/她轻松修复了让灯箱在单个照片帖子上工作的方法，所有功劳都归功于@Jayowend。