Як додати віджет фільтрації зображень на сайт Weebly?

Безкоштовний віджет фільтрації зображень для сайту Weebly дозволяє відображати елементи портфоліо у макеті з трьох стовпців з можливістю фільтрації на основі заздалегідь визначеної категорії. Це допомагає користувачам відфільтрувати відповідну категорію, натиснути будь -які відфільтровані результати та перейти на цю конкретну сторінку, щоб отримати докладнішу інформацію. Ви можете використовувати цей віджет не тільки для портфоліо, а й для пунктів меню, продуктів та у багатьох інших корисних сценаріях. Віджет буде виглядати, як показано нижче, і ви можете завантажити файли тут.

Віджет містить сценарій фільтрації ізотопів разом із платформою Bootstrap для розміщення панелей у макеті з 3 стовпців. Завантажте та розпакуйте вихідний ZIP -файл на свій локальний комп’ютер, файл містить такі елементи:

• Image Filter.html – ці файли містять HTML -код
• Активи – містить усі CSS, сценарії та зображення для віджета

Відкрийте файл “Imge Filtering.html" у веб -переглядачі, щоб побачити, як працює віджет. В основному вам потрібно зображення, заголовок та опис для кожної панелі разом із категорією для фільтрації. Виконайте наведені нижче дії, щоб додати віджет фільтрації зображень до свого Веб -сайт.

Крок 1 – Завантаження зображень на сайт Weebly

Підготуйте свої зображення, подібні до розмірів зображень (644 x 420 пікселів), у папці “assets / img” та завантажте всі зображення, необхідні для віджета, у розділі “Тема> Редагувати HTML / CSS > Активи”. Ми рекомендуємо створити нову папку з назвою «ImageFiltering» і завантажити всі зображення під цю папку. Шлях до зображення зображення Weebly буде виглядати так: " http://youesite.com/files/theme/ImageFiltering/image1.jpg ".

Завантаження активів у Weebly

Крок 2 – Завантаження CSS

У папці ресурсів є два файли CSS – Bootstrap.css та власний ImageFiltering.css. Завантажте обидва файли CSS у папку “ImageFiltering” на свій сайт Weebly.

Крок 3 – Завантаження файлів сценаріїв

Весь віджет управляється шістьма різними сценаріями, також доступними в папці ресурсів. Завантажте всі шість файлів сценаріїв у папку “ImageFiltering” на свій сайт Weebly.

Крок 4 – Додавання HTML

Тепер, коли ви додали необхідні зображення, CSS та сценарії, перейдіть на сторінку, на яку потрібно додати віджет, перетягніть елемент коду для вбудовування та HTML -код віджета.

• Ви можете отримати HTML -код, відкривши файл “Image Filter.html” за допомогою будь -якого текстового редактора, такого як Блокнот або TextEdit.
• Видаліть таблицю стилів (кілька перших рядків) та посилання на сценарії (останні кілька рядків) і скопіюйте HTML, що залишився, до іншого текстового файлу.
• Замініть URL -адреси зображень вашими власними, отриманими на кроці 1, і замініть назву/опис власним вмістом.

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

<!-- Filter Buttons -->
<div class="portfolio-filter-container margin-top-20">
<ul class="portfolio-filter">
<li class="portfolio-filter-label label label-primary">
filter by:
</li>
<li>
<a href="#" class="portfolio-selected btn btn-default" data-filter="*">All</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".HTML">HTML</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".CSS">CSS</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".JavaScript">JavaScript</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".PHP">PHP</a>
</li>
</ul>
</div>
<!-- End Filter Buttons -->

Ці кнопки фільтра можна побачити зверху віджета, як показано нижче:

Кнопки фільтрації у віджеті

Кожен елемент портфоліо ідентифікується однією з вищенаведених 4 категорій, щоб фільтрація могла працювати належним чином. Наприклад, нижче – портфоліо, визначене як категорія CSS, яке буде показано після натискання кнопки фільтра “CSS”.

<!-- Portfolio Item -->
<div class="col-md-4 portfolio-item margin-bottom-40 CSS">
<div>
<a href="#">
<h3 class="margin-top-20">This is a CSS filter</h3>
<figure>
<img src="assets/img/image1.jpg" alt="image1">
<figcaption>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</figcaption>
</figure>
</a>
</div>
</div>
<!-- End Portfolio Item -->

Обов’язково ідентифікуйте всі свої елементи з однією з визначених категорій у розділі фільтрації.

Крок 5 – Зв’язування сценаріїв і CSS

Останній крок – приєднати сценарії та файли CSS, завантажені на кроках 2 та 3, до вашої сторінки Weebly. Додайте наведений нижче код у розділі “Код нижнього колонтитула” для зв’язування сценаріїв:

<!-- Scripts -->
<script type="text/javascript" src="/files/theme/ImageFiltering/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/files/theme/ImageFiltering/scripts.js"></script>
<!-- Isotope - Portfolio Sorting -->
<script type="text/javascript" src="/files/theme/ImageFiltering/jquery.isotope.js" type="text/javascript"></script>
<!-- Animate on Scroll-->
<script type="text/javascript" src="/files/theme/ImageFiltering/jquery.visible.js" charset="utf-8"></script>
<!-- Modernizr -->
<script src="/files/theme/ImageFiltering/modernizr.custom.js" type="text/javascript"></script>
<!-- End Scripts -->

Додайте наведений нижче код у розділі “Код заголовка”, щоб зв’язати файли CSS:

<link rel="stylesheet" href="/files/theme/ImageFiltering/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="/files/theme/ImageFiltering/imagefiltering.css" rel="stylesheet">

Публікуйте свій сайт, щоб побачити віджет фільтрації зображень у дії.