jquery - タンブラーで、石積みの縦の隙間をなくして無限スクロールできるようにする方法は??

Question

初めてスタックオーバーフローを使用しました。次の問題は、過去数日間私を狂気に駆り立てました。ここから何か助けが得られることを本当に願っています。

現在、独自の Tumblr テーマを作成しています。私は Masonry を使用していますが、今日は無限スクロールで動作するようになりました。しかし、次の問題が発生します。

私の Tumblr サイトはhttp://bojagicollection.tumblr.com/です。Chromeを使用しています。

画像間に垂直方向のギャップがあり、画像のごく一部が次の画像の上に配置されます。マージンもパディングも設定しません。ただし、各コンテナにパーセンテージ幅（25％）を指定しました...空白を取り除き、正確に配置したいのです。
コンテンツに関しては、無限スクロールが開始されるポイントまでスクロールすると、コンテンツが表示されます。ご覧のとおり、各コンテナーにホバー効果を追加しますが、最初のページで移動したコンテナーにのみ適用されます。無限スクロール効果で表示されるコンテナでは効果が機能しません.どうすれば同じ効果をそれらに追加できますか?

あなたの助けは大歓迎です。

<!DOCTYPE html>
<html>
<head>
{block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description}

<title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>

<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}"/>

<link rel="stylesheet" href="http://static.tumblr.com/fwamms6/ZFamvxw9s/reset.css" />


<style>

body {
    background-color: white;
    color: black;
    font-family: "arial"";
    font-size: 1em;
}

a {
    color: blue;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

p {
    color: black;
    font-size:1em;
}

ul {
    list-style: none;
    margin:0px;
}

li {
    display: block;
    margin-left:0px;
}

img {
    max-width:100%;
}




//layout//

#content {
    width:100%;
}


.container{
    width:25%;
    float:left;
    overflow:hidden;
    padding:0;
}
.caption {
      position: absolute;
      top: 0;
      left: 0;
      background-color:black;
      opacity:0.2;
      width: 100%;
      height: 100%;
}

.captiona {
      display:none;
      position: absolute;
      top: 0;
      left: 0;
}



</style>

</head>

<body>

    <header id="masthead">
        <img src="{PortraitURL-128}"/>
        <h1><a href="/" title="{lang:Home}">{Title}aab</a></h1>

    </header>


<div id="content">


    {block:Posts}
    <div class="container">
    <div class="caption">
        <ul>


        </ul>
    </div>

    <div class="captiona">
        <ul>

            <li>{LikeButton color="black"}</li>
            <li>{ReblogButton color="black"}</li>
             <li>{block:Caption}{Caption}{/block:Caption}</li>
            <li>{block:PostNotes}{PostNotes} {/block:PostNotes}</li>
            <li>{block:ContentSource}
    <a href="{SourceURL}">
    a
    </a>
{/block:ContentSource}</li>
        </ul>
    </div>

        {block:Photo}

            {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}


        {/block:Photo}



     </div>
    {/block:Posts}
    {block:Pagination}

        <nav class="pagination">
           {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
           {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
        </nav>
        {/block:Pagination}
</div>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/fwamms6/W8tmvy2eq/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fwamms6/F9lmvy2fb/masonry.pkgd.min.js"></script>
<script src="http://static.tumblr.com/fwamms6/WZfmvy2gd/jquery.infinitescroll.min.js"></script>


<script type="text/javascript">
$(function(){
var container = $('#content');

container.imagesLoaded( function(){
    container.masonry({
        itemSelector : '.container'
    });
});

container.infinitescroll({
      navSelector  : '.pagination',    
      nextSelector : '.pagination a',
      itemSelector : '.container',
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
          $newElems.animate({ opacity: 1 });
          container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
});
</script>

<script type="text/javascript">
        $(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
    </script>


<script type="text/javascript">
$(document).ready(function() {
    $('.container').hover(
            function(){
                $(this).find('.caption').fadeOut(250);
            },
            function(){
                $(this).find('.caption').fadeIn(250);
            }
        );
  });

</script>

<script type="text/javascript">
$(document).ready(function() {
    $('.container').hover(
            function(){
                $(this).find('.captiona').fadeIn(250);
            },
            function(){
                $(this).find('.captiona').fadeOut(250);
            }
        );
  });

</script>




</body>
</html>

score 0 · Accepted Answer

ご要望のとおり、ホバーの問題を修正する方法は次のとおりです。私はこの Masonry ライブラリを知らないので、それに関して私が書いたものはすべて間違っている可能性があることに注意してください。それが正しいかどうか教えてください。

<script>まず、個々のスクリプトブロックではなく、すべてを同じタグに配置すると、作業が簡単になると思います。

前に述べたように、問題は、オンホバー機能 ( .hover) が DOM の最初の読み込み時にのみ適用されることです。あなたが投稿した.hoverコードから、$newElems.imagesLoaded. おそらく、これを行う最も簡単な方法は、次の.hoverように、独自の関数に内容を抽出し、スクリプトブロックの上部近くに配置することです。

// this function takes a jQuery object
var handleOnHover = function($elements){
    $elements.hover(
        function(){
            $(this).find('.caption').fadeOut(250);
        },
        function(){
            $(this).find('.caption').fadeIn(250);
        }
    );
}

次のように、準備完了関数と関数の両方から呼び出すことができますimagesLoaded。

$(document).ready(function(){
    var $container = $('.container');
    handleOnHover($container); // <-- Here
});

container.infinitescroll({
    navSelector  : '.pagination',    
    nextSelector : '.pagination a',
    itemSelector : '.container',
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
    }
},
function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });

    $newElems.imagesLoaded(function(){
        handleOnOver($newElems); <-- here again

        $newElems.animate({ opacity: 1 });
        container.masonry( 'appended', $newElems, true ); 
    });
});

jquery - タンブラーで、石積みの縦の隙間をなくして無限スクロールできるようにする方法は??

1 に答える 1

Related

Reference