Question

嘿大家 - 我正在使用Tumblr的 cody sherman无限滚动脚本以及jquery collapse脚本。问题是在第2页通过无限滚动加载后，jquery崩溃脚本从此处停止工作...？我怎么能让两个脚本一起运行？感谢您的时间/帮助，D。

<html>
<head>
<!-- TITLE -->
<title>{block:IndexPage}dgsmigliani > Image Library{/block:IndexPage}{block:SearchPage} > {SearchQuery}{/block:SearchPage}{block:PermalinkPage}dgsmigliani > Image Library > {PostID}{/block:PermalinkPage}</title>
<!-- DESCRIPTION -->
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<!-- FAVICON, RSS, EXTERNAL CSS -->
<link rel="shortcut icon" href="http://www.dgsmigliani.com/favicon.ico"/>
<link href="{RSS}" rel="alternate" type="application/rss+xml" />
<!-- SCRIPTS -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/bqtf2yr/4a0nbxeju/jquery.collapse.js" type="text/javascript"></script>
<script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
<!-- STYLE -->
<style>
iframe#tumblr_controls {
top: 0% !important;
right:0% !important; 
position: fixed !important;}
/* BODY */
body {
font-family: arial, sans-serif;
font-size: 14px;
margin: 30px 30px 30px 40px;
}
/* IMAGE */
img {
}
img span {
display: block;
}
/* TYPOGRAPHY */
h1 {
font-size: inherit;
}
a {
color: inherit; /* blue colors for links too */ 
text-decoration: inherit; /* no underline */
}
a:hover {
color: red;
}
/* HEADER */
#header {
font-size: inherit;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 40px;
}
.title {
display: inline;
float:left;
padding-right: 5px;
}
/* SEARCH */
.search {
display: inline;
}
input[type=text] {
font-family: inherit;
font-size: inherit;
display: block;
font-weight: bold;
letter-spacing: inherit;
text-transform: uppercase;
border: none;
padding: 0px;
margin: 0px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
/* POST ID */
.post_id {
display: inline;
}
/* PERMALINK */
.permalink {
font-size: inherit;
line-height: 44px;
}
.permalink p {
display: inline;
padding-right: 15px;
}
.permalink img {
display: block;
}
</style>
</head>

<body>
{block:IndexPage}
<div id="header">
<div class="title">Daniel Smigliani > Image Library ></div>
<div class="search"><form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="search"/></form></div>
</div>
<div id="posts">
{block:Posts}
{block:Photo}
<div class="photo" data-collapse>
{block:Caption}{Caption}{/block:Caption}
<a href="{Permalink}" target="_blank"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
{/block:Photo}
{/block:Posts}
{/block:IndexPage}
</div>
{block:PermalinkPage}
<div id="header">
<div class="title">Daniel Smigliani > Image Library ></div>
<div class="post_id">{PostID}</div>
</div>
<div id="posts">
{block:Posts}
{block:Photo}
<div class="permalink">
{block:Caption}{Caption}{/block:Caption}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
{block:Tags}<p>#{Tag} </p>{/block:Tags}
</div>
{/block:Photo}
{/block:PermalinkPage}
{/block:Posts}
</div>
</body>
</html>

Answer 1

$(document).ready(function(){

        $('#posts').infinitescroll({
        navSelector  : "div.footer",
        nextSelector : "div.footer a:first",
        itemSelector : "#posts div.photo"

    },function(arrayOfNewElems){
        $(".photo").collapse({});
    });

});

Tumblr无限滚动不使用jquery脚本

1 个答案: