Галерея на css с увеличением: Галерея с увеличением изображений на CSS3

Галерея с увеличением изображений на CSS3

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

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

И так, нам необходимо, чтобы по нажатию на изображение оно увеличивалось, кроме этого добавим кнопку закрытия изображения. И так, давайте приступим.

Шаг 1. HTML

И так, рассмотрим структуру, у нас есть общий контейнер, который содержит всю структуру, в середину этого контейнера помещены дочерние элементы, как изображения и классы закрытия развернутых изображений. Кроме этого мы используем класс :target который обеспечит работоспособность окон.

С разметкой мы разобрались, если вы хоть не много в этом разбираетесь, то сложностей не должно вызвать.

Шаг 2. CSS

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

Мы установили <span> элементы display: none , для того, чтобы сделать кнопку закрытия, которая появляется, когда пользователь нажимает на изображение.

Мы не используем различных плагинов, что весьма упростит скорость загрузки, и обеспечит большую практичность.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также:

Галерея с увеличением с использованием только CSS3

В этом уроке мы создадим галерею изображений с увеличением изображения при нажатии на него. Еще мы добавим кнопку для закрывания увеличенного изображения. И, что самое главное, мы сделаем это на чистом CSS! Лучше всего, чтобы страница с галереей не прокручивалась, так как псевдокласс :target прокрутит страницу до активного элемента, что будет раздражать, если страница может прокручиваться.

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

Демонстрация работы – Скачать исходный код

Начнем 

Для начала давайте рассмотрим код HTML. Он состоит из родительского элемента, который содержит несколько блоков класса holder, каждый из которых работает как одно изображение. У каждого блока есть дочерние элементы, такие как закрывающая кнопка, изображение и ссылка, при нажатии на которую изображение увеличивается. Каждая такая ссылка связана с родительским блоком, так что можно использовать псевдокласс :target в коде CSS:

<div>
    <div>
        <div>
            <span><a href="#">X</a></span>
            <img src="1.jpg" alt="earth!">
            <a href="#image-1"></a>
        </div>
    </div>
    <div>
        <div>
            <span><a href="#">X</a></span>
            <img src="2.jpg" alt="earth!">
            <a href="#image-2"></a>
        </div>
    </div>
    <div>
        <div>
            <span><a href="#">X</a></span>
            <img src="3.jpg" alt="earth!">
            <a href="#image-3"></a>
        </div>
    </div>
</div>

CSS 

Код CSS несложный. Для начала зададим стили для родительских элементов класса holder:

#images-box {
    /* The total width of the image-box, mainly for centering */
    width: 850px;
    margin: 0px auto;
    position: relative;
    top: 70px;
}

.image-lightbox img {
    /* Inherit the width and height from the parent element */
    width: inherit;
    height: inherit;
    z-index: 3000;
}

.holder {
    /* The width and height, you can change these */
    width: 250px;
    height: 166px;
    /* Float left, so everything aligns right */
    float: left;
    margin: 0 20px 0 0;
}
.image-lightbox {
    /* Inherit width and height from the .holder */
    width: inherit;
    height: inherit;
    padding: 10px;
    /* Box shadow */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    background: #fff;
    border-radius: 5px;
    /* Position absolutely so we can zoom it out later */
    position: absolute;
    top: 0;
    font-family: Arial, sans-serif;
    /* Transitions to provide some eye candy */
    -webkit-transition: all ease-in 0.5s;
    -moz-transition: all ease-in 0.5s;
    -ms-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
}

После этого нам нужно задать стили внутренним элементам. Мы задали элементам <span> свойство display: none, чтобы закрывающая кнопка появлялась, когда пользователь нажимает на изображение. Ссылка была изменена, чтобы заполнить собой весь родительский элемент, и на него можно было нажимать.

.image-lightbox span {
    display: none;
}

.image-lightbox .expand {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 4000;
    background: rgba(0,0,0,0); /* Fixes an IE bug */
    left: 0;
}

