我有一个问题,我已经坚持了一段时间: 我正在使用tumblr并尝试翻转img和“文本帖子”的文本。所以目前我正在手动完成,在.text p:first-child的第8个eq之前选择要插入的第8个.text img。
因此,在照片/ photoset帖子中,我可以指向字幕并使它们出现在图像之后,但在文本帖子中,所有内容都包含在{body}中,因此需要选择特定帖子的图像eq(8)在特定帖子的文本eq(8)
之前进行匹配和调用$(".text img").eq(8).insertBefore($('.text p:first-child').eq(8));
$(".text img").eq(7).insertBefore($('.text p:first-child').eq(7));
$(".text img").eq(6).insertBefore($('.text p:first-child').eq(6));
$(".text img").eq(5).insertBefore($('.text p:first-child').eq(5));
$(".text img").eq(4).insertBefore($('.text p:first-child').eq(4));
$(".text img").eq(3).insertBefore($('.text p:first-child').eq(3));
$(".text img").eq(2).insertBefore($('.text p:first-child').eq(2));
$(".text img").eq(1).insertBefore($('.text p:first-child').eq(1));
$(".text img").eq(0).insertBefore($('.text p:first-child').eq(0));
使用文本帖子发布图片的原因是为了解决tumblr photoset帖子上的10 imgs限制。
有没有一种方法可以对其进行编码,以便每次发布新的文本帖子时都会选择并相应插入? insertbefore是这样的,在我的索引页面中,将显示第一个子图像和第一个子文本。
我知道也许选择eq不是要走的路......
(我已将html和css代码的相关部分放在这里,如果我还缺什么请告诉我!!) 我的Html代码:
<div class="grid">
<div class ="autopagerize_page_element">
<div id="list">
{block:Posts inlineMediaWidth="1280"}
{block:Text}
{block:IndexPage}
<div class="grid-sizer grid-item">
<div class="text">
<a href="{Permalink}">
{body}
</a>
</div>
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="postperm">
<div class="perm-right text1">
{body}
</div>
<div class="perm-left text2">
<div class="captionPerm">{body}</div>
</div>
</div>
{/block:PermalinkPage}
{/block:Text}
{block:Photo}
{block:IndexPage}
<div class="grid-sizer grid-item photo">
<a class="photos" href="{Permalink}">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
</a>
{block:Caption}
<div class="spacePhotos"></div>
<div class="caption">
{Caption}</div>
{/block:Caption}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="postperm">
<div class="perm-right">
<img alt="{PhotoAlt}" src="{PhotoURL-HighRes}">
</div>
<div class="perm-left">
{block:Caption}
<div class="captionPerm">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:PermalinkPage}
{/block:Photo}
<!------------- PANORAMA* NOT CONFIGURED ------------------->
{block:Panorama}
<div class="post panorama">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Panorama}
{block:Photoset}
{block:IndexPage}
<div class="grid-sizer grid-item photoset">
<a class="photos" href="{Permalink}">
{block:Photos}
<img alt="" src="{PhotoURL-HighRes}">
{/block:Photos}
</a>
{block:Caption}
<div class="spacePhotos"></div>
<div class="caption">
{Caption}
</div>
{/block:Caption}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="postperm">
<div class="perm-right">
{block:Photos}
<img alt="" src="{PhotoURL-HighRes}">
{/block:Photos}
</div>
<div class="perm-left">
{block:Caption}
<div class="captionPerm">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:PermalinkPage}
{/block:Photoset}
<!----------------- THE REST! *NOT CONFIGURED ------------------>
{block:Quote}
<div class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}{block:Link}
<div class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
{/block:Link}{block:Chat}
<div class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}
{block:Video}
<div class="post video">
{Video-500}{block:Caption}
<div class="spacePhotos"></div>
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}{block:Audio}
<div class="post audio">
{AudioEmbed}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
{/block:Posts}
</div>
</div>
</div>
我的CSS代码:
.index-page .grid-item .caption p,
.index-page .grid-item .text p {
margin:auto;
}
.index-page .grid-item .caption p {
display: none;
padding-top:15px;
line-height:125%;
color:#fff;
text-align:center;
}
.index-page .grid-item .caption p:first-child{
display:block;
}
.index-page .photos img{
display: none;
}
.index-page .photos img:first-child{
display: block;
}
.index-page .text a {
text-decoration:none;
}
.index-page .text p {
display:none;
padding-top:15px;
line-height:125%;
color:#fff;
text-align:center;
max-width:90%;
}
.index-page .text p:first-of-type{
display: block;
}
.read_more {
display: none;
}