Увеличение img доработанная

Увеличение изображения при наведении мыши.

by blancod

HTML

<P><IMG src="http://placekitten.com/160/140" width="90" class="f-r" />text text text text text text text text text text text text text text text text text text text text text text </P>
<P><IMG src="http://placekitten.com/140/120" width="90" class="f-r" />text text text text text text text text text text text text text text text text text text text text text text </P>
<P><IMG src="http://placekitten.com/200/120" width="120" class="f-r" />text text text text text text text text text text text text text text text text text text text text text text </P>
<P><IMG src="http://placekitten.com/130/140" width="90" class="f-l" />text text text text text text text text text text text text text text text text text text text text text text </P>
<P><IMG src="http://placekitten.com/105/90" class="f-l" />text text text text text text text text text text text text text text text text text text text text text text </P>
<P><IMG src="http://placekitten.com/350/150" width="120" class="f-l" />text text text text text text text text text text text text text text text text text text text text text text </P>

CSS

.f-r {
    float:right;
    margin:0.3em 0 1em 1em;
    border-radius:3px;
    box-shadow:0 0 16px #CBD5DF;
}
.cont-f-r {
    position:relative;
    float:right;
    margin:0em 0 1em 1em;
    padding-bottom: 0.3em;
    border-radius:3px;
}
.f-l {
    float:left;
    margin:0.3em 2em 1em 0;
    border-radius:3px;
    box-shadow:0 0 16px #CBD5DF;
}
.cont-f-l {
    position:relative;
    float:left;
    margin:0em 2em 1em 0;
    padding-bottom: 0.3em;
    border-radius:3px;
}
.zoom-img {
    border: 3px solid #FFF;
    box-shadow: 0 0 25px 2px rgba(0, 82, 128, 0.24);
    margin-left: 0;
}

JavaScript

$(function() {
    $("IMG").mouseenter(function() {
        var
            img_temp_class = 'tempclass' + Math.floor(1E8*Math.random()),
            pad_temp_class = img_temp_class + 1;

        $(this).addClass(img_temp_class);

        var
            self = $("." + img_temp_class),
            clone = self.__clone = self.__clone || $(self).clone(false),
            pic_width = self.width(),
            pic_height = self.height(),
            offset = $(self).offset().left,
            window_width = $(document).width();

        //Создадим див обёртку, относительно него будем позиционировать картинку
        if($(self).hasClass("f-r")) {    //Определим соответствующий класс для обёртки
            var wrapClass = "cont-f-r";
        }
        if($(self).hasClass("f-l")) {
            var wrapClass = "cont-f-l";
        }
        $(self).wrap('<DIV style="width:' + pic_width + 'px;height:' + pic_height + 'px;" class="' + wrapClass + '" />');

        //Создадим клон картинки, именно она будет показываться при увиличении
        $(self).before(clone);

        //Добавим клону класс
        $(clone).addClass("zoom-img");

        //Измерим реальные размеры картинки.
        clone.removeAttr("width", "height");
        var pic_real_width = clone.width();
        var pic_real_height = clone.height();

        //Считаем на сколько сдвигать картинку (влево и вверх)
        var border = 3;        //Бордер на всплывающей картинке,
        var top_shift = ((pic_real_height - pic_height) / 2) + border;
        var left_shift = ((pic_real_width - pic_width) / 2) + border;

        //Проверим, не уходит ли правый край картинки за границу окна
        var free_space = window_width - offset;            //Расстояние от начала статичной картинки до границы окна
        var img_space = pic_real_width - left_shift;        //Насколько всплывающая картинка (уже сдвинутая влево) уходит вправо
        if(free_space < img_space) {                    //Если всплывающая картинка...