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

Тема в разделе "JavaScript", создана пользователем verfaa, 20 мар 2012.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Всем привет. Есть скрипт вот такой прикольной фото-галереи на jquery.
    http://buyexclusivejewellery.com/gallery.html
    В исходном коде есть комментари на русском, а также есть комментари в css.

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

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

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

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

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

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

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Никто не знает как сделать? :(
    Подскажите хоть, как сделать, чтобы фотки были не растянутые и выводились по центру экрана.
     
  3. AlexMist

    AlexMist Создатель

    Регистр.:
    17 ноя 2009
    Сообщения:
    49
    Симпатии:
    7
    Скачал , посмотрел , пиши подробнее что нужно, если будет просто фотка по середине какой тогда смысл?

    Уф загнался, посмотри
    Заменяем в JS коде функцию на эту, аккуратнее со скобками! :
    PHP:
    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_wnew_h,
                                
    new_leftnew_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) / 'px',
                            
    top:(w_h new_h) / 'px'
                        
    };
     
                    }
    В CSS у картинок обязательно НЕ должна быть зада ширина высота в процентах, да и вообще должно стоять auto!
    PHP:
    .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 */
     
        
    widthauto;
        
    heightauto;
     
        
    z-index1;
        
    display:none;
    }
    Можно оптимизировать , ну это потом.
    Кстати прикольно получилось, если изменять размер браузера то видно как картинка ведет себя, то тянется, то вписывается :yahoo:

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