.image-lightbox .close {
    position: absolute;
    width: 20px; height: 20px;
    right: 20px; top: 20px;
}

.image-lightbox .close a {
    height: auto; width: auto;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    background: #22272c;
    box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.=image]:target .expand {
    display: none;
}
div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }

И это все! Вот полный код CSS с комментариями, и можете посмотреть демонстрацию работы.

#images-box {
    /* The total width of the image-box, mainly for centering */
    width: 850px;
    margin: 0px auto;
    position: relative;
    top: 70px;
}

.image-lightbox img {
    /* Inherit the width and height from the parent element */
    width: inherit;
    height: inherit;
}

.holder {
    /* The width and height, you can change these */
    width: 250px;
    height: 166px;
    /* Float left, so everything aligns right */
    float: left;
    margin: 0 20px 0 0;
}

.image-lightbox {
    /* Inherit width and height from the .holder */
    width: inherit;
    height: inherit;
    padding: 10px;
    /* Box shadow */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    background: #fff;
    border-radius: 5px;
    /* Position absolutely so we can zoom it out later */
    position: absolute;
    top: 0;
    font-family: Arial, sans-serif;
    /* Transitions to provide some eye candy */
    -webkit-transition: all ease-in 0.=image]:target .expand {
    display: none;
}

div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

Скрипт галереи с увеличением по клику и с “пролистыванием” (слайдером)

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

Шаг первый

1. Копируем код, размещенный здесь.

2. Вставляем его через инструмент «Скрипты» в основном меню редактора,

задав положение «Внутри тега HEAD»:

3. Сохраняем изменения:

Шаг второй

1. Копируем код, размещенный здесь.

2. Вставляем его с помощью инструмента «Произвольный HTML».

3. Редактируем ссылки на увеличенные изображения и миниатюры и названия изображений (“Заголовок”):

Изображения вы можете разместить у себя на хостинге, в облачном хранилище или загрузить через редактор в хранилище медиа-файлов LPgenerator через инструмент “Изображение”.

Настоятельно рекомендуем загружать изображения нужного размера!

4. Сохраняем изменения.

Примечания

1. Если изображение в галерее будет единственным, то атрибут rel=”gallery1” следует удалить.

2. Заголовок будет отображаться под всплывающим окном. Если он не не требуется, удалите из кода атрибут title=”Заголовок”.

3. Если требуется разместить 2 и более галерей на одной странице, то для них используйте “gallery2”, “gallery3” и т. д.:

в исходном коде замените значение атрибута rel=»gallery1″на rel=»gallery2″ и т. д., в зависимости от числа создаваемых галерей.

Шаг третий

1. Копируем код, размещенный здесь.

2. Выбираем инструмент «Скрипты» в основном меню редактора

и нажимаем на кнопку «Добавить скрипт».

3. Вставляем код, задав положение «Перед тегом </BODY>».

4. Сохраняем изменения:

Вот и все! Красивая галерея с «пролистыванием» («слайдером») и увеличением из миниатюры по клику готова.

Обратите внимание: если изображения не выстраиваются в один ряд, просто увеличьте размер HTML заглушки. Он должен соответствовать ширине одного ряда изображений и высоте этих изображений. 

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

Приятной работы!

Верстка адаптивной CSS галереи

<!DOCTYPE html>

<html>

<head>

<meta charset=»utf-8″>

<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>

<title>Галерея на CSS</title>

<link rel=»stylesheet» href=»css/style.css»>

</head>

<body>

<div>

<section>

<ul>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»картинка»>

<h4>Описание</h4>

<p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>

</a>

</li>

</ul>

</section>

</div>

</body>

</html>

Создание галереи изображений на jQuery | XoZblog

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

Для создания этой галереи будут использованы две бесплатные библиотеки JQuery: Quicksand и PrettyPhoto. Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания. Так же как и эта!

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

HTML разметка

