さて、tumblrのテーマを作っています。レイアウト オプションにアイソトープを使用しています。私が望むのは、2つの選択肢があることです.1つは幅の広い投稿（投稿が入るdiv全体を埋める）の列で、もう1つは（私が設定したと思う）3列の石積みレイアウトです。また、アイソトープを使用してフィルターを作成し、投稿の種類によって表示内容を絞り込むことができるようにしています。
*注: これはテーマの非常に基本的なスケルトン コピーです。邪魔にならないように、最初に javascript/jquery を理解できるようにするためです。これを理解したら、他のdivとセクションを追加します。これをそのままにして、すべてを回避するようにしてください。以下は、これまでのページの html のコピーです。私は Dreamweaver で作成してから、{tags} が実際の投稿にレンダリングされる tumblr にコピーして貼り付けています。このページを意図したとおりに表示するには、http://drmstx-testing.tumblr.comにアクセスしてください。そこには 2 つまたは 3 つの投稿しかありませんが、アイデアを得るには十分です。
私がイライラしているのは、グリッドまたは1つの列のリンクをクリックしてもおそらく1回は機能し、その後何も起こらないことです。または、変更されているのはレイアウトだけであり、変更に応じて投稿のサイズを大きくしたり小さくしたりするcssではありません。レイアウト。また、スムーズに見えるようにしたいです。たとえば、ある時点で、いくつかの不具合で動作するようになり、すべてのコンテンツが最小化されて何も表示されなくなり、正しいレイアウトにフラッシュ/カットされました。投稿がその場所に移動し、少し縮小または拡大するのを人々に見てもらいたい、それだけです。これで私を助けることができれば、これはおそらくそこにあるタンブラーコードタグでおそらく混乱していることを知っています. idはそれらを取り出しますが、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>