infinite scrollで表示した画像をcolorboxで開く

今回のお題

「もっと見る」ボタンをクリック → スクロールして表示される画像を
colorboxを使ってダイアログ表示します

infinite scrollでの表示に関しては
cakePHPのpaginateでinfinite scrollを使った無限スクロールを参照してください
手前味噌で恐縮です！

ですので、phpコードは省略します

html

<link rel="stylesheet" href="colorbox.css" />

<script src="/js/imagesloaded.pkgd.min.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/jquery.infinitescroll.min.js"></script>
<script src="/js/jquery.colorbox-min.js"></script>

<!-- now loading -->
<span class="loading">
    <img src="/img/loading.gif" alt="Now Loading..." />
</span>

<div class="works">
    <?php foreach ($works as $work) : ?>
    <div class="works_item">
        <a href="..." class="popup">
            <img src="...">
        </a>
    </div>
    <?php endforeach; ?>
    <?php echo $this->Paginator->next('もっと見る', array('tag' => 'p', 'class' => 'read_more'), null, array('style' => 'display:none;')) ?>
</div>

今回、クラス名はpopupとします

javascript

$(function () {
    // 総ページ数
    var pageCount = <?php echo $this->Paginator->params()["pageCount"] ?>;
    var nowPage = 1;

    $('.works').imagesLoaded(function(){
        $('.works').masonry({
            itemSelector: '.works_item',
            isFitWidth: true,
            isAnimated: true,
            isResizable: true
        });
    });
    $('.works').infinitescroll({
            navSelector  : ".read_more",
            nextSelector : ".read_more a",
            itemSelector : ".works_item",
            loading : {
                img : '...',
                msgText : '...',
                finishedMsg : '',
            },
    },
    function( newElements ) {
        var $newElems = $(newElements);
        $newElems.css({opacity: '0'});
        $newElems.imagesLoaded(function() {
            $('.works').masonry('appended', $newElems, true); 
            $('.popup').colorbox();
            if (nowPage < pageCount) {
                $(".read_more").appendTo(".works").delay(300).fadeIn(600);  
            }
            $newElems.css({opacity: '0'}).animate({opacity: '1'}, 1500);
            $('.loading').hide();
        });
        nowPage++;
    });

    // クリックでスクロールさせるためinfinitescrollをunbind
    $('.works').infinitescroll('unbind');
    // クリック時の動作
    $('.read_more a').click(function(){
        $('.loading').show();
        $('.works').infinitescroll('retrieve');
        return false;
    });
    $('.popup').colorbox();
});

popupに対してcolorboxを実行するようにします
スクロールされた際にもcolorboxが実行されるようにするために
$newElems.imagesLoaded内でも記述しています

とりあえずこれだけ、でホッとしていましたが。。。

ハマったこと

colorboxでダイアログを開き、クローズをすると
infinite scrollでスクロールができなくなっていたんですね。。。

憶測ですが、colorboxをクローズしたタイミングで
infinite scrollを再初期化しないといけないのかなと、、、

しかし、うまくできなかったので以下の逃げ道を使いました
$('.popup').colorbox({iframe: true});

今回はcolorboxをiframeで開くことにより回避はできましたが
回避策がわかる方いましたらご教授願えたらと思います