1

好的,我正在为 tumblr 制作主题。我正在使用同位素作为布局选项。我想要的是有两种选择——一列有宽帖子(填满帖子所在的整个 div),另一种是砖石布局(我想我设置了)3 列。我还使用同位素制作过滤器,以便人们可以通过帖子类型缩小他们看到的范围。

*注意:这是一个非常基本的主题骨架副本,这样我就可以先弄清楚 javascript/jquery,而不会造成太多混乱。一旦我弄清楚这一点,我将添加其他 div 和部分,确保不理会它并解决所有问题。下面是迄今为止该页面的 html 副本。我一直在 Dreamweaver 中创建它,然后将其复制粘贴到 tumblr,其中 {tags} 被呈现为实际帖子。要按预期查看此页面,请访问http://drmstx-testing.tumblr.com,我那里只有 2 或 3 个帖子,但足以让您了解。

令我感到沮丧的是,单击网格或一列的链接可能会工作一次,然后什么也没有发生,或者唯一改变的是布局,而不是随着我改变而使帖子大小变大和变小的 css布局。另外,我希望它看起来很流畅,例如,有一次我让它有点小故障,所有的内容都会最小化到什么都没有,然后闪现/剪切到正确的布局。我希望人们看到帖子移动到它的位置并且只是缩小或增长一点,仅此而已。如果你能帮我解决这个问题,我知道这可能会让人感到困惑,尤其是其中的 tumblr 代码标签。我把它们拿出来,但我认为 tumblr 呈现它的方式实际上正在改变它的行为方式,所以我有点需要它……如果你需要澄清,请告诉我。

为了使这更容易一点,请查找这些类和部分代码—— .box .grid .onecolumn || css 的结尾、javascript 部分和正文的开头

    <style type="text/css">

        /**** Isotope filtering ****/

        .isotope-item {
          z-index: 2;
        }

        .isotope-hidden.isotope-item {
          pointer-events: none;
          z-index: 1;
        }

        .isotope,
        .isotope .isotope-item {
          /* change duration value to whatever you like */
          -webkit-transition-duration: 0.8s;
             -moz-transition-duration: 0.8s;
                  transition-duration: 0.8s;
        }

        .isotope {
          -webkit-transition-property: height, width;
             -moz-transition-property: height, width;
                  transition-property: height, width;
        }

        .isotope .isotope-item {
          -webkit-transition-property: -webkit-transform, opacity;
             -moz-transition-property:    -moz-transform, opacity;
                  transition-property:         transform, opacity;
        }

        /*==============================*/
        .post {
            transition: all 1st ease-in-out;
            -webkit-transition-duration: 0.8s;
            -moz-transition-duration: 0.8s;
            transition-duration: 0.8s;
        }
        .post img {width: 100%;}

        .grid {
            width: 33%;
            min-width: 350px;
            max-width: 475px;
        }

        .onecolumn {
            width: 100%;
        }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>

    <script>
        $(document).ready(function(){
            var $container = $('#content');
            $container.isotope({
                filter: '*',
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false,
                }
            });

            $('#nav #sort a').click(function(){
                var selector = $(this).attr('data-filter');
                $container.isotope({
                    filter: selector,
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false,
                    }
                });
            return false;
            });

            $('#nav #layout a').click(function(){
                var selector = $(this).attr('data-filter');
                $container.isotope({
                    layoutMode: selector,
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false,
                    }

                });
            return false;
            });
        });
            function grid(){
                $(".post").switchClass( "onecolumn", "grid", 400, "easeInOut" );
            };

            function onecol(){
                $(".post").switchClass( "grid", "onecolumn", 400, "easeInOut" );
            };

    </script>

</head>

<body>
    <div id="header"></div>
    <div id="nav">
        <div id="sort">
            <h3>Filter</h3>
            <ul>
                <li><a href="" data-filter="*">all</a></li>
                <li><a href="" data-filter=".text">text</a></li>
                <li><a href="" data-filter=".photopost">photo</a></li>
                <li><a href="" data-filter=".quote">quote</a></li>
                <li><a href="" data-filter=".link">link</a></li>
                <li><a href="" data-filter=".chat">chat</a></li>
                <li><a href="" data-filter=".video">video</a></li>
                <li><a href="" data-filter=".audio">audio</a></li>
            </ul>
        </div>
        <div id="layout">
            <ul>
                <li><a href="" onclick="onecol()" data-filter="straightDown">Single Column</a></li>
                <li><a href="" onclick="grid()" data-filter="masonry">Grid</a></li>
            </ul>
        </div>
    </div>

    <div id="content" class="isotope">
        {block:Posts}
            <article>
                <!--Unique code for each post type-->
                {block:Text}
                    <div class="post text grid">
                        {block:Title}
                            <h1 class="title"><a href="{Permalink}">{Title}</a></h1>
                        {/block:Title}
                        {Body}
                    </div>
                {/block:Text}

                {block:Photo}
                    <div class="post photo grid">
                        {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
                        {block:Caption}{Caption}{/block:Caption}
                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="post photoset grid">
                        {Photoset-500}
                        {block:Caption}{Caption}{/block:Caption}
                    </div>
                {/block:Photoset}

                {block:Panorama}
                    <div class="post panorama grid">
                        {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
                        {block:Caption}{Caption}{/block:Caption}
                    </div>
                {/block:Panorama}

                {block:Quote}
                    <div class="post quote grid">
                        <blockquote>{Quote}</blockquote>
                        {block:Source}<cite> {Source} </cite>{/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="post link grid" data-category="link">
                        <h1 class="title"><a href="{URL}">{Name}</a></h1>
                        {block:Description}{Description}{/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="post chat grid" data-category="chat">
                        <ul>
                            {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Audio}
                    <div class="post audio grid" data-category="audio">
                        {block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
                        {block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}
                        <div class="player post">{AudioPlayerBlack}</div>
                        {block:Caption}{Caption}{/block:Caption}
                    </div>
                {/block:Audio}

                {block:Video}
                    <div class="post video grid" data-category="video">
                        <div class="video-player">{Video-500}</div>
                        {block:Caption}{Caption}{/block:Caption}
                    </div>
                {/block:Video}

                {block:Answer}
                    <div class="post answer grid" data-category="answer">
                        <h1 class="title">{Question}</h1>
                        <div class="user">
                            <img src="{AskerPortraitURL-96}"/>
                            <p>{Asker}</p>
                        </div>
                        {Answer}
                    </div>
                {/block:Answer}
            </article>
        {/block:Posts}
    </div>
</body>

4

0 回答 0