themes - 如何减少 Tumblr 照片集帖子的大小并保持原始的 ph 集布局？

Question

我想将它们减小到最大 200 像素宽度，并保持与照片具有 10 像素间距的相同布局。此外，我不想将帖子设置为那么宽并使用溢出：隐藏只会切断照片集。

Answer 1

jQuery 解决方案

对于此解决方案，您将需要最新版本的jQuery和 jQuery 插件imagesLoaded包含在head以下主题之前：

<script type="text/javascript">
    $(document).ready(function() {
        $('iframe.photoset').each(function() {
            var i = this;
            $(i).attr("onload", "ps_resize(this)");
            var s = $(i).attr("src");
            s = s.replace(/\/500\//, "/200/");
            $(i).attr("src", s);
        });
     });
    function ps_resize(i) {
        $(i).contents().find("body").imagesLoaded(function() {
            $(i).attr("width", 200);
            $(i).attr("height", $(this).height());
         });
         return false;
    }
</script>

什么解决方案

1. DOM 准备好后，找到所有照片集 iFrame
2. 对于每个 iFrame...
   • 将“onload”属性设置为您的框架调整功能
   • 获取框架的源 url，将大小（例如 500）更改为 200
   • 设置框架的源网址（这将导致它重新加载较小的照片集）
3. 在调整大小功能...
   • 等待图片加载
   • 将框架宽度设置为 200
   • 将框架高度设置为照片集的新高度

无限滚动的附加代码

如果你使用Infinite Scroll jQuery 插件，你需要在你的success回调函数中额外包含这个：

...
$(newElements).find('iframe.photoset').each(function() {
    var i = this;
    $(i).attr("onload", "ps_resize(this)");
    var s = $(i).attr("src");
    s = s.replace(/\/500\//, "/200/");
    $(i).attr("src", s);
 });
...

显然，如果您使用的是 Infinite Scroll，我建议您function在初始加载和滚动时定义在每个 iFrame 上调用的，这样您就无需维护重复的代码。