Сначала разберем панельку со списком категорий, это маркированный список ul. Причем у каждого элемента списка должно быть уникальное имя класса.

Как и панель со списком категория сама галерея также является маркированным списком ul с классом portfolio-area. В котором каждый элемент это картинка.

Как говорилось выше, элементы списка это изображения в галерее. Каждый элемент списка включает составные. Это непосредственно само изображение, точнее его миниатюра, а также описание. Миниатюра представляет собой ссылку на основное изображение. Атрибут rel необходим для вызова javascript и открытия основного изображения.

Не забывайте также о 2 важных вещах, у элемента списка li атрибут data-id должен быть уникальным. Атрибут data-type содержит класс категории, список которых я описывал выше. О разметке вроде бы все.

Стили CSS

Особо заострять внимание на стилях не буду, так как используем мы уже готовую библиотеку PrettyPhoto, которая отвечает за увеличение изображения, и css кода достаточно много. Однако стоит заметить предусмотрено 5 вариантов оформления увеличенного изображения, хотя в идеале всего 3 , так как в двух вариантах лишь убирается закругление.

Поэтому, покажу лишь CSS стили для миниатюр ну и списка категорий.

В принципе, со стилями должно быть все понятно. Чтобы категории выстроились в ряд свойству display придается значение inline. Для того чтобы придать эффект обводки изображения, задается фоновый цвет (белый) и отступ в 10 пикселей. Размеры элементов списка задаются в .portfolio-area li.

jQuery

Ну и напоследок самое важное, то ради чего весь урок. Это jQuery код. Начнем с фильтрации картинок, по категориям.

C помощью метода clone() и селектора, выбираем все дочерние элементы у .portfolio-area и записываем их в переменную $data. Далее отслеживаем клик по одной из категорий, элемент li у списка с классом .portfolio-categ. Делаем все категории не активными, посредством удаления removeClass(«active»), если этого не делать то со временем все категории будут активными и фильтрация остановиться.

Так как мы кликаем по элементу списка, то в селекторе this содержится элемент списка то есть li, у него мы берем значение атрибута class и с помощью метода split разбиваем название класса на несколько частей, границей является пробел (т.е. если класс был «all active» то после разбиения мы получаем массив из «all» и «active»). А уже далее методом slice выбираем первый элемент массива (в нашем случае «all»), и записываем получившийся результат в переменную filterClass. Если пробела не было то название класса не измениться.=’prettyPhoto’]»).prettyPhoto({
            animationSpeed: ‘fast’,
            slideshow: 5000,
            theme: ‘facebook’,
            show_title: false,
            overlay_gallery: false
        });

Отслеживается клик по ссылке, у которой атрибут rel начинается с prettyPhoto. После чего в дело вступает библиотека prettyPhoto, и изображение чудесным образом увеличивается. Кстати, мы также передаем несколько параметров. Такие как скорость анимации — быстрая, задержка у слайд шоу — 5 секунд, тема оформления Facebook (всего 5 тем они находятся в папке images/prettyPhoto), а также запрещаем показ названия картинки и увеличение картинки при наведении мыши. Полную документацию по prettyPhoto можно найти здесь

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или Facebook. Если урок Вам понравился и пригодился сделайте tweet или like — поделитесь с друзьями 🙂

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Галерея

Адаптивная галерея least.js

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

Фотогалерея на jQuery

Минималистичная фотогалерея на jQuery. Её можно использовать для показа своих работ или в качестве фотоальбома. А с помощью меню, можно сортировать фото/работы по категориям. Галерея кроссбраузерная, что позволит без труда адаптировать её под ваш сайт.

Эффект фокусировки на изображении

Эффект фокусировки на изображении. При наведении на фотографию, остальные снимки затемняются. Реализован данный эффект ввиде не совсем обычного слайдера.

CSS3 фотогалерея

В этом уроке сделаем фотогалерею используя только CSS3. Вот с такими свойствами будем работать: user-select, box-sizing, transition, box-shadow и transform.

