javascript - サイクル後の石積みの実行

Question

画像をクリックして次の画像を表示した後、画像の順序を変更できないようです。

ただし、ブラウザのサイズを変更すると、画像は正しく並べ替えられます。

いろいろ試しましたが行き詰まりました。次の画像をクリックした後、もう一度石積みを焼きたいだけです。

ウェブサイトへのリンク

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.cycle.all.js"></script>

<script>
  $(function(){

    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 20,
      isAnimated: !Modernizr.csstransitions,
      isFitWidth: true
    });

  });
</script>



<script>
$(document).ready(function(){
    $('#projectslide').cycle({ 
        fx:     'fade',
        speed:  0, 
        next:   '#projectslide',
        timeout: 0,
        fit: 1,
        slideResize: 1,
        reshape: 1,
    });
});

    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 20,
      isAnimated: !Modernizr.csstransitions,
      isFitWidth: true,
    });
</script>

Answer 1

Cycleプラグインのドキュメント（http://jquery.malsup.com/cycle/int2.html）で、作成者はコールバック関数を定義する方法を示しているので、次のようなことができます。

$（'＃projectslide'）。cycle（{fx：'fade'、speed：0、next：'#projectslide'、timeout：0、fit：1、slideResize：1、reshape：1、 after：function（）{ $（'＃container'）。masonry（'reload'）;} }）;