0

i have application in which image gets zoomin and zoomout on focus and blur. now the problem is say i have focus in first cell of row(row consists of 4 cells) and move focus to last cell of row(using arrow key) 2 cells in between first and last cell gets smaller. if i do same after few iterations 2 images between first and last cell disappears.

since in my application each image has diffrernt size i cant directly pass value.

is that possible to read each image size and pass variable containing image size to blur function instead of doing ++15px/-=15px.

code snippet/demo will be very helpfull.

here is my demo. have look please help.demo

1 Answer 1

1

You could e.g. use jQuery's data() method to store the original size of the image and use it in your focus and blur event handlers. Like this:

// cache size
$('button img').each(function(i, img) {
    $(img).data('size', {
        'width': $(img).width(),
        'height': $(img).height(),
    });
});

// on focus
$('button:has(img)').focus(function() {
    var $image = $(this).find('img'),
        size = $image.data('size');
    $image.stop().animate({
        'width': (size.width + 15) +'px',
        'height': (size.height + 15) +'px',
    }, 500);
});

// on blur
$('button:has(img)').blur(function() {
    var $image = $(this).find('img'),
        size = $image.data('size'); 
    $image.stop().animate({
        'width': size.width +'px',
        'height': size.height +'px',
    }, 1);
});

Here's your demo edited, I guess it should work like this, right? I've removed the timeouts and used stop() instead, given that that's what you wanted to achieve with the timeouts?

2
  • Your last example seems to zoom out only a few pixels on focus? Also, please split JS/CSS/HTML in jsfiddle. It's so much easier to read. Cheers!
    – polarblau
    Jan 25, 2011 at 9:04
  • Sorry, finished this before I've read your comment: jsfiddle.net/XaKqq/4 — seems to work now. Please check my code. There were a few things in your version (such as temp variables etc.) which didn't really work.
    – polarblau
    Jan 25, 2011 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.