未设置缩放图像 href 值

Question

我正在使用 easyzoom 在悬停时缩放图像。我正在通过从列表中单击来更改图像，但是当我第一次单击时，缩放效果很好。当我单击另一张图片时，我会看到当前的 href 值，它看起来很好，但缩放图像没有改变

function setImage(source) {
  // console.log(source);

  $('a#zoom_img').attr('href', 'http://localhost:8080/ipfs/' + source);
  $('#displayimage').attr('src', 'http://localhost:8080/ipfs/' + source);
  console.log($('#zoom_img').attr("href"));

  $('.easyzoom').easyZoom();

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
  <a id="zoom_img" href="">
    <img src="" id="displayimage" alt="" style="height: 480px; margin: auto; width: auto;" class="" />
  </a>
</div>

Answer 1

您需要使用.swap()功能。查看 API description 以获取更多信息。这是一个小片段来证明：

//init easyzome and get api-reference
var easyzoom = $('.easyzoom').easyZoom ();
var api      = easyzoom.data ('easyZoom');

//this function uses .swap () to change the images
//it gets called by the buttons onclick-attribute
function switch_image (std_src, zoom_src) {

  //std_src   = the source to your standard-image (small verison)
  //zoom_src  = the source to your zoom-image (big version) 
  api.swap (std_src, zoom_src);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
<link rel="stylesheet" href="http://i-like-robots.github.io/EasyZoom/css/easyzoom.css">

<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg')">switch to image 1</button>
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/3_standard_1.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/3_zoom_1.jpg')">switch to image 2</button>

<br><br>

<div class="easyzoom easyzoom--overlay">
    <a href="http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg">
        <img src="http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg" alt="" />
    </a>
</div>

未设置缩放图像 href 值

zoom image href values is not setting

javascript

jquery

zooming