TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

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

1

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

Завантаження активів у 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 -->

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

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

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

Кожен елемент портфоліо ідентифікується однією з вищенаведених 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">

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

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі