Question

我目前在尝试将巨型灯箱应用到我的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灯箱是不是好主意？

Answer 1

我找到了解决方法。（Tumblr通常没有用于单张照片的灯箱，仅用于全景照片和照片集），这意味着您要么必须集成外部灯箱，就像我尝试使用大型灯箱一样，或者您输入一些启用的代码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的一些简单说明，因为他是提出这个简单解决方案的人。

＆＃34;在主题自定义的编辑HTML屏幕中，搜索{Block：Photo}并在里面查找，它将类似于：

完成后，将修改后的javascript代码块复制到顶部并将其粘贴到图像代码之后，然后保存。当您点击图片帖子时，它应该显示tumblr用于照片集的Lightbox并显示晕影背景。＆＃34;

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

Tumblr Photo/Photoset popup

不幸的是我不得不发布这个问题，因为我试图弄清楚如何让最后两天使用大型灯箱工作，对于拥有一些基本JS技能的人来说，我确定并不难。像我这样的业余爱好者，也许这可以通过改变一些代码和使用tumblr的灯箱来节省你的时间，就像我为单张照片发布一样。

除此之外，很遗憾没有对这个巨大的灯箱做出任何结论，但可能真正的目标是为单个照片帖子设置一个灯箱，至少可以实现。希望替代解决方案能够为其他任何试图获得单个照片帖子的灯箱的人提供同样的解决方案。：）

同样可以通过@Jayowend轻松修复Lightbox工作单张照片，所有功劳归功于@Jayowend。

实施大型灯箱到tumblr问题

1 个答案: