CODEWITHSUNDEEP
javascriptjqueryhtmlimagejquery-ui
Blnukem
Blnukem

Reputation: 183

Resize images on image click

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

Answers (3)

Curiousdev
Curiousdev

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

gaetanoM
gaetanoM

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

kukkuz
kukkuz

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

Related Questions