Why doesn't this javascript code to animate and focus on one picture work?

Question

I have this problem with this code. I'm a novice javascript,jQuery programmer and trying to make a code to make one picture stay focused and the other ones animate to be smaller.

So here's the code:

var picHeight = '75';
var picWidth = '100';
var picAmount = 12;
var prev = 0;
var next = 0;
var picNr = '0';

function animatePictures(picNr) {

$('#pic'+picNr).animate({
    height: picHeight+'px' ,
    width: picWidth+'px'
},500);

}

function animateSidePics(prev,next) {

if ( next>=picAmount+1 ) { }
else {
    var h=picHeight;
    var w=picWidth;
    for ( var i=next; i<=picAmount; i++ )
    {
        h=h-(h*0.3);
        w=w-(w*0.3);
        $('#pic'+i).animate({
            height: h+'px' ,
            width: w+'px'
        },500);

    }
}

if ( prev==0 ) {  }
else {
    var hh=picHeight;
    var ww=picWidth;
    for ( var i=prev; i>=1; i-- )
    {
        hh=hh-(hh*0.3);
        ww=ww-(ww*0.3);
        $('#pic'+i).animate({
            height: hh+'px' ,
            width: ww+'px'
        },500);

    }
}

}

for ( var y=1; y<=picAmount; y++ ) {

$('#pic'+y).click(function() {
    animatePictures(y)
    animateSidePics(y+1,y-1)
});

}

Can anyone answer why this code doesn't work? It only makes the last picture focus. Even if you click on the first picture. There must be something with the last for loop I guess.

Answer 1

if you are trying to animate a specific picture you can use it's id, but if you want to animate it dynamically you use it's index which jquery generates for each, example :

var index = 1;
$('img:eq('+index+')').animate({'height':'100px','width':'100px'});

if you want to depend on the current width and height of the image use operations inside, ex:

.animate({'height':'-=100px','width':'+=100px'});

and don't use loops, jquery does that for you, you just need to figure out your selection

jsfiddle

updated : this is what I think you are trying to do :

$(document).ready(function(){
    $('img').animate({'height':'50px','width':'50px'},500);
    $('img').click(function(){
        $(this).animate({'height':'100px','width':'100px'},500);
        $(this).siblings('img').animate({'height':'50px','width':'50px'},500);
    });
});

jsfiddle2