Сброс позиции масштабирования при загрузке нового изображения в div

Question

На странице, которую я создаю, теперь есть div с изображением внутри. Есть набор ссылок под этим изображением div, при нажатии на новую ссылку изображение в div изменяется.

У меня также есть эффект масштабирования изображения div, так что, когда пользователь нажимает на символы плюс/минус или прокручивает их мышью, они увеличивают изображение.

Сценарий трансфокации Я использую это один: http://lab.gianiaz.com/jquery/gzoom/

Мой вопрос заключается в следующем: когда новая ссылка щелкнул, и изображение изменилось, увеличение остается «увеличено». Я пытаюсь сделать сброс масштабирования полностью уменьшенным, когда новое изображение загружается в div.

У кого-нибудь есть идеи?

P.S. Я использую последнюю версию JQuery.

Вот краткий обзор моей кодировки.

<div id="zoom01" class="zoom minizoompan"> 
<img class="zoomable" id="SHOWCASEIMG" src="images/image1.jpg"> 
</div> 

<div class="showcase-links">  
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image1.jpg';return false;">Image 1</a> 
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image2.jpg';return false;">Image 2</a> 
<a href="#" onclick="document.getElementById('SHOWCASEIMG').src='images/image3.jpg';return false;">Image 3</a> 
</div> 

<script type= "text/javascript"> 
     /*<![CDATA[*/ 
     $(function() { 
      $("#zoom01").gzoom({ 
        sW: 700, 
        sH: 525, 
        lW: 1400, 
        lH: 1050, 
        lightbox : false, 
      }); 
     }); 
     /*]]>*/ 
    </script> 

Answer 1

Кажется, вы решить с небольшой помощью ;-)

Это старый плагин, но мне кажется, что кто-то использует его. С вашим вопросом я обновил его, и теперь он включает метод setZoom.

:-)

Answer 2

Я не эксперт по Javascript, но я думаю, что можно попробовать сделать сделку типа «перезагрузки» и используйте функцию «OnLoad» в HTML, чтобы вызвать функцию Javascript, который изменяет масштаб обратно в оригинал.

Answer 3

Я хотел бы сделать что-то вроде этого:

HTML:

<div class="showcase-links">  
    <a class="imageSwap" href="javascript:void(0);" data-link="images/image1.jpg">Image 1</a> 
    <a class="imageSwap" href="javascript:void(0);" data-link="images/image1.jpg">Image 1</a> 
    <a class="imageSwap" href="javascript:void(0);" data-link="images/image1.jpg">Image 1</a> 
</div> 

JQuery:

$(".imageSwap".on("click", function() { 
    // reset function to set the zoom back to default 
    ... 

    var imageUrl = $(this).data('link'); 
    $("#SHOWCASEIMG".attr("src",imageUrl); 
}); 

Поскольку я не знаю сценарий изменения масштаба, вам нужно создать себе функция, которая сбрасывает масштаб.

Answer 4

я наконец смог связаться с оригинальным создателем сценария масштабирования, который я использовал, и он был достаточно любезен, чтобы обновить скрипт, чтобы для масштабирования, чтобы сбросить. Однако была проблема, которая была быстро решена между нами двумя (но в основном он, правда, сказал, поскольку я все еще новичок Javascript). Я сказал ему, что буду обновлять этот пост, если кто-нибудь придет вместе с тем же вопросом, что и я.

[http://lab.gianiaz.com/jquery/gzoom/][1]

Новый файл JS управляет функцией масштабирования только штрафом, но в самой странице, что изменения должны сделайте.

Это то, что я изначально.

<script type= "text/javascript"> 
    /*<![CDATA[*/ 
    $(function() { 
     $("#zoom01").gzoom({ 
       sW: 700, 
       sH: 525, 
       lW: 1400, 
       lH: 1050, 
       lightbox : false, 
     }); 
    }); 
    /*]]>*/ 
</script> 

Новый сценарий выглядит следующим образом:

<script type= "text/javascript"> 
     /*<![CDATA[*/ 
     $(function() { 
      $zoom = $("#zoom01").gzoom({ 
       sW: 700, 
       sH: 525, 
       lW: 2000, 
       lH: 1500, 
       lightbox : false 
     }); 
     }); 
     /*]]>*/ 
    </script> 

Та часть, которая изменилась так:

$zoom = $("#zoom01").gzoom({ 

Проблема, которая возникла после того, как сценарий был изменен, чтобы позволить для сброса Масштаб появился, когда вызывалось более одного $ zoom для размещения изображений разных размеров. Это было сделано с помощью этого яваскрипта языка:

$('#select1, #select2, #select3, #select4, #select5, #select6').click(function() { 
       $('#subContainer1').show();        
       $('#subContainer2').hide(); 
       $zoom.setZoom(0); 
      }); 

      $('#select7, #select8').click(function() { 
       $('#subContainer1').hide();         
       $('#subContainer2').show(); 
       $zoom2.setZoom(0); 
      }); 
     }); 

Для того, чтобы решить эту проблему, я изменил имя для каждого $ зума называют:

<script type= "text/javascript"> 
     /*<![CDATA[*/ 
     $(function() { 
      $zoom = $("#zoom01").gzoom({ 
       sW: 700, 
       sH: 525, 
       lW: 2000, 
       lH: 1500, 
       lightbox : false 
      }); 
      $zoom2 = $("#zoom02").gzoom({ 
       sW: 700, 
       sH: 350, 
       lW: 2000, 
       lH: 1000, 
       lightbox : false 
      }); 
      $('#select1, #select2, #select3, #select4, #select5, #select6').click(function() { 
       $('#subContainer1').show();        
       $('#subContainer2').hide(); 
       $zoom.setZoom(0); 
      }); 

      $('#select7, #select8').click(function() { 
       $('#subContainer1').hide();         
       $('#subContainer2').show(); 
       $zoom2.setZoom(0); 
      }); 
     }); 
     /*]]>*/ 
    </script> 

Наряду с сценарий перехода к окончательной версии выше, HTML также был изменен для размещения разных размеров изображений.

<div id="zoom01" class="zoom minizoompan"><img class="zoomable" id="SHOWCASEIMG" src="images/image1.jpg"></div> 

<div id="zoom02" class="zoom minizoompan"><img class="zoomable" id="SHOWCASEIMG2" src="images/image2.jpg"></div> 

<a href="#" id="select1" onclick="document.getElementById('SHOWCASEIMG').src='image1.jpg';return false;">Image 1</a> 
<a href="#" id="select7" onclick="document.getElementById('SHOWCASEIMG2').src='image2.jpg';return false;">Image 2</a> 

значения идентификатора SHOWCASEIMG и SHOWCASEIMG2 изменить изображение в соответствии с которым увеличение ДИВ требуется: zoom01 или zoom02. Значения id «select1» и «select7» используются для обозначения размера окна масштабирования.

Большое спасибо Джованни за бесценную помощь!