Jquery photography slider (window resize and image increase in size)
<p>Here is the jsfiddle: <a href="http://jsfiddle.net/d5yBg/" rel="nofollow">http://jsfiddle.net/d5yBg/</a></p>

<p>My 1 problem is with commented out parts of the code, near the bottom. I'd like to increase size of .focus image. Problem is total width of the slide is not re-calculated correctly so I've image falling out of the slider.</p>

<pre><code>//$(".focus").animate({"height":300}, "fast");
//$(".focus").animate({"height":350}, "slow");
//set_slide_width();
</code></pre>

<p><strike>2 is how do I get image be centered even if user resizes the window? My move_slide() function can be used with something that listens to browser size?</strike> this problem solved.</p>

<p>Jquery:</p>

<pre><code>//
function set_slide_width() {
    var slide_width = 0;
    $("#barely_slide article img").each(function(){
        slide_width += $(this).outerWidth();
    });
    $("#barely_slide article").css("width",slide_width);
}
//
set_slide_width();


//
function move_slide() {
    var focus_margin = 0;
    $("#barely_slide article img").each(function(){
        if ($(this).attr("class") == "focus") {
            focus_margin += $(".focus").outerWidth() / 2;
            return false;
        }
        focus_margin += $(this).outerWidth();
    });
    //
    var container_center = $("#barely_slide").outerWidth() / 2;
    var offset = - (focus_margin - container_center);
    $("#barely_slide article").animate({"margin-left": offset }, "slow");
}
//
move_slide();


//
$("#barely_slide article img").on("click", function(){
        //$(".focus").animate({"height":300}, "fast");
    $("#barely_slide article img").removeAttr("class");
    $(this).addClass("focus");
    move_slide();
        //$(".focus").animate({"height":350}, "slow");
        //set_slide_width();
    return false;
});
</code></pre>
