Галерея сайту

Pixpa дає вам великий контроль над тим, як відображати зображення у ваших галереях.

Використовуючи параметри стилю галереї, ви можете повністю контролювати відображення своїх зображень у галереї в поєднанні з макетом галереї.

У цій статті:

1. 1. Макет галереї
   2. Стиль решітки
   3. Кольори сітки
   4. Стиль наведення
   5. Назва зображення
   6. Мобільний дисплей
   7. Дисплей лайтбокс

Ви можете налаштувати параметри галереї для всього сайту з дизайн (1) розділ.

У розділі «Дизайн» натисніть Галереї (2) вкладка.

Крім того, ви також можете скористатися опцією пошуку студії.

• Що натомість? Створіть віртуальну версію себе у  Галереї (1) на панелі пошуку.
• У відповідних результатах натисніть на Дизайн – Галереї варіант (2).

Макет галереї 

1. Макет: Виберіть макет, який буде застосовано до галереї.
   Дізнайтеся, як змінити макет галереї.
2. ширина : виберіть ширину галереї.
   • "Повна ширина' відобразить галерею по всій ширині, не залишаючи полів.
   • "Коробкова' відобразить галерею, залишаючи деяку кількість відступів праворуч і ліворуч на екрані.
   • "Ширина сайту' можна вказати в розділі дизайну. Тут можна вказати фіксовану ширину.
     Він відображатиме галерею, дотримуючись указаної фіксованої ширини.

Стиль решітки

1. Інтервал сітки: Укажіть відстань між зображеннями в макетах сітки. (0 – 250 пікселів) 
2. Радіус кута зображення: Застосуйте радіус межі, щоб зробити кути зображення округленими в сітках галереї.

Наприклад, Ліхтар домашня галерея теми має інтервал сітки 142 пікселів.  

Після застосування радіуса кута зображення ви побачите округлені краї зображень, як на За шаблон

Кольори сітки

Основна непрозорість: Якщо ви вибрали тип наведення курсора як колір акценту зображення, установіть тут прозорість основи сітки. 

1. База: Базовий колір використовується для формування сітки та видимий лише мить перед завантаженням зображень. У вас є два варіанти основного кольору сітки.
   • Виберіть колір: Виберіть цей параметр, щоб установити певний колір для основи сітки. Вкажіть будь-який колір і непрозорість для основи сітки.
   • Колір акценту: Використовуйте акцентні кольори зображення для основи сітки. Це дасть різнокольорову сітку з використанням акцентних кольорів кожного зображення.
2. Основна непрозорість: Якщо ви вибрали базовий тип як колір акценту, установіть тут прозорість основи сітки. 
3. Наведення:  Це впливає на сітку, коли курсор наводиться на зображення.
   • Виберіть колір: Установіть колір наведення за замовчуванням і його непрозорість, якщо ви вибрали «Вибрати колір» для зображень сітки. 
   • Колір акценту: Використовуйте акцентні кольори зображення для основи сітки. Це дасть різнокольорову сітку з використанням акцентних кольорів кожного зображення.
4. Непрозорість наведення: Якщо ви вибрали тип наведення в якості акцентного кольору, установіть тут прозорість основи сітки. 

Ефект наведення сітки

Ефект наведення буде використовуватися лише в макеті сітки. Під час наведення курсора в режимі сітки можна відобразити такі параметри.

1. Без ефекту – Щоб не впливати на зображення в режимі сітки.
2. Колір – Лише для кольору наведення курсора на зображення в режимі сітки.
3. Колір і назва зображення – Для кольору зображення наведіть курсор миші на назву зображення. Ви можете встановити колір/шрифт/розмір/щільність тексту заголовка зображення та колір наведення курсора наступний варіант.
4. Колір і значок – Для зображення наведіть колір із піктограмою.
5. Колір, назва зображення та значок – Для кольору зображення, назви зображення та піктограми. Ви також можете додавати значки на свої зображення, як-от плюс, стрілка, хрест чи око. 

Значок наведення

• Піктограми наведення курсора використовуються лише в макетах сітки галерей. Ви можете вибрати піктограму для своїх зображень у режимі сітки.
• Варіанти: плюс, стрілка, хрестик і око. Це можна застосувати, лише коли піктограму вибрано в парити ефект випадає. 

 Назва зображення

