Бесплатный виджет фильтрации изображений для Weebly

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

Как создать виджет фильтрации изображений

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

  • Image Filter.html – файлы содержат HTML-код.
  • Assets – содержит все CSS, скрипты и изображения для виджета.

Открыть «Imge Filtering.html» файл в браузере, чтобы увидеть, как работает виджет. Обычно вам нужно изображение, заголовок и описание для каждой панели вместе с категорией для фильтрации. Выполните следующие действия, чтобы добавить виджет фильтрации изображений на свой сайт Weebly.

Шаг 1. Загрузка изображений на сайт Weebly

Подготовьте изображения, аналогичные размерам изображений (644 x 420 пикселей) в «Активы / img» папку и загрузите все изображения, необходимые для виджета, в «Тема> Изменить HTML / CSS> Ресурсы». Мы рекомендуем создать новую папку с именем «Фильтрация изображений» и загрузите все изображения в эту папку. Путь к файлу изображения Weebly будет таким: «Http://youesite.com/files/theme/ImageFiltering/image1.jpg».

Загрузка активов в Weebly

Загрузка активов в Weebly

Шаг 2 – Загрузка CSS

В папке с ресурсами есть два файла CSS – Bootstrap.css и пользовательский ImageFiltering.css. Загрузите оба файла CSS в «Фильтрация изображений» папку на вашем сайте Weebly.

Шаг 3 – Загрузка файлов сценария

Весь виджет управляется шестью различными скриптами, также доступными в папке с ресурсами. Загрузите все шесть файлов сценариев в «Фильтрация изображений» папку на вашем сайте 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="https://www.webnots.com/free-portfolio-image-filter-widget-for-weebly/#" class="portfolio-selected btn btn-default" data-filter="*">All</a>
</li>
<li>
<a href="https://www.webnots.com/free-portfolio-image-filter-widget-for-weebly/#" class="btn btn-default" data-filter=".HTML">HTML</a>
</li>
<li>
<a href="https://www.webnots.com/free-portfolio-image-filter-widget-for-weebly/#" class="btn btn-default" data-filter=".CSS">CSS</a>
</li>
<li>
<a href="https://www.webnots.com/free-portfolio-image-filter-widget-for-weebly/#" class="btn btn-default" data-filter=".JavaScript">JavaScript</a>
</li>
<li>
<a href="https://www.webnots.com/free-portfolio-image-filter-widget-for-weebly/#" class="btn btn-default" data-filter=".PHP">PHP</a>
</li>
</ul>
</div>
<!-- End Filter Buttons -->

Эти кнопки фильтров можно увидеть в верхней части виджета, как показано ниже:

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

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

Каждый элемент портфеля идентифицируется с одной из четырех вышеперечисленных категорий, поэтому фильтрация может работать правильно. Например, ниже представлен элемент портфолио, обозначенный как категория CSS, который будет отображаться при нажатии кнопки фильтра «CSS».

<!-- Portfolio Item -->
<div class="col-md-4 portfolio-item margin-bottom-40 CSS">
<div>
<a href="https://www.webnots.com/free-portfolio-image-filter-widget-for-weebly/#">
<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="https://www.webnots.com/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="https://www.webnots.com/files/theme/ImageFiltering/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.webnots.com/files/theme/ImageFiltering/imagefiltering.css" rel="stylesheet">

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *