CODEWITHSUNDEEP
jqueryhtmlcssimage
Mahmoud
Mahmoud

Reputation: 197

resize an image and keep it with new size

I've an image with certain width and height values <img id="image" width="500" height="100"/>, and i want to resize this image to a new values and keep them with this changes infinite time.

i used .effect() function as this ..

$( document ).click(function() {
$( "#image" ).effect( "size", {
to: { width: 200, height: 60 }
}, 1000 );
});

but unfortunately seems that it's a limited time function, and the image return back to its original size.

A solution or helpful tutorial is great, thanks.

UPDATE:

A Fiddle about what happens with me: http://fiddle.jshell.net/SdHGK/

Upvotes: 0

Views: 102

Answers (4)

Alex
Alex

Reputation: 27

You can try using two class names for each size then on on click changing the class name.

function changeSize () {
var myId = document.getElementById("Your Id Goes Here");
myId.className="mySecondClassname";
}

You could also do it with Css3. 

#yourImage {
    width:50px;
    height:200px;
    border:solid red 1px;
    transition:what you want to transition Duration; //probably width and height
}

    #yourImage:target {
    width:200px;
    height:400px;
}

You will need to add a "#" symbol to your image container that shows up in the url when it is clicked.

Upvotes: 1

Milan and Friends
Milan and Friends

Reputation: 5610

$(document).click(function() {
  $( "#toggle" ).animate({ width: '200px', height: '60px'}, 1000 );
});

Upvotes: 2

zzlalani
zzlalani

Reputation: 24354

Have a look at this

$( document ).click(function() {
  $( "#toggle" ).effect( "size", {
    to: { width: 200, height: 60 }
  },'slow', function () {
      $("#toggle").css({'width':'200px', 'height': '60px'});
  });
});

http://fiddle.jshell.net/SdHGK/2/

PS: The idea is taken from Chanckjh answer and from http://jqueryui.com/effect/

Upvotes: 0

Chanckjh
Chanckjh

Reputation: 2597

something like this? http://jsfiddle.net/8NdHU/

$('img').on('click', function(){
    $(this).css('width', '200%'); 
});

UPDATE

http://jsfiddle.net/8NdHU/1/

$('img').on('click', function(){
    $(this).animate({
        width: '100%'
    }, 5000); 
});

Upvotes: 1

Related Questions