Nachladen von jQuery Smooth Zoom Pan-Viewer nach Größenanpassung des Containers

Question

Ich entwickle einen Bildbetrachter, der reaktionsschnell ist und das Smooth Zoom Pan-Plugin verwendet, um die gewünschte Schwenk-/Zoom-Funktionalität zu erhalten.

Ich habe 2 Hauptpanels, den Viewer-Container und einen Steuercontainer, die Seite an Seite mit dem Bootstrap 3-Grid-System sitzen.

Der Steuerungscontainer muss zusammenklappbar (schön) sein, damit der Betrachter den Bildschirm ausdehnen kann. Um dies zu tun, habe ich jQuery-Animation verwendet und Breiten zu den übergeordneten Containern gesetzt, was in Ordnung ist.

Was ich herausfinden möchte ist, wie kann ich den Smooth Zoom Pan-Viewer mit der übergeordneten Containerbreite übereinstimmen? Dies ist, was ich gerade habe, aber wenn die Größe des Viewers geändert wird, verliere ich die Pan/Zoom Funktionalität.

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%' 
       }); 
      }); 
     } 
    }); 
}); 

Hinweis: Ich bin neue Fragen auf, hier zu fragen, wenn Sie also mehr Informationen benötigen, um mir zu helfen, bitte unten und ich Kommentar Ich werde mein Bestes tun, um dich zu bekommen, was du brauchst.

Answer 1

Habe ich es mir am Ende heraus, statt das Bild zu width: '100%' Ändern der Größe ich die Breite des Betrachters Behälter zu bekommen hatte und diese Breite eingestellt auf dergleichen so die Größe:

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

Randbemerkung: Ich habe auch meine jQuery-Animation ausgetauscht, um die Panels vom Bildschirm auf die eingebaute Bootstrap-Offscreen-Funktionalität zu verschieben und sie so geändert, dass sie für alle Bildschirmgrößen funktioniert. Ich bin mir nicht sicher, ob dies Auswirkungen auf die endgültige Lösung hatte, so wie ich es wollte.