Диагональное вращение изображений

Превратим неупорядоченный список во вращающееся диагональное портфолио из изображений с помощью CSS3 и jQuery.

gpGallery — галерея

Очень простая галерея использующая jQuery. При наведении на миниатюру изображение увеличивается до исходного размера.

Круглая галерея

Простая галерея с раположением изображений по кругу реализованная с помощью jQuery плагина radmenu.

Галерея рубашек

Интересный и простой эффект, который можно использовать на сайте интернет магазина. Полноразмерные изображения помещаются в контейнер DIV меньшего размера. Изображение центрируется, но не показывается полностью, так как параметр overflow:hidden — в состоянии включен. При наведении мыши на картинку, overflow:hidden переходит в состояние выключен и рубашка показывается полностью.

3D галерея

Галерея изображений с эффектом 3D. При движении курсора миниатюры фотографий (которые имеют тень), также двигаются. Позволил от себя добавить иконку «Лупа» — увеличения фотографии, за место текста.

Прикольная фотогалерея

Прозрачная, фиксированная, оформленная с использованием CSS фотогалерея и вызываемая нажатием на кнопку Включения/Выключения.

Анимированная фотогалерея на jQuery

Для оживления галереи используется функция animate() и при наведении на картинку происходит плавное изменение цвета от черно-белого до цветного.

Предпросмотр миниатюр слайдами

В этом уроке я покажу, как можно сделать предпросмотр миниатюр слайдами на jQuery.

• Назад
• 1
• 2
• Вперёд

CSS Галерея изображений — Русские Блоги

Картинная галерея

Ниже приведено использование CSS для создания галереи изображений:

<div>
  <div>
    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
             <img src = "http://static.runoob.com/images/demo/demo1.jpg" alt = "текстовое описание изображения" width = "300" height = "200">
    </a>
         <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>
 
<div>
  <div>
    <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
             <img src = "http://static.runoob.com/images/demo/demo2.jpg" alt = "текстовое описание изображения" width = "300" height = "200">
    </a>
         <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>
 
<div>
  <div>
    <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
             <img src = "http://static.runoob.com/images/demo/demo3.jpg" alt = "текстовое описание изображения" width = "300" height = "200">
    </a>
         <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>
 
<div>
  <div>
    <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
             <img src = "http://static.runoob.com/images/demo/demo4.jpg" alt = "текстовое описание изображения" width = "300" height = "200">
    </a>
         <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>

Больше примеров

Адаптивная картинная галерея

Используйте медиазапросы CSS3 для создания адаптивных картинных галерей:

<div>
  <div>
    <a target="_blank" href="img_fjords.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway">
    </a>
    <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>
 
 
<div>
  <div>
    <a target="_blank" href="img_forest.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest">
    </a>
         <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>
 
<div>
  <div>
    <a target="_blank" href="img_lights.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights">
    </a>
         <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>
 
<div>
  <div>
    <a target="_blank" href="img_mountains.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains">
    </a>
         <div class = "desc"> Добавьте текстовое описание изображения сюда </ div>
  </div>
</div>
 
<div></div>
 
<div>
  
     <h5> Сбросьте размер браузера, чтобы увидеть эффект </ h5>
</div>

zoom — CSS: каскадные таблицы стилей

Нестандартный

Эта функция нестандартна и не входит в стандартную дорожку. Не используйте его на рабочих сайтах, выходящих в Интернет: он подойдет не для всех пользователей. Между реализациями также может быть большая несовместимость, и поведение может измениться в будущем.

Нестандартное свойство zoom CSS может использоваться для управления уровнем увеличения элемента. transform: scale () следует использовать вместо этого свойства, если это возможно. Однако, в отличие от преобразований CSS, zoom влияет на размер макета элемента.

 
масштабирование: нормальное;
масштабирование: сбросить;


