調整圖像上的圖像點擊

Question

我有這個腳本，我用它來調整圖像大小（當前image1.png），我試圖讓它調整選定的圖像的大小，以便我可以調整任何選定的大小頁面上的圖片，這裏是我有：

//<![CDATA[ 
 
$(window).load(function() { 
 
    var orginalWidth = $("#image1").width(); 
 

 
    $("#infoSlider").text(orginalWidth + ', 100%'); 
 

 
    $("#slider").slider({ 
 
    value: 0, 
 
    min: -50, 
 
    max: 50, 
 
    step: 10, 
 
    slide: function(event, ui) { 
 
     var fraction = (1 + ui.value/100), 
 
     newWidth = orginalWidth * fraction; 
 

 
     $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%'); 
 

 
     $("#image1").width(newWidth); 
 
    } 
 
    }); 
 
}); //]]>

#slider { 
 
    width: 200px; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 

 
<div id="slider"></div> 
 
<span id="infoSlider"></span> 
 

 
<div class="target"> 
 
    <img id="image1" src="http://boothtique.com/Pics/image1.png" /> 
 
    <img id="image2" src="http://boothtique.com/Pics/image2.png" /> 
 
    <img id="image3" src="http://boothtique.com/Pics/image3.png" /> 
 
</div>

Answer 1

您可以創建一個全球變量$image來保存當前圖像選擇，並在點擊收聽是這樣的：

$('.target > img').click(function(){ 
    $image = $(this); 
}); 

和替換$('#image1')與$image - 見下面的演示：

//<![CDATA[ 
 
var $image = $("#image1"); 
 
$(window).load(function() { 
 
    
 
    var orginalWidth = $image.width(); 
 
    $("#infoSlider").text(orginalWidth + ', 100%'); 
 

 
    $("#slider").slider({ 
 
    value: 0, 
 
    min: -50, 
 
    max: 50, 
 
    step: 10, 
 
    slide: function(event, ui) { 
 
     var fraction = (1 + ui.value/100), 
 
     newWidth = orginalWidth * fraction; 
 

 
     $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%'); 
 

 
     $image.width(newWidth); 
 
    } 
 
    }); 
 
}); //]]> 
 

 
$('.target > img').click(function(){ 
 
    $image = $(this); 
 
});

#slider { 
 
    width: 200px; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 

 
<div id="slider"></div> 
 
<span id="infoSlider"></span> 
 

 
<div class="target"> 
 

 
    <img id="image1" src="http://boothtique.com/Pics/image1.png" /> 
 
    <img id="image2" src="http://boothtique.com/Pics/image2.png" /> 
 
    <img id="image3" src="http://boothtique.com/Pics/image3.png" /> 
 

 
</div>

Answer 2

您可以添加一個新的屬性，以遊覽圖像上次保存點擊圖像。

$(window).load(function(){ 
 
    var orginalWidth = {}; 
 
    $('[id^="image"]').each(function(idx, ele) { 
 
    orginalWidth[ele.id] = $(ele).width(); 
 
    }); 
 

 

 
    $("#infoSlider").text(orginalWidth[$('[id^="image"][imgClicked="true"]').attr('id')] + ', 100%'); 
 

 
    $("#slider").slider({ 
 
    value: 0, 
 
    min: -50, 
 
    max: 50, 
 
    step: 10, 
 
    slide: function (event, ui) { 
 
     var fraction = (1 + ui.value/100), 
 
      newWidth = orginalWidth[$('[id^="image"][imgClicked="true"]').attr('id')] * fraction; 
 

 
     $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%'); 
 

 
     $('[id^="image"][imgClicked="true"]').width(newWidth); 
 
    } 
 
    }); 
 

 
    $('[id^="image"]').on('click', function(e) { 
 
    $('[id^="image"]').attr('imgClicked', 'false'); 
 
    $(this).attr('imgClicked', 'true'); 
 
    $("#infoSlider").text(orginalWidth[this.id] + ', 100%'); 
 
    }) 
 
});

#slider { 
 
    width : 200px; 
 
} 
 
img { 
 
    width: 30%; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 

 
<div id="slider"></div> 
 
<span id="infoSlider"></span> 
 

 
<div class="target"> 
 

 
    <img id="image1" imgClicked='true' src="http://boothtique.com/Pics/image1.png" /> 
 
    <img id="image2" imgClicked='false' src="http://boothtique.com/Pics/image2.png" /> 
 
    <img id="image3" imgClicked='false' src="http://boothtique.com/Pics/image3.png" /> 
 

 
</div>

Answer 3

$(window).load(function() { 
 
    
 
    $('body').on('click','.imagecls',function(){ 
 
     $('.imagecls').removeClass('imgselected'); 
 
     $(this).addClass('imgselected'); 
 
     
 
    }); 
 
     var orginalWidth = $("#image1").width(); 
 
    
 
     $("#infoSlider").text(orginalWidth + ', 100%'); 
 
    
 
     $("#slider").slider({ 
 
     value: 0, 
 
     min: -50, 
 
     max: 50, 
 
     step: 10, 
 
     slide: function(event, ui) { 
 
      var fraction = (1 + ui.value/100), 
 
      newWidth = orginalWidth * fraction; 
 
    
 
      $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%'); 
 
    
 
      $('.imgselected').width(newWidth); 
 
     } 
 
     }); 
 
    });

.imgselected 
 
{ 
 
    border:2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 

 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<div id="slider"></div> 
 
    <span id="infoSlider"></span> 
 
    
 
    <div class="target"> 
 
    
 
     <img id="image1" class="imagecls" src="http://boothtique.com/Pics/image1.png" /> 
 
     <img id="image2" class="imagecls" src="http://boothtique.com/Pics/image2.png" /> 
 
     <img id="image3" class="imagecls" src="http://boothtique.com/Pics/image3.png" /> 
 
    </div>