jQueryをリロードするコンテナのサイズを変更した後のスムーズズームパンビューア

Question

スムーズズームパンプラグインを使用して目的のパン/ズーム機能を取得するように選択した画像ビューアを開発しています。

私は2つのメインパネル、ビューアコンテナ、およびブートストラップ3グリッドシステムを使用して並んでいるコントロールコンテナを持っています。

視聴者が画面を埋めるためにコントロールコンテナを折りたたむ必要があります（きれいに）。これを行うために、私はjQueryアニメーションを使用し、親コンテナに幅を設定しました。これは問題なく動作します。

スムーズズームパンビューアを親コンテナの幅に合わせるにはどうすればよいですか？これは私が現在持っているものですが、ビューアのサイズを変更するとパン/ズーム機能が失われます。

HTML：

<div class="container-fluid main-container"> 
    <div class="row"> 
     <div class="col-md-9"> 
      <div class="viewer-container"> 
       <div class="viewer-content"> 
        <img src="/images/site/your_image.jpg" border="0" id="yourImageID" /> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="controls-content"> 
       <h2>Currently viewing:</h2> 
       <p class="time">12:00</p> 
       <p class="date">Thursday 19th July 2016</p> 
       <div id="viewerCalendar"></div> 
        <a class="btn primary btn-block"><span class="icon-spinner11"></span>Get latest images</a> 
        <a class="btn primary btn-block"><span class="icon-lock"></span>Login</a> 
       </div> 
      </div> 
      <div class="close-tab"> 
       <a class="btn primary tab" id="close-controls">close</a> 
      </div> 
     </div> 
    </div> 
</div> 

JAVASCRIPT：

jQuery(function($){ 
    $('#close-controls').on('click', function() { 
     $(this).toggleClass("closed"); 
     var controlsContent = $('.controls-content'); 
     var viewerContainer = $('.viewer-container'); 
     if (controlsContent.is(':visible')) { 
      controlsContent.slideToggle('slow', function() { 
       viewerContainer.parent().css('width', '100%'); 
       viewerContainer.animate({ 
        width:'100%' 
       }, "slow", function() { 
        $('#yourImageID').smoothZoom('resize', { 
         width: '100%' 
        }); 
       }); 
      }); 
     } else { 
      viewerContainer.animate({ 
       width: '75%' 
      }, "slow", function() { 
       viewerContainer.parent().css('width','75%'); 
       viewerContainer.css('width','100%'); 
       controlsContent.slideToggle('slow'); 
       $('#yourImageID').smoothZoom('resize', { 
        width: '100%' 
       }); 
      }); 
     } 
    }); 
}); 

注：私はあなたが私を助けるために、もはや情報が必要なので、もしここに質問をするに新たなんだ下記のコメントとI下さいあなたが必要とするものを得るために最善を尽くします。

Answer 1

私の代わりにwidth: '100%'に画像をリサイズの私は視聴者のコンテナの幅を取得し、そのようにリサイズする上で、この幅を設定しなければならなかった、最終的に自分自身をそれを考え出し：

var viewerWidth = $('.viewer-content').width(); 
viewer.smoothZoom('resize', { 
    width: viewerWidth 
}); 

サイドノート：また、jQueryのアニメーションを、画面からパネルを外してBootstrapオフスクリーン機能に置き換え、すべての画面サイズで機能するように変更しました。私は、これが私が望んでいたように、最終的なソリューションに何らかの影響を与えているかどうかは分かりません。