TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Darmowy widżet suwaka Nivo dla Weebly

3

Weebly oferuje prosty element pokazu slajdów do wstawiania suwaków w witrynie. Bogaty w funkcje pokaz slajdów z wieloma efektami przejścia to jedna z brakujących części Weebly. Od dawna Weebly oferował pokaz slajdów nagłówka dla użytkowników Pro, który został również usunięty ze wszystkich responsywnych motywów. Przetestowaliśmy różne suwaki i stwierdziliśmy, że popularny suwak Nivo z modyfikacjami będzie najlepszy dla użytkowników Weebly. Suwak Nivo jest jednym z dobrze znanych suwaków w Internecie, domyślnie używanym w różnych motywach. Możesz łatwo dodać piękne efekty przejścia za pomocą jQuery i dostosować suwaki do swoich potrzeb. W tym artykule omówimy, jak dodać bezpłatny widżet Nivo slider do witryny Weebly. Suwak można umieścić w dowolnym miejscu witryny Weebly z ograniczeniem jednego suwaka na stronę.

Funkcje widżetu suwaka Nivo

Poniżej znajdują się niektóre z najważniejszych funkcji bezpłatnego widżetu suwaka Nivo dla Weebly:

  • Można go dodać jako pokaz slajdów nagłówka lub wewnątrz obszaru zawartości. W tym artykule omówimy wstawianie obszaru zawartości poufnej, jeśli szukasz pokazu slajdów nagłówka, zapoznaj się z naszym oddzielnym artykułem na temat wstawiania pokazu slajdów nagłówka w bezpłatnej witrynie Weebly.
  • Suwak Nivo jest oferowany z 4 różnymi stylami motywów – jasnym, paskowym, ciemnym i domyślnym.
  • Możesz dodać 12 różnych efektów przejścia – tnij w prawo, przesuń w dół w lewo, tnij w górę w prawo, tnij w górę w lewo, tnij w górę w dół, tnij w górę w dół w lewo, zginanie, zanikanie, losowe pole, pole deszczowe, pole deszczowe odwrócone i pole deszczowe rosną odwrócić.
  • Do każdego slajdu można dodać inny efekt przejścia.
  • Łatwe dodawanie podpisu tekstowego i podpisu z linkiem. Możesz także połączyć obrazy suwaków z wymaganą stroną w swojej witrynie.
  • Używaj prostych elementów sterujących, takich jak przyciski nawigacyjne dla poprzednich i następnych slajdów.

Jak dodać widżet Nivo Slider w witrynie Weebly?

Suwak demonstracyjny ma cztery obrazy i wykorzystuje efekt przejścia zdefiniowany dla każdego obrazu osobno w kodzie HTML. Drugi obraz (up.jpg) służy jako link do strony internetowej z tekstem podpisu na dole. Czwarty obrazek (nemo.jpg) ma podpis z linkiem HTML.

Krok 1 – Przygotuj obrazy

Pierwszym krokiem dla każdego pokazu slajdów jest przygotowanie obrazów. W dema wykorzystaliśmy 4 obrazy o rozmiarze 618 x 246 px. W celu uzyskania lepszej jakości zalecamy stosowanie podobnych proporcji przy obrazach o większym rozmiarze.

Krok 2 – Pobierz pliki suwaków

Kliknij poniższy przycisk, aby pobrać wszystkie wymagane pliki dla suwaka Nivo, w tym cztery obrazy używane do celów demonstracyjnych.

Pobierz wszystkie pliki sliderów nivo.

Plik archiwum zip zawiera 12 plików, jak poniżej:

Obrazy nawigacyjne

  • arrows_bar_default.png
  • arrows_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • ładowanie.gif

Skrypty:

  • jquery.nivo.slider.nod.js
  • jquery-1.7.1.min.js

Arkusz stylów:

  • motyw-style.css

Obrazy demonstracyjne:

  • zabawki.jpg
  • up.jpg
  • walle.jpg
  • nemo.jpg

Możesz usunąć obrazy demonstracyjne i użyć własnych w witrynie Weebly.

Krok 3 – Prześlij pliki suwaków

Zaloguj się do swojego konta Weebly i edytuj witrynę, do której chcesz dodać suwak Nivo. Przejdź do „Motyw > Edytuj HTML / CSS" i przejdź do sekcji „Zasoby”. Kliknij przycisk +, a następnie utwórz nowy folder.

Darmowy widżet suwaka Nivo dla Weebly

Tworzenie nowego folderu w edytorze kodu Weebly

W tym przykładzie tworzymy folder o nazwie „nivo” i przesyłamy wszystkie 12 plików pobranych w kroku 2.

Darmowy widżet suwaka Nivo dla Weebly

Przesyłanie plików do Weebly

Krok 4 – Wstawianie kodu na stronie

Teraz przejdź do strony, na której chcesz dodać suwak Nivo i wstaw następujący kod za pomocą elementu „Kod osadzania”.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Opublikuj swoją witrynę, aby zobaczyć piękny suwak Nivo.

Chociaż powyższy kod można wstawić za pomocą elementu „Kod do umieszczenia na stronie”, zaleca się dodanie linku CSS w sekcji „Strony > Twoja strona > Ustawienia SEO > Kod nagłówka”.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

Oraz JavaScript w sekcji „Strony > Twoja strona > Ustawienia SEO > Kod stopki”.

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Pamiętaj, aby zastąpić adresy URL obrazów własnymi.

Dostosowywanie suwaka poziomu

Efekt przejścia dla obrazów

Efekt przejścia jest kontrolowany za pomocą parametru „przejście danych” dla każdego obrazu. Efekty losowe zostaną użyte, gdy usuniesz parametr „data-transition” z kodu HTML. Na przykład poniższy kod HTML spowoduje losowe przejście z ciemnym motywem.

<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Możesz użyć jednej z następujących 12 wartości parametrów przejścia danych dla każdego obrazu na suwakach, aby uzyskać różne efekty:

  • odcięcie w prawo
  • odcięcie w lewo
  • sliceUpRight
  • plasterw górę w lewo
  • wycinanie w górę
  • plasterUpDownLeft
  • zginać
  • znikać
  • pudełkoLosowo
  • pudełkoDeszcz
  • poleDeszczRewers
  • pudełkoDeszczRozwijać
  • boxDeszczGrowReverse

Korzystanie z innego motywu

Motyw suwaka jest definiowany za pomocą klasy CSS „theme-NAME”. W powyższym przykładzie motyw paska został użyty jako „pasek motywu”. Możesz użyć jednego z 4 motywów, podmieniając nazwę motywu, jak poniżej:

<div class="slider-wrapper theme-bar"> – This is for bar theme <div class="slider-wrapper theme-default"> -This is for default theme <div class="slider-wrapper theme-light"> -This is for light theme <div class="slider-wrapper theme-dark"> -This is for dark theme

Dostosowywanie stylów

Wszystkie style użyte w suwaku są zdefiniowane w pliku „theme-styles.css”. Posiada zestawy stylów dla czterech motywów i otoczkę suwaka. Możesz dostosować szerokość, rozmiar czcionki i kolor podpisów w tym pliku.

Dostosowywanie skryptu

Zasadniczo w tym suwaku używane są dwa skrypty – jeden to biblioteka Google jQuery, a drugi to niestandardowy skrypt suwaka Nivo dystrybuowany na licencji MIT. Wszystkie podstawowe zmienne dla kontrolki suwaka są zdefiniowane w pliku „jquery.nivo.slider.nod.js” jak poniżej w sekcji „//Ustawienia domyślne”:

  • efekt: ‘random’ – Domyślnie zostaną zastosowane losowe efekty przejścia
  • plasterki: 15 – obraz jest pocięty na 15 kawałków
  • boxCols: 8 – obraz jest podzielony na 8 kolumn
  • boxRows: 4 – obraz jest podzielony na 4 wiersze
  • animSpeed: 500 – domyślna prędkość animacji to 500 ms, zmniejsz, aby szybciej przenieść przejście
  • pauseTime: 3000 – Czas pauzy między slajdami w 3000 ms
  • startSlide: 0 – slajd startowy to pierwszy (0) slajd
  • directionNav: true – Pokaż przyciski nawigacji kierunku (false do ukrycia)
  • controlNav: true – Pokaż pociski nawigacji kontrolnej (od fałszu do ukrycia)
  • controlNavThumbs: false – Ukryj miniatury nawigacji zamiast punktorów (true to show)
  • pauseOnHover: true – Wstrzymaj pokaz slajdów po najechaniu myszą na obraz
  • manualAdvance: false – Domyślnie włączone automatyczne obracanie, możesz włączyć ręczne przesuwanie obrazów
  • prevText: ‘Prev’ – Tekst poprzedniego obrazu
  • nextText: ‘Dalej’ – Tekst następnego obrazu
  • randomStart: false – Losowy start jest wyłączony

Uwaga: Nie usuwaj komentarzy dotyczących praw autorskich z pliku „jquery.nivo.slider.nod.js”. Rozumiemy, że oryginalny programista „Dev7Studios” już nie istnieje, a witryna przekierowuje do wtyczki WordPress. Ale zachowaj zawiadomienie w stanie nienaruszonym w celach informacyjnych. Ponieważ funkcja $ nie jest już obsługiwana w Weebly, zastąpiliśmy wszystkie $ w skrypcie przez jQuery.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów