1
안녕 모두 - 나는 jquery collapse 스크립트와 함께 텀블러에 대한 코디의 셔먼 무한 스크롤 스크립트를 사용하고 있습니다. 문제는 2 페이지가 무한 스크롤을 통해로드 된 후 jquery 축소 스크립트가 여기에서 작동하지 않습니다 ...? 두 스크립트를 함께 실행할 수 있습니까? 시간/도움을 주셔서 감사합니다, D.텀블러 무한 스크롤 JQuery와 스크립트를 작동하지
<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>
당신이'.collapse'를 호출 할 때 새로 추가 된 항목이 포함되어 있지 않습니다. 플러그인에는 새 항목을 추가하는 메소드가 없으며 무한 스크롤의 버전에는'.collapse'를 다시 호출하기위한 콜백이 없습니다. – mikedidthis
'id'와'class'는 서로 바꿔 쓸 수 없습니다. 당신은 그것을 정리해야한다 - 어떤 주어진'id' 이름은 오직 한 번만, 페이지 상에 나타나고'class'는 당신이 모든 것에 사용할 수 있어야한다. 귀하의 문제를 해결할 것이라고는 생각하지 않지만 귀하의 코드를 덜 혼란스럽게 만듭니다. – Ally
@lharby - 자바 스크립트 플러그인이 모든 작업을 수행하고 있습니다. 여러 div에 대해 들었지만 한 페이지에 고유 div가있는 경우에도 스크립트가 여전히 작동하지 않았습니다. –