イメージのサイズを変更するには

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

あなたはグローバル選択し、現在のイメージを保持し、かつ、このようなクリックリスナー INに$image変数を作成することができます。

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

と$imageで$('#image1')を置き換える - デモ下記参照：

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