Горизонтальная галерея, которая умещается на экране вертикально - PullRequest
Новая
       7

Горизонтальная галерея, которая умещается на экране вертикально

0 голосов
/ 24 июля 2011

Я пытаюсь сделать довольно простую (как я и думал) вещь - горизонтальную галерею.Я хочу, чтобы нижний колонтитул и верхний колонтитул (вместе с меню) всегда оставались сверху и снизу сайта (даже когда пользователь прокручивает страницу горизонтально. Я прикрепил верхний колонтитул вверху с помощью CSS и нижний колонтитул снизу с помощью jQuery- работает нормально.

Заголовок CSS: 

#header-pane {
    position: fixed;
    top: 20px;
    left: 20px;
}

Нижний колонтитул jQuery: 

var footerHeight = 0,
footerTop = 0,
        $footer = $("#footer");
        positionFooter();

function positionFooter() {
    footerHeight = $footer.height();
    footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
    if ( ($(document.body).height()+footerHeight) < $(window).height()) {
            $footer.css({
                position: "absolute",
                top: footerTop
            })
         }
    }
    $(window)
        .scroll(positionFooter)
        .resize(positionFooter)

});

Сложная часть для меня началаськогда я работал с макетом изображений.Я хочу, чтобы они заполняли свободное пространство между верхним и нижним колонтитулами и масштабировали в зависимости от размера окна.Чтобы разместить их горизонтально, я рассчитываю ширину тела с помощью Jquery: 

    if($("div").hasClass('gallery')){
        $wdt = 0;
        $(".gallery-item").each(function() {
            $wdt += $(this).width();
        });
        $("body").css("width", $wdt);
    }

и помещаю изображения в таблицу: 

$(".gallery").wrapInner("<table cellspacing='0'><tr>");
    $(".gallery-item").wrap("<td>");

У меня вопрос - все ли я делаю правильно?сейчас?Мне кажется, что должен быть какой-то простой способ, и я все усложнил.Вторая часть вопроса о масштабировании изображений.Я пытался что-то сделать с этой библиотекой: http://imgscale.kjmeath.com/imgscale.jquery.min.js, но она работала не во всех браузерах, и у меня было так много проблем ... Как бы вы это сделали?

ТакжеЯ хотел бы спросить о новой функции CSS3 box - она ​​работает в каждом браузере?Могу ли я использовать его с помощью JavaScript?Где находится веб-сайт, где можно проверить поддержку тегов CSS3 и HTML5 для всех браузеров?

...