Бесплатный виджет фильтрации изображений для 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
Шаг 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">
Опубликуйте свой сайт, чтобы увидеть виджет фильтрации изображений в действии.
