包含tumblr主题的无限滚动无法正常工作

时间:2016-01-14 00:11:25

标签: javascript jquery html tumblr infinite

所以,我对编码并不是那么好,但我设法在朋友的帮助下制作了这个主题。你可以在belimeyblake.tumblr.com上看到它 但我无法使无限滚动工作,因为帖子没有到达页面的底部。你们能帮忙吗?如果需要,请告诉我在哪里添加内容。 这是我的主题代码。

<style> body, a, a:hover { cursor:url('{text:Cursor Image URL}'), auto }</style>

<!--
              Themes by Chloethemez // Dark orgasm

                         Classy theme.

             Comments and suggestions are welcome

                    chloethemez.tumblr.com

-->

<html lang="en">
<head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<meta name="image:Background" content=""/>
<meta name="image:Ask pop up close button" content=""/>
<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Sidebar Background" content=""/>
<meta name="color:Post Background" content=""/>
<meta name="color:More Box Background" content=""/>
<meta name="color:Title" content="#999999"/>
<meta name="color:Blog Title" content="#999999"/>
<meta name="color:Text" content="#777777"/>
<meta name="color:Link" content="#555555"/>
<meta name="color:Hover" content="#999999"/>
<meta name="color:Borders" content=""/>
<meta name="color:Glitter Colour" content=""/>


<meta name="if:Sidebar image" content=""/>
<meta name="if:Sidebar background image" content=""/>
<meta name="if:Maximised background" content=""/>

<meta name="if:Disable right click" content=""/>
<meta name="if:Link two" content=""/>
<meta name="if:Link three" content=""/>


<meta name="text:Username" content=""/>
<meta name="text:Cursor image URL" content=""/>
<meta name="text:Favicon" content=""/>
<meta name="text:Online counter codes" content=""/>
<meta name="text:View counter codes" content=""/>
<meta name="text:Network badge codes" content=""/>
<meta name="text:Update one" content=""/>
<meta name="text:Update two" content=""/>


<meta name="text:Link One URL" content=""/>
<meta name="text:Link One Title" content="link"/>
<meta name="text:Link Two URL" content=""/>
<meta name="text:Link Two Title" content="link"/>
<meta name="text:Link Three URL" content=""/>
<meta name="text:Link Three Title" content="link"/>




<title>{Title}</title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link rel="shortcut icon" href="{text:Favicon}">

<!---------------DO NOT REMOVE THESE SCRIPTS--------------->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="{image:Ask Pop Up Close Button}" class="btn_close" title="Close" alt="Close" width="40"/></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){$(document)
.ready(function(){$("[title]")
.style_my_tooltips();});})
(jQuery);
</script>

{block:IndexPage}
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function(){
var $wall = $('#entries');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '#post, #post_photo',
isAnimated : false
});
});

$wall.infinitescroll({
navSelector : '#pagination',
nextSelector : '#pagination a',
itemSelector : '#post, #post_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#scroll').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#entries').show(500);
});
</script>
{/block:IndexPage}


<!---------------END SCRIPTS--------------->

<style type="text/css">



::-webkit-scrollbar{ width:4px;  
 background-color:transparent;  }
