html [js - cloud-zoom] #js

Posted 2021-05-11

<!--
https://github.com/smurfy/cloud-zoom
-->
<style type="text/css">
  .basic-sample > div {
    width: 300px;
    height: 400px;
  }

  .gallery-sample a.cloud-zoom {
    position: relative;
    display: block;
  }
  .gallery-sample a.cloud-zoom img {
    display: block;
    width: 500px;
    text-align: center;
  }

  .recent_list {
    display: -webkit-box;
    list-style: none;
  }

  .recent_list li {
    border: 1px solid #ddd;
  }
</style>

<div class="gallery-sample">
  <h2>Gallery Sample (with mouseover support for switching images enabled)</h2>
  <a href="./images/3-Z.jpg" class="cloud-zoom" id="cloudZoom">
    <img src="./images/3-Z.jpg" title="The Title" class="img-responsive">
  </a>
  <ul class="recent_list">
    <li class="photo_container">
      <a href="./images/3-Z.jpg" rel="gallerySwitchOnMouseOver: true, popupWin:'./images/3-Z.jpg', useZoom: 'cloudZoom', smallImage: './images/3-Z.jpg'" class="cloud-zoom-gallery">
        <img itemprop="image" src="./images/3-M.jpg" class="img-responsive">
      </a>
    </li>
    <li class="photo_container">
      <a href="./images/4-Z.jpg" rel="gallerySwitchOnMouseOver: true, popupWin:'./images/4-Z.jpg', useZoom: 'cloudZoom', smallImage: './images/4-Z.jpg'" class="cloud-zoom-gallery">
        <img itemprop="image" src="./images/4-M.jpg" class="img-responsive">
      </a>
    </li>
    <li class="photo_container">
      <a href="./images/5-Z.jpg" rel="gallerySwitchOnMouseOver: true, popupWin:'./images/5-Z.jpg', useZoom: 'cloudZoom', smallImage: './images/5-Z.jpg'" class="cloud-zoom-gallery">
        <img itemprop="image" src="./images/5-M.jpg" class="img-responsive">
      </a>
    </li>
  </ul>
</div>

<script>
  //no need
$(".cloud-zoom").data("zoom").destroy();
  //no need
jQuery(document).ready(function($) {
	//cloudzoom gallery for single product page
	var thumbs = [];
	$('.cloud-zoom-gallery').each(function() {
		thumbs.push(this);
	});
	$('.cloud-zoom-gallery').on('click', function() {
		//if($.inArray(this, thumbs)===-1) thumbs.push(this);
		for(var i=0;i<thumbs.length;i++) $(thumbs[i]).closest('li').removeClass('active');
		$(this).closest('li').addClass('active');
	});
	
});
</script>