Безкоштовний віджет фільтрації зображень для сайту 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">
Публікуйте свій сайт, щоб побачити віджет фільтрації зображень у дії.