Jak dodać widżet filtrowania obrazów w witrynie Weebly?

Darmowy widżet filtrowania obrazów dla witryny Weebly pozwala wyświetlać elementy portfolio w układzie trzech kolumn z opcją filtrowania na podstawie predefiniowanej kategorii. Pomaga użytkownikom filtrować odpowiednią kategorię, kliknąć dowolne filtrowane wyniki i przejść do tej konkretnej strony, aby uzyskać więcej informacji. Możesz użyć tego widżetu nie tylko do portfolio, ale także do pozycji menu, produktów i wielu innych przydatnych scenariuszy. Widżet będzie wyglądał jak poniżej, a pliki można pobrać tutaj.

Widget zawiera skrypt do filtrowania izotopów wraz z frameworkiem Bootstrap do umieszczania paneli w układzie 3 kolumn. Pobierz i rozpakuj źródłowy plik ZIP na komputer lokalny, plik zawiera następujące elementy:

• Image Filter.html – ten plik zawiera kod HTML
• Zasoby – zawiera wszystkie CSS, skrypty i obrazy dla widżetu

Otwórz plik „Imge Filtering.html" w przeglądarce, aby zobaczyć, jak działa widżet. Zasadniczo potrzebujesz obrazu, tytułu i opisu dla każdego panelu wraz z kategorią filtrowania. Wykonaj poniższe czynności, aby dodać widżet filtrowania obrazów do swojego Witryna Weebly.

Krok 1 – przesyłanie obrazów do witryny Weebly

Przygotuj obrazy podobne do rozmiarów obrazu (644 x 420px) w folderze „assets/img” i prześlij wszystkie obrazy wymagane dla widżetu w sekcji „Motyw > Edytuj HTML / CSS > Zasoby”. Zalecamy utworzenie nowego folderu o nazwie „ImageFiltering” i przesłanie wszystkich obrazów z tego folderu. Ścieżka pliku obrazu Weebly będzie wyglądać tak: „ http://youesite.com/files/theme/ImageFiltering/image1.jpg “.

Przesyłanie zasobów do Weebly

Krok 2 – Wgranie CSS

W folderze zasobów znajdują się dwa pliki CSS — Bootstrap.css i niestandardowy ImageFilters.css. Prześlij oba pliki CSS do folderu „ImageFiltering” na swojej witrynie Weebly.

Krok 3 – Przesyłanie plików skryptów

Cały widżet jest kontrolowany przez sześć różnych skryptów dostępnych również w folderze asset. Prześlij wszystkie sześć plików skryptów do folderu „ImageFiltering” w witrynie Weebly.

Krok 4 – Dodanie HTML

Teraz, gdy dodałeś wymagane obrazy, CSS i skrypty, przejdź do strony, na której chcesz dodać widżet, przeciągnij element kodu osadzania i kod HTML widżetu.

• Możesz uzyskać kod HTML, otwierając plik „Image Filter.html” w dowolnym edytorze tekstu, takim jak Notatnik lub TextEdit.
• Usuń arkusz stylów (kilka pierwszych wierszy) i linki skryptów (kilka ostatnich wierszy) i skopiuj pozostały kod HTML do innego pliku tekstowego.
• Zastąp adresy URL obrazów własnymi uzyskanymi w kroku 1 i zastąp tytuł/opis własną treścią.

Zdefiniuj wszystkie kategorie i włącz przyciski filtrowania dla tych kategorii. W tym przykładzie użyliśmy 4 kategorii wraz z opcją „Wszystko”, którą można zobaczyć w kodzie HTML, jak poniżej.

<!-- 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 -->

Te przyciski filtrów można zobaczyć na górze widżetu, jak pokazano poniżej:

Przyciski filtrowania w widżecie

Każda pozycja portfolio jest identyfikowana z jedną z powyższych 4 kategorii, aby filtrowanie mogło działać poprawnie. Na przykład poniżej znajduje się pozycja portfolio zidentyfikowana jako kategoria CSS, która zostanie wyświetlona po kliknięciu przycisku filtra „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 -->

Upewnij się, że identyfikujesz wszystkie swoje produkty za pomocą jednej ze zdefiniowanych kategorii z sekcji filtrowania.

Krok 5 – Łączenie skryptów i CSS

Ostatnim krokiem jest połączenie skryptów i plików CSS przesłanych w kroku 2 i 3 ze swoją stroną Weebly. Dodaj poniższy kod w sekcji „Kod stopki”, aby połączyć skrypty:

<!-- 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 -->

Dodaj poniższy kod w sekcji „Kod nagłówka”, aby połączyć pliki CSS:

<link rel="stylesheet" href="/files/theme/ImageFiltering/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="/files/theme/ImageFiltering/imagefiltering.css" rel="stylesheet">

Opublikuj swoją witrynę, aby zobaczyć działanie widżetu filtrowania obrazów.