::-webkit-scrollbar-thumb{ background-color:{color:borders}; border: 0px solid #fff; }


/************EDIT BODY HERE************/

body{
    margin:0px;
    background-color: {color:Background};
    background-attachment:fixed;
    background-repeat:100%;
    background-position:bottom-right;
    font-family: Calibri;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    text-align:left;
    line-height:11px;
    color: {color:Text};
    background-image:url({image:Background});
    {block:ifMaximisedBackground}
    -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
{/block:ifMaximisedBackground}

}


a:link, a:active, a:visited{
    text-decoration: none;
    color: {color:Link};}

a:hover {
    color:{color:Link};
    text-decoration:none;}

/************EDIT TOOLTIP HERE************/


#s-m-t-tooltip {  
    padding: 4px;  
    height:auto;
    display: none;
    font-family: consolas;
    font-size: 10px;
    max-width:150px;
    text-transform:uppercase;
    text-align: center;
    letter-spacing:1px;
    margin-top:10px;
    margin-left: 15px;
    line-height: 8px;
    z-index: 999999999999;

    border: 1px solid #f5f5f5;
    background:#ffffff;
    color: #888;}





/************EDIT POST POSITION/WIDTH HERE************/

/*To increase the amount of columns, increase the width. To decrease the amount of columns, decrease the width.*/

#entries{
    text-align:left;
    width:810px;
    margin-left:20px;
    margin-top:10px;
    height:655px;
    position:relative;
    overflow: hidden;
    {block:PermalinkPage}
    width:550px;
    {/block:PermalinkPage}}

#container {
    z-index:99;
    max-height: 600px;
    width: 780px;
    overflow: auto;
    overflow-x:hidden;
    margin-left:350px;
    margin-top:19px;
    border: 4px solid {color:borders};
}

/************EDIT OVERALL POSTS HERE************/

/*When increasing the amount of columns, you may have to decrease the #post width. Otherwise, to get larger posts, increase the width.*/

#post{
    text-align:left;
    margin-right:20px;
    margin-top:10px;
    margin-bottom:5px;
    background:{color:Post Background};
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    padding-top:0px;
    max-width: 100%;
    display:block;
    overflow:hidden;
    border:1px solid {color:borders};
    width:230px;
{block:PermalinkPage}
    width:500px;
{/block:PermalinkPage}}

/*Do not delete #post img.*/

#post img{
    max-width:100%;}





/*Edit the permalinks all posts.*/

.permalink{

    padding-top:0px;
    border-top:1px solid {color:borders};
    text-align:right;
    margin-top:-2px;
}

.permalink a{
    text-transform:uppercase;
    background:{color:Post Background};
    font-family:calibri;
    font-size:9px;
    line-height:15px;}

/*Edit the titles on any text-based post.*/

.posttitle{
    font-size:10px;
    text-align:center;
    color:{color:Link};}

.posttitle a{
    color:{color:Link};}

/************EDIT QUOTE POSTS HERE************/

.quote{
    margin-right: 5px;}

.source{
    padding-top:5px;
    display:block;
    text-align:right;}


/************EDIT ANSWER POSTS HERE************/

.ask{
    padding:4px;
    background:{color:Post Background};}
.asker{
    color:{color:Link};}
.answer{
    margin-top:10px;
    padding:2px;
}

/************EDIT AUDIO POSTS HERE************/

.audio{
    {block:IndexPage}width:180px;{/block:IndexPage}
    {block:PermalinkPage}width:180px;{/block:PermalinkPage};}
.info{
    padding:2px 0px 3px 2px;}
.i {
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:8px;}
.pl b,strong{
    text-transform:lowercase;
    font-size:9px;}
.player{
    position:absolute;
    overflow:hidden;
    margin-top:0px;
    margin-left:15px;
    background:#ffffff;
    width:24px;
    height:23px;}
    .cover {position: relative; z-index: 1}
.playbutton {width: 20px;
    height: 30px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
margin: 15px 24px 13px 16px;}
.playbox {background-color: #000;
position: absolute;
z-index: 1000;
margin-top: 100px;
margin-left: 85px;
opacity: 0.5;
    -webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

/************EDIT VIDEO POSTS HERE************/
/***********DO NOT DELETE THIS CODE************/

.video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top: 30px;
        height:0;
        overflow:hidden;}

.video-container iframe,  
.video-container object,  
.video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;}

/************EDIT CHAT POSTS HERE************/

.chat{
    line-height:12px;
    list-style:none;}
.chat ul{
    list-style:none;
    padding:0px 5px;
    line-height:15px;}
.label{
    color:{color:Link};}

/************EDIT SIDEBAR HERE************/

#sidebar{
    background:{color:Sidebar Background};
    left:100px;
    top:60px;
    width:220px;
    position:fixed;
    height:auto;
    text-align:center;}

.blogtitle{
    text-align:right;
    padding:5px;
    font-family: 'Open Sans Condensed', sans-serif;
    padding-bottom:0px;
    font-size:16px;}

.blogtitle a{
    color:{color:Blog Title};}

.description{
    text-align:right;
    padding:5px;}

.links{
    text-align:right;
    margin-left:65px;
    padding:0px 10px 5px 10px;
    margin-top:5px;

}

.links:hover{
    text-align:right;
    margin-left:35px;
    padding:0px 10px 5px 10px;
    margin-top:5px;


}

.links a{
    margin-left:15px;

}

.links a:hover{
    margin-left:;
    color:{color:Hover};
}

/************EDIT TEXT SETTINGS HERE************/

i, em{
    color:{color:Link};}
b, strong{
    font-weight:normal;
    text-transform:uppercase;
    color:{color:Link};}
ul,ol{
    margin:0px;
    margin-left:-5px;}
p{
    padding:0px;
    margin:2px;}
u{
    text-decoration:none;
    color:{color:Title};}

blockquote {
    margin:0px;
    padding:4px;
    background:{color:Post Background};}

/************DO NOT DELETE #SCROLL************/  

#scroll{
    bottom:-20px;
    position: absolute;
    left: 50%;
    width:10px;
    height:5px;
    overflow:hidden;
    margin-bottom:80px;}


#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fcfbf8;
padding: 10px;
border: 5px solid #f2e7e2;
float: left;
font-size: 10;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
img.btn_close {
float: right;
margin: -20 -20px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}



</style>

</head>

<body>
{block:IfDisableRightClick}
<script language=JavaScript>

<!--

//Disable right click script III- By Renigade (renigade@mediaone.net)

//For full source code, visit http://www.dynamicdrive.com

var message="";

///////////////////////////////////

function clickIE() {if (document.all) {(message);return false;}}

function clickNS(e) {if

(document.layers||(document.getElementById&&!document.all)) {

if (e.which==2||e.which==3) {(message);return false;}}}

if (document.layers)

{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}

else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")

// -->

</script>
{/block:IfDisableRightClick}



<div style="position:fixed; background-color: #fff; right:10px; top:25px; padding:4px; color: #000; border:1px solid #000; opacity:0.8; font-size:10px; z-index:222;"><a title="theme by Chloe"href="http://instathemes.tumblr.com/"><i class="fa fa-moon-o"></i></a></div>
<center>

<div id="container">

<div id="entries">

<!---------------EDIT SIDEBAR CONTENT HERE--------------->

<div id="sidebar">
<div class="blogtitle"><a href="/">{Title}</a></div>
{block:ifSidebarImage}<img src="{image:Sidebar Image}" width="190">{/block:ifSidebarImage}
<div class="description">{Description}</div>
<div class="links">
    <a href="/" title="refresh">home</a><br>
   <a href="#?w=500" rel="02" class="poplight" title="Mssg">Ask</a><br>
    <a href="{text:Link One URL}" title="{text:Link One Title}">{text:Link One Title}</a><br>
{block:IfLinkTwo}   <a href="{text:Link Two URL}" title="{text:Link Two Title}">{text:Link Two Title}</a><br>{/block:IfLinkTwo}
{block:IfLinkThree}    <a href="{text:Link Three URL}" title="{text:Link Three Title}">{text:Link Three Title}</a><br>{/block:IfLinkThree}
</div>
</div>


{block:Posts}

<!---------------DO NOT DELETE block:ContentSource--------------->

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

<div id="post">

<!---------------EDIT TEXT POSTS HERE--------------->

