Немного переделать скрипт фото-галереи на jquery

[verfaa]

Всем привет. Есть скрипт вот такой прикольной фото-галереи на jquery.
Для просмотра ссылки Войди или Зарегистрируйся
В исходном коде есть комментари на русском, а также есть комментари в css.

Загрузив в скрипт несколько разных фото - больших и маленьких, вертикальных и горизонтальных, я столкнулся с неудовлетворительным качеством отображения фотографий, а именно маленькие фото растягиваются так, что начинают выглядеть, как размытое "месиво" из красок. Вертикальные фото, которые не помещаются полностью в экран юзера, скрипт отображает только наполовину или их часть, а остальную часть можно увидеть при клике на иконку лупы в правой верхней части маленькой копии фото.

В принципе я вижу 2 варианта, как сделать так, чтобы эта галерея отображала разные фото, большие и маленькие, горизонтальные и вертикальные так, чтобы их можно было удобно просматривать.

Первый вариант состоит в том чтобы сделать так, чтобы в галерее отображались фотографии не растянутые, а со своими реальными размерами по высоте и ширине и они были спозиционированы по центру экрана юзера. Если фото не помещается во весь экран пользователя по вертикалиили или горизонтали, пропорционально уменьшать фото, как это сделано например, когда просматриваешь фото в полноэкранном режиме в ACDsee.

Второй вариант состоит в том чтобы прописать условия:
1. Если фото маленькое и по размеру меньше, скажем трети размеров экрана юзера по ширине и высоте, не растягивать его а выводить по центру экрана.
2. Если фото вертикальное и по высоте не помещается полностью в экран юзера, уменьшать его пропорционально по ширине и высоте так чтобы по высота фото равнялась высоте экрана юзера.
3. Если фото прямоугольное и больше трети размеров экрана юзера по ширине и высоте - оставить те действия, которые сейчас в скрипте, т.е. растягивать фото на весь экран.
4. Если прямоугольное фото не помещается полностью на экране юзера, пропорционально уменьшать его, так чтобы оно умещалось полность на экране юзера.

Я даже не знаю, какой из двух вариантов лучше подойдет для меня, поэтому если возможно набросайте 2 варианта решения задачи.

Пост получился длинный, но я думаю, люди хорошо знающие jquery и css решат его правкой нескольких строк кода. Всем огромное спасибо за ответы

 

[verfaa]

Никто не знает как сделать?
Подскажите хоть, как сделать, чтобы фотки были не растянутые и выводились по центру экрана.

 

[AlexMist]

Скачал , посмотрел , пиши подробнее что нужно, если будет просто фотка по середине какой тогда смысл?

Уф загнался, посмотри
Заменяем в JS коде функцию на эту, аккуратнее со скобками! :

function getImageDim($img) {
                    var w_w = $(window).width(),
                            w_h = $(window).height(),
                            r_w = w_h / w_w,
                            i_w = $img.width(),
                            i_h = $img.height(),
                            r_i = i_h / i_w,
 
 
                            new_w, new_h,
                            new_left, new_top;
 
                    //проверям пропорциональность картинки экрану
                    if ((r_i > (r_w * 0.66)) && (r_i < (r_w * 2))) {
                        //проверям Mpx если картинка очень маленькая то не меняем размер
                        if (((w_w * w_h) / (i_w * i_h)) > 8) {
                            new_h = i_h;
                            new_w = i_w;
 
                        }
                        //иначе РАСТЯГИВАЕМ под окно
                        else {
                            if (r_w > r_i) {
                                new_h = w_h;
                                new_w = w_h / r_i;
                            }
                            else {
                                new_h = w_w * r_i;
                                new_w = w_w;
                            }
                        }
                    }
                    //картинка не пропорционально экрану (слишком прямоуголная =) )
                    else {
                        //проверям Mpx если картинка очень маленькая то не меняем размер
                        if (((w_w * w_h) / (i_w * i_h)) > 8) {
                            new_h = i_h;
                            new_w = i_w;
                        }
                        //иначе ПОДГОНЯЕМ в окно
                        else {
                            if (r_w < r_i) {
                                new_h = w_h;
                                new_w = w_h / r_i;
                            }
                            else {
                                new_h = w_w * r_i;
                                new_w = w_w;
                            }
                        }
 
                    }
 
 
                    return {
                        width:new_w + 'px',
                        height:new_h + 'px',
                        left:(w_w - new_w) / 2 + 'px',
                        top:(w_h - new_h) / 2 + 'px'
                    };
 
                }

В CSS у картинок обязательно НЕ должна быть зада ширина высота в процентах, да и вообще должно стоять auto!

.tf_bg img{
    position:absolute;
    top:0px;
    left:0px;
 
    /* УДАЛИТЬ ЭТИ СТРОКИ  или поставить auto */
    /*width:100%;  windowwidth plus negative value of left */
    /*height:1650px; /* windowheight plus negative value of top */
 
    width: auto;
    height: auto;
 
    z-index: 1;
    display:none;
}

Можно оптимизировать , ну это потом.
Кстати прикольно получилось, если изменять размер браузера то видно как картинка ведет себя, то тянется, то вписывается

Если по нормальному, то ее всю переписывать нужно, т.к. везде учесть размер , структуру немного другую делать. Все, спокойной ночи.