Jquery同位体 - 拡張可能な.itemのクリック可能なコンテンツ

Question

私はjQueryの新機能ですが、基本的な考え方はわかります。今私は現在、アイソトープ（流体/反応性レイアウト）を使って簡単なページを開発しており、その中の内容にFancyboxをうまく統合することができました。しかし問題は、アイソトープのボックス内の画像リンクをクリックしようとするたびに、クリックするたびにボックスが拡大されると仮定すると、ボックスは元のサイズに戻り、画像は上に重ねて表示されます全部。

私は実際にそれを説明するのか分からないけど、ここで私はjsfiddleで作成したウェブサイトsampleです：

1）どういうわけか、私はボックス選択ISNので、私が望むように動作するようにボックスを得ることができました問題ありません。しかし、元のサイズと位置に戻ってボックスを閉じずに、拡張ボックスのテキスト/ビデオリンクをクリックする方法は？別の新しいボックスをクリックしたときに閉じるだけです。

2）また、可能であれば、クリックするたびに選択したボックスまでスクロールできますか？

私は誰にもあまり混乱しないことを願っています。事前に多くの感謝！ :)

Answer 1

私はここにいるので、私は徹底的な対応の欠如についてお詫び申し上げます。必要な効果を得るには、展開されたボックスからクリック機能をアンバインドして、別の要素を選択する必要があります（展開時に展開/展開していますか？拡張されたボックスにバインドされました。そうすれば、ボックスは通常のテキスト/動画/写真で動作し、展開を削除することができます。

Answer 2

あなたはまだ単純な変数解決策を探しているなら、あなたは作業例はまだhere見つけられるかもしれませんので、

$(function() { 

    var $container = $('#container'); 

    $container.delay(2500).show().css({ 
     opacity: 0 
    }).animate({ 
     opacity: 1 
    }, 2500).isotope({ 
     itemSelector: '.element', 
     masonry: { 
      columnWidth: 288 
     }, 
     getSortData: { 
      selected: function ($item) { 
       return ($item.hasClass('clicked') ? -1000 : 0) + $item.index(); 
      } 
     }, 
     sortBy: 'selected' 

    }); 

    $('.maximised, .medium').hide(); 

    $('.display1, .display2').click(function() { 
     var $this = $(this); 
     bSelector = $this.hasClass('display1') ? '.maximised' : '.medium'; 

     var $previousSelected = $('.clicked'); 
     if (!$this.hasClass('clicked')) { 
      $this.addClass('clicked'); 
      $previousSelected.find('.minimised').toggle(); 
      $previousSelected.find('.maximised').toggle(); 
      $previousSelected.find('.medium').toggle(); 
     } 

     $previousSelected.removeClass('clicked'); 

     $this.find('.minimised').toggle(); 
     $this.find(bSelector).toggle(); 

     $container.isotope('updateSortData', $this).isotope('updateSortData', $previousSelected).isotope(); 
    }); 

}); 

のようにそれを行うことができます。最初のクリックで最大化されるいくつかの要素にはリンクとモーダルがあります。