Динамический ряд картинок при изменении ширины окна браузера - WebRound.ru
На главную
Карта сайта
Обратная связь
Портал Хабаровска
WebRound.ru
21 августа 2018
Предыдущий баннерСлудующий баннер
Статьи > Динамический ряд картинок при изменении ширины окна браузера

Динамический ряд картинок при изменении ширины окна браузера

19.09.10  ArcherL
В данной статье я расскажу, как организовать вывод картинок в ряд по горизонтали с переменным числом картинок в ряду в зависимости от ширины окна браузера.

Пусть у нас есть страница сайта с не фиксированной (резиновой) версткой с максимальной растяжкой в 1400 пикселей.

Для того чтобы задать максимальную ширину растяжки необходимо для основного контейнера сайта (в нашем случае это тег divс именем «wrapper») задать следующие свойства стиля:

#wrapper
{
max-width: 1400px;
width: expression(get_document_width() > 1400? «1400px»: «auto»);
}

Выражение expressionнеобходимо для старых браузеров, не поддерживающих свойство max-width.

Для решения задачи исчезновения и появления картинок нашего ряда при изменении ширины окна браузера нам понадобится написать небольшой код на JavaScript. В нашем примере возьмем ряд из 7 изображений шириной в 170 пикселей каждое и напишем функцию, которая будет вызываться при изменении размеров окна браузера.

function resize()
{
var img_count = 7;
var w_all = get_document_width();
if (w_all > 1400)
w_all = 1400;
var w = 0;
for (var i = 0; i < img_count; i++)
{
var img = get_object('img_' + i);
w += 170;
if (w > w_all)
img.style.display = 'none';
else
img.style.display = 'inline';
}
}

Функция get_document_widthвозвращает текущую ширину нашей страницы, а get_objectвозвращает объекты наших изображений (мы взяли имена img_0, img_1, …, img_6).

Далее свяжем нашу функцию с событием изменения размеров окна браузера

if (browser == 'firefox')
window.onresize = resize;
else
{
window.onresize = function()
{
resize();
}
}

Для браузера Firefoxспособ задания обработчика события отличается от остальных браузеров.

Источник статьи: http://archerl.com/images-line