Reputation: 183
I have this script that I use to resize an image (currently image1.png) and I'm trying to get it to resize an image that is selected onclick so that I can resize any of the selected images on the page, here is what I have:
//<![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>
Upvotes: 1
Views: 359
Reputation: 5788
$(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>
Upvotes: 1
Reputation: 42054
You may add a new attribute to tour images to save last clicked image.
$(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>
Upvotes: 1
Reputation: 42380
You can create a global variable $image
to hold the current image selected and and in a click listener like this:
$('.target > img').click(function(){
$image = $(this);
});
and replace $('#image1')
with $image
- see demo below:
//<![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>
Upvotes: 1