Бесплатный виджет фильтрации изображений для 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">

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