масштабирование: 50%;
масштабирование: 200%;


масштабирование: 1,1;
масштабирование: 0,7;


масштабирование: наследовать;
масштабирование: начальное;
масштабирование: не установлено;
  

Значения

нормальный

Отобразите этот элемент в его нормальном размере.

сброс

Не увеличивайте (уменьшайте) этот элемент, если пользователь применяет масштабирование без масштабирования (например,г. нажав Ctrl — - или Ctrl + + сочетаний клавиш) в документ. Поддерживается только WebKit (и, возможно, Blink).

<процент>

Коэффициент масштабирования. 100% эквивалентно нормальному . Значения больше 100% увеличивают. Значения меньше 100% уменьшают.

<номер>

Коэффициент масштабирования. Эквивалентно соответствующему проценту ( 1.0 = 100% = нормальный ). Значения больше 1.0 увеличивают. Значения меньше 1.0 уменьшают.

Первый пример

HTML

  
 Маленький 
 Нормальный 
 Большой 
  

CSS

  p.small {
  масштабирование: 75%;
}
p.normal {
  масштабирование: нормальное;
}
p.big {
  масштабирование: 2,5;
}
п {
  дисплей: встроенный блок;
}
p: hover {
  масштабирование: сбросить;
}
  

Результат

Второй пример

HTML

CSS

  дел.круг {
  ширина: 25 пикселей;
  высота: 25 пикселей;
  радиус границы: 100%;
  выравнивание текста: центр;
  вертикальное выравнивание: по центру;
  дисплей: встроенный блок;
  масштабирование: 1,5;
}
div # a {
  цвет фона: золото;
  масштабирование: нормальное;
}
div # b {
  цвет фона: зеленый;
  масштабирование: 200%;
}
div # c {
  цвет фона: синий;
  масштабирование: 2,9;
}
  

Результат

таблицы BCD загружаются только в браузере

Создание видеогалереи аналогично Zoom 🎥

Обновление

Я опубликовал забавную часть 2 , где я создаю тот же пользовательский интерфейс, используя экспериментальный CSS Layout API из CSS Houdini 🎩.

Проверьте это!

TLDR

Готовое решение здесь. Измените количество видеороликов и измените размер экрана, чтобы увидеть его в действии.

Введение

Привет, народ

Мне пришлось создать вид галереи видео, аналогичный тому, который есть у ZOOM для Remeet.

Я потратил довольно много времени, пытаясь понять, как создать его с помощью чистого CSS, и я… НЕ УДАЛСЯ 😕.

Совместное использование моего текущего решения с

• немного JavaScript
• Пользовательские свойства CSS
• дисплей: гибкий

Если у кого-то есть идея, как добиться аналогичного результата без использования JavaScript, поделитесь, пожалуйста, 🙏

Проблема

Имея videoCount видео с фиксированным соотношением сторон и фиксированным размером контейнера ( containerWidth , containerHeight ), поместите все видео внутри контейнера, чтобы занять как можно большую площадь.Видео должны быть одинакового размера и не должны выходить за пределы контейнера.

Решение

