CODEWITHSUNDEEP
javascriptjqueryzooming
Eng xtian
Eng xtian

Reputation: 338

zoom image href values is not setting

I am using easyzoom to zoom image on hover. I am changing images by clicking from the list but when i click for the first time the zoom works fine. When i click another image, i console to see the current href value and it appears fine but zoom image doesnt change

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>

Upvotes: 1

Views: 844

Answers (1)

wayneOS
wayneOS

Reputation: 1425

You need to use the .swap() function. Look into the API description for more information. Here is a little snippet to demonstrate that:

//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>

Upvotes: 2

Related Questions