1. Це застосовується, коли ви вирішуєте відображати заголовки зображень при наведенні курсора.

>

Мобільний дисплей

1. Показати як: Виберіть відображення галереї як Повзунок зображення або в режимі сітки в мобільному поданні. 
2. Стовпці сітки: Виберіть з 1 колонка або 2 колонки для відображення сітки в мобільному поданні.
3. Інтервал сітки: Встановіть жолоб між зображеннями в мобільний вигляд.

Дисплей лайтбокс

1. Відкрийте Lightbox

• Коли зображення відображаються у вигляді сітки, клацання зображення відкриває його в режимі Lightbox (відображення повного зображення).
• Ви можете ввімкнути або вимкнути це тут. 

Перевірте режим Lightbox у дії: 

2. Увімкніть масштабування

• Увімкнути/вимкнути масштабування зображень у режимі Lightbox.
• Функція масштабування працюватиме як на комп’ютері, так і на мобільних веб-сайтах.

3. Параметри відображення

• Виберіть спосіб відображення зображень у повному режимі.
• Ви можете вибрати з показувати лише зображення, зображення з мініатюрами, зображення з підписами внизу та зображення з підписами справа. 

Наприклад, галерея с показати лише зображення. 

Наприклад, галерея с показати зображення з мініатюрами.

Наприклад, галерея с показати зображення з підписом на нижній.

Наприклад, галерея с показати зображення з підписом право.

4. Перегляд зображення

Вкажіть режим відображення для Lightbox –

• Масштаб і підгонка – Зображення будуть масштабовані відповідно до доступної області браузера, щоб було видно повне зображення. 
• Повна кровотеча – Зображення матимуть розмір, щоб заповнити всю доступну область веб-переглядача – деякі частини зображення можуть бути обрізані під час повноекранного відображення. 

Наприклад, галерея с sрежим масштабування та підгонки де зображення вміщатимуться в доступну висоту браузера. 

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

5. Елементи управління

У поданні «Лайтбокс» виберіть спосіб відображення елементів керування навігацією, як-от піктограма інформації про зображення, піктограма інформації про галерею, піктограма хрестика, піктограма розміру браузера тощо. Варіанти:

1. Завжди видно (завжди показувати елементи керування навігацією поверх зображень)
2. Показати при наведенні (елементи керування навігацією відображатимуться лише тоді, коли ви переміщуєте курсор на екрані)
3. прихований (елементи керування навігацією ніколи не відображатимуться). 

Наприклад, галерея с Завжди видно елементи керування навігацією.

Наприклад, галерея с Показувати при наведенні елементи керування навігацією. 

Наприклад, галерея с прихований елементи керування навігацією.

6. Стиль «Наступний/Попередній».

На екрані повного зображення виберіть спосіб відображення стрілок навігації.

1. Плаваючий : стрілки навігації будуть плаваючими. Наведіть курсор на зображення та клацніть на екрані, коли з’явиться стрілка, щоб переходити між зображеннями. 
2. Chevron
3. Стрілки
4. Показати стрілку в колі
5. прихований : повністю вимкнути стрілки навігації. 

7. Ім'я файлу зображення

• Виберіть відображення назви файлу, коли зображення переглядається в режимі лайтбокс.

Дивіться в дії: 

8. Максимальний розмір зображення

• Ви можете вибрати один із 4 різних розмірів для свого лайтбоксу.
• За замовчуванням Авто буде застосовано там, де розмір зображення залежить від доступної ширини браузера та від пристрою, на якому ви переглядаєте зображення (у режимі лайтбокса).
• Ви також можете вибрати з 2048px, 1500px, 1000px, 800 або 500 пікселів для відтворення зображень фіксованого розміру незалежно від пристрою, який ви використовуєте. 

Налаштування слайд-шоу

1. Слайд-шоу: Натисніть на autoplay щоб автоматично запустити слайд-шоу в повному переглядачі зображень. Ви також можете вимкнути показ слайдів.
2. Швидкість: Виберіть швидкість переходу. Ви можете вибрати від 1 до 10 секунд.
3. Перехід: Виберіть стиль переходу слайд-шоу.

Перегляньте слайд-шоу в дії: 

Статті по темі:

• Створити галерею.
• Завантажте елементи у свою галерею.
• Найкращі методи іменування файлів зображень.
• Додайте підписи до зображень.