Расчет размера видео

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

  функция calculateLayout (
  containerWidth: число,
  containerHeight: число,
  videoCount: число,
  аспектRatio: число
): {ширина: число; высота: число; cols: number} {
  
}  

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

 
let bestArea;
for (let cols = 1; cols <= videoCount; cols ++) {
   const currentArea =
   if (bestArea  

Существует также модуль npm, который делает именно это! github

Но есть ли способ лучше, чем перебор? Стоит ли оно того, если мы предположим, что максимальное значение videoCount равно 50? 🤔

Разметка, стили и настраиваемые свойства CSS

Структура HTML, которую я использовал:

  <тело>
    

      

        
      
      

        
      
    
 

Я применил рассчитанные ширины и высоты на .видео-контейнер .

  .видео-контейнер {
  width: var (- ширина);
  height: var (- высота);
}  

Я использовал настраиваемые свойства CSS для передачи значений, вычисленных в JavaScript.

  const gallery = document.getElementById ("галерея")
gallery.style.setProperty ("- ширина", ширина + "пикс")
gallery.style.setProperty ("- высота", высота + "пикс")
gallery.style.setProperty ("- cols", cols + "")  

⚠️ Не забывайте пересчитывать эти значения при изменении размера экрана или количества видео.

Затем я использовал дисплей : flex для макета .video-container elements

  #gallery {
  дисплей: гибкий;
  justify-content: center;
  flex-wrap: обертка;
  максимальная ширина: calc (var (- width) * var (- cols));
}  

Поскольку .video-container Размеры рассчитаны для размещения в контейнере, мне не о чем беспокоиться здесь. Я также нашел justify-content: center; лучше всего подходит для этого варианта использования, так как он хорошо центрирует не полностью заполненные строки.Назначение max-width - принудительно разрывать строки.

Обработка различных соотношений сторон

Эта галерея имеет ограничение на фиксированное соотношение сторон для всех элементов. Но у видео могло быть другое соотношение. Вот где удобно иметь .video-container , оборачивающий .

  .видео-контейнер {
  width: var (- ширина);
  height: var (- высота);
}

видео {
  высота: 100%;
  ширина: 100%;
}  

Таким образом, видео занимает как можно больше места в своем контейнере и сохраняет исходное соотношение сторон.

Например, изменение отношения контейнера с 16: 9 на 1: 1 не приведет к искажению видео с исходным соотношением 16: 9 .

Результат

Вот как это выглядит в реальном мире:

Ознакомьтесь с полным решением здесь. Измените количество видеороликов и измените размер экрана, чтобы увидеть его в действии.

Открытые вопросы❓

1. Можно ли добиться аналогичного результата, не вычисляя размер видео в JavaScript? 🤔
2. Есть ли лучший способ вычисления размеров видео, чем поиск методом перебора? Стоит ли, если количество видео не может превышать 50? 🤔

Использование максимальной ширины и высоты CSS для размещения изображений

 

<стиль>

/ * Подгонка стилей изображений * /

.img-responseive {
  максимальная ширина: 100%;
}




  
  ...

 
 

  
 
 
  
 
 
 
 
 
 
 10% 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 200% 
 
 
 
  

  .image-container {
 align-items: center; 
 дисплей: гибкий; 
 justify-content: center; 
 переполнение: скрыто; 
 ширина: 100%; 
} 
  

  
 const image = document.getElementById ('image'); 
 
 const cloneImage = новое изображение (); 
 cloneImage.addEventListener ('load', function (e) {
 const width = e.target.naturalWidth; 
 const height = e.target.naturalHeight; 
 
 
 image.style.width = `$ {width} px` ; 
 image.style.height = `$ {height} px`; 
}); 
 
 
 cloneImage.src = image.src; 
  

  cloneImage.addEventListener ('load', function (e) {
 ... 
 const scale = image.parentNode.getBoundingClientRect () .width / width; 
});  

  cloneImage.addEventListener ('load', function (e) {
 ... 
 image.style.transform = `scale ($ {scale}, $ {scale}) `; 
});  

  const minScale = 0,1; 
 const maxScale = 2; 
 const step = (maxScale - minScale) / 100;  

  
 const knob = document.getElementById ('ручка'); 
 const leftSide = knob.previousElementSibling; 
 cloneImage.addEventListener ('load', function (e) {
 ... 
 leftSide.style.width = `$ {(масштаб - minScale) / step}%`; 
}); 
  

  const mouseMoveHandler = function (e) {
 let newLeftWidth = (leftWidth + dx) * 100 / containerWidth; 
 
 leftSide.style.width = `$ {newLeftWidth}%`; 
 
 
 const scale = minScale + (newLeftWidth * шаг); 
 image.style.transform = `scale ($ {scale}, $ {scale})`; 
};