{block:Text}
<div class="text">
<div class="posttitle">{block:Title}{Title}{/block:Title}</div>
{Body}{block:IndexPage}<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{TimeAgo}</a></center>
</div>{/block:IndexPage}</div>
{/block:Text}

<!---------------EDIT LINK POSTS HERE--------------->

{block:Link}
<a href="{URL}"><div class="posttitle">{Name}</div></a>
{block:Description}{Description}{/block:Description}
{block:IndexPage}<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{{TimeAgo}</a></center>
</div>{/block:IndexPage}
{/block:Link}

<!---------------EDIT PHOTO POSTS HERE--------------->

{block:Photo}
{block:IndexPage}
<img src="{PhotoURL-250}" alt="{PhotoAlt}" width="250px"/>{/block:IndexPage}<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{TimeAgo}</a></center>
</div>{block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:PermalinkPage}</a>
{/block:Photo}

<!---------------EDIT PHOTOSET POSTS HERE--------------->

{block:Photoset}
{block:IndexPage}{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-500}" /></a>{/block:Photos}<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{TimeAgo}</a></center>
</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{/block:Photoset}

<!---------------EDIT QUOTE POSTS HERE--------------->

{block:Quote}
{Quote}{block:Source}
<div class="source">{Source}</div>{/block:Source}
{block:IndexPage}
<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{TimeAgo}</a></center>{/block:IndexPage}</div>
{/block:Quote}

<!---------------EDIT ANSWER POSTS HERE--------------->

{block:Answer}
<div class="ask"><span class="asker">{Asker}:</span> {Question}</div>
<div class="answer">{Answer}</div>
{block:IndexPage}
<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{TimeAgo}</a></center></div>{/block:IndexPage}
{/block:Answer}

<!---------------EDIT CHAT POSTS HERE--------------->

{block:Chat}
{block:Title}<div class="posttitle">{Title}</div>{/block:Title}
<div class="chat"><ul>{block:Lines}
<li class="person{UserNumber}">{block:Label}
<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul></div>{block:IndexPage}<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{TimeAgo}</a></center></div>
{/block:IndexPage}
{/block:Chat}

<!---------------EDIT AUDIO POSTS HERE--------------->

{block:Audio}

<div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>
{block:AlbumArt}
<img src="{AlbumArtURL}" class="cover" width="250px">
{/block:AlbumArt}


<div class="info"><div class="i"><span{block:TrackName} style="display: none;"{block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}</div><div class="i">by<span{block:Artist} style="display: none;"{block:Artist}>Unknown</span> {block:Artist}{Artist}{/block:Artist}</div></div>{block:IndexPage}<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{TimeAgo}</a></center></div>
{/block:IndexPage}
{/block:Audio}

<!---------------EDIT VIDEO POSTS HERE--------------->

{block:Video}
{block:IndexPage}<div class="video-container">{Video-250}</div>
<div class="permalink"><center><a href="{ReblogURL}">Reblog</a> |
<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{Permalink}">{{TimeAgo}</a></center>/div>{/block:IndexPage}
{block:PermalinkPage}{Video-500}{/block:PermalinkPage}
{/block:Video}

<!---------------EDIT PERMALINK PAGE HERE--------------->

{block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
<p>{block:Date} {Month} {DayofMonthWithSuffix}, {Year}{/block:Date}  {block:NoteCount}, {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} , (via <a href="{ReblogParentURL}">{ReblogParentName}</a>){/block:RebloggedFrom}
<div class="permapage">
<div style="margin-top:10px; margin-left:-10px;">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}
</div>
{/block:Posts}
</div>

<!---------------DO NOT DELETE THIS--------------->

{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</center>


</body>




<div id="02" class="popup_block">

<Center><iframe frameborder="0" scrolling="yes" width="100%" height="190" src="http://tumblr.com/ask_form/{text:Username}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
</center></div>

</div></div></div></div></div></div></div></div></div></div></div>






</html>

0 个答案:

没有答案