Question

当我单击图像时，它变大了，如果我单击它，它就会放大；即使我单击“下一步”或“ previos”按钮，也必须将其放大，直到我缩小为止，这一定不能使用工具栏中的“缩放”按钮，当我单击时显示它时，我需要在图像中显示图像，今天我在工作，一半找到了解决方案，但我不需要。请帮助...

找到我的代码

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.5/dist/jquery.fancybox.min.css" />
<!-- https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.5/dist/jquery.fancybox.min.css -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.5/dist/jquery.fancybox.min.js"></script>
<!-- https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.5/dist/jquery.fancybox.min.js -->

</head>
<body>
<a data-fancybox="gallery" href="https://buddhisteconomics.net/wp-content/uploads/2017/10/hdwp693968124.jpg">
  <img src="https://buddhisteconomics.net/wp-content/uploads/2017/10/hdwp693968124.jpg" width="150" height="150">
</a>
<a data-fancybox="gallery" href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg">
  <img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" width="150" height="150">
</a>
<input type="hidden" name="zoomBTN" value="0" id="zoomBTN">
</body>
<script type="text/javascript">
	/*$(document).ready(funtion(){
		
	});*/
	/*$('[data-fancybox]').fancybox({
		// Options will go here
		toolbar  : false,
		smallBtn : true,
		iframe : {
			preload : false
		}
	});*/

	$('[data-fancybox]').fancybox({
	    // Options will go here
	    toolbar  : false,
	    smallBtn : true,
	    iframe : {
	        preload : false
	    },clickContent: function(current, event) {
	    var getExistval = $("#zoomBTN").val();
	    $(".fancybox-image").click(function(){
	        if(getExistval == 0){
	            $("#zoomBTN").val('1');
	        } else if(getExistval == 1){
	            $("#zoomBTN").val('0');
	        } else {
	            $("#zoomBTN").val('1');
	        }
	    });
	    return current.type === "image" ? "zoom" : false;
	  },afterShow :function() {
	    if($("#zoomBTN").val() == 1){
	        $('.fancybox-button--zoom').click();
	    }
	  }

	});
</script>
</html>

ZoomIn ZoomOut花式框

0 个答案: