TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Gratis Nivo Slider Widget for Weebly

1

Weebly tilbyr et enkelt lysbildefremvisningselement for å sette inn glidebrytere på nettstedet ditt. Funksjonsrik lysbildefremvisning med flere overgangseffekter er en av de manglende delene i Weebly. Langt tilbake tilbød Weebly topplideshow for Pro -brukere, som også ble fjernet fra alle responsive temaer. Vi har testet forskjellige glidebrytere og fant at den populære Nivo -glidebryteren med modifikasjoner vil være den beste for Weebly -brukere. Nivo -glidebryteren er en av de velkjente glidebryterne på nettet som brukes på forskjellige temaer som standard. Du kan enkelt legge til vakre overgangseffekter med jQuery og tilpasse glidebryterne etter behov. I denne artikkelen vil vi diskutere hvordan du legger til gratis Nivo -glidebryter -widget på Weebly -nettstedet. Glidebryteren kan settes inn hvor som helst på Weebly -nettstedet med en begrensning på én glidebryter per side.

Nivo Slider Widget -funksjoner

Nedenfor er noen av høydepunktene i den gratis Nivo -glidebryteren for Weebly:

  • Den kan legges til som en lysbildefremvisning i toppteksten eller inne i innholdsområdet. I denne artikkelen vil vi diskutere om innsetting av innsideinnholdsområde, hvis du leter etter topplideshow, så sjekk vår egen artikkel om hvordan du setter inn topptekst -lysbildefremvisning i et gratis Weebly -nettsted.
  • Nivo -glidebryteren tilbys med 4 forskjellige temastiler – lys, bar, mørk og standard.
  • Du kan legge til 12 forskjellige overgangseffekter – skjær ned til høyre, skyv ned til venstre, skjær opp til høyre, skjær opp til venstre, skjær opp ned, skjær opp ned til venstre, brett, falm, tilfeldig boks, regnboks, regnboks omvendt og regnboks vokser omvendt.
  • Ulike overgangseffekter kan legges til hvert enkelt lysbilde.
  • Lett å legge til tekst og tekst med lenke. Du kan også koble skyvebilder til den nødvendige siden på nettstedet ditt.
  • Bruk enkle kontroller som navigasjonsknapper for forrige og neste lysbilde.

Hvordan legge til Nivo Slider Widget i Weebly Site?

Demoglideren har fire bilder og bruker overgangseffekt definert for hvert bilde separat i HTML -kode. Det andre bildet (up.jpg) brukes som lenke for å koble til en webside med en tekst i bunnen. Det fjerde bildet (nemo.jpg) har en bildetekst med HTML -lenke.

Trinn 1 – Forbered bilder

Det første trinnet for en lysbildefremvisning er å forberede bildene. I demonstrasjonene har vi brukt 4 bilder med hver størrelse 618 x 246 px. Vi anbefaler å bruke lignende forhold med bilder i større størrelse for bedre kvalitet.

Trinn 2 – Last ned skyvefiler

Klikk på knappen nedenfor for å laste ned alle nødvendige filer for Nivo -glidebryteren, dette inkluderer fire bilder som brukes til demoformål.

Last ned alle nivå skyvefilene.

ZIP -arkivfilen inneholder 12 filer som nedenfor:

Navigasjonsbilder

  • arrows_bar_default.png
  • arrows_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • loading.gif

Skript:

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

Stilark:

  • theme-styles.css

Demobilder:

  • toystory.jpg
  • opp.jpg
  • walle.jpg
  • nemo.jpg

Du kan slette demobildene og bruke dine egne på ditt Weebly -nettsted.

Trinn 3 – Last opp skyvefiler

Logg deg på Weebly -kontoen din og rediger nettstedet du vil legge til Nivo -glidebryteren. Naviger til "Tema> Rediger HTML /CSS" og gå til delen "Eiendeler". Klikk på + -knappen og opprett deretter en ny mappe.

Gratis Nivo Slider Widget for Weebly

Opprette ny mappe i Weebly Code Editor

I dette eksemplet oppretter vi en mappe som heter “nivå" og laster opp alle de 12 filene som er lastet ned i trinn 2.

Gratis Nivo Slider Widget for Weebly

Laster opp filer i Weebly

Trinn 4 – Sette inn kode på siden

Gå nå til siden der du vil legge til Nivo -glidebryteren, og sett inn følgende kode ved hjelp av "Embed Code" -elementet.

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

Publiser nettstedet ditt for å se den vakre Nivo -glidebryteren.

Selv om koden ovenfor kan settes inn ved hjelp av "Embed Code" -elementet, anbefales det å legge til CSS -lenken under "Pages> Your Page> SEO Settings> Header Code" -delen.

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

Og JavaScript under "Sider> Din side> SEO -innstillinger> bunntekst" -delen.

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

Husk å erstatte bildens nettadresser med din egen.

Tilpass nivåglider

Overgangseffekt for bilder

Overgangseffekten styres ved å bruke parameteren "dataovergang" for hvert bilde. Tilfeldige effekter vil bli brukt når du fjerner parameteren "dataovergang" fra HTML-koden. For eksempel vil under HTML -kode resultere i tilfeldig overgangseffekt med mørkt tema.

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

Du kan bruke en av følgende 12 dataovergangsparameterverdier for hvert bilde på glidebryterne for å ha forskjellige effekter:

  • sliceDownRight
  • sliceDownLeft
  • sliceUpRight
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • brette
  • falme
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Bruker forskjellig tema

Temaet for glidebryteren er definert ved hjelp av CSS-klassen “theme-NAME”. I eksemplet ovenfor ble bar-tema brukt som "tema-bar". Du kan bruke ett av de 4 temaene ved å erstatte temanavnet som nedenfor:

<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

Tilpasse stiler

Alle stiler som brukes for glidebryteren er definert i filen “theme-styles.css”. Den har stilsett for fire temaer og glidebryteren. Du kan justere bredden, skriftstørrelsen og fargen for bildetekster i den filen.

Tilpass skript

I utgangspunktet brukes to skript i denne glidebryteren – det ene er Google jQuery -bibliotek og det andre er det tilpassede Nivo -glidebryterskriptet distribuert under MIT -lisens. Alle de grunnleggende variablene for glidebryterkontrollen er definert i “jquery.nivo.slider.nod.js” -filen som nedenfor under “// Standardinnstillinger” -delen:

  • effekt: ’tilfeldig’ – Som standard brukes tilfeldige overgangseffekter
  • skiver: 15 – Bildet er skåret i 15 stykker
  • boxCols: 8 – Bildet er delt inn i 8 kolonner
  • boxRows: 4 – Bildet er delt inn i 4 rader
  • animSpeed: 500 – Animasjonshastigheten er standard 500 ms, reduser for å flytte overgangen raskere
  • pauseTime: 3000 – Pause tid mellom lysbilder i 3000 ms
  • startSlide: 0 – Startbildet er det første (0) lysbildet
  • directionNav: true – Vis navigasjonsknapper for retningen (usann for å skjule)
  • controlNav: true – Vis kontrollnavigasjonskuler (feil å skjule)
  • controlNavThumbs: false – Skjul navigasjonsminiatyrbilder i stedet for kuler (sant å vise)
  • pauseOnHover: true – Sett lysbildefremvisningen på pause når musen holdes på bildet
  • manualAdvance: false – Som standard er automatisk rotasjon aktivert, du kan aktivere manuell flytting av bilder
  • prevText: ‘Prev’ – Forrige bildetekst
  • nextText: ‘Next’ – Neste bildetekst
  • randomStart: false – Tilfeldig start er deaktivert

Merk: Ikke fjern opphavsrettskommentarene fra filen “jquery.nivo.slider.nod.js”. Vi forstår at den opprinnelige utvikleren “Dev7Studios” ikke lenger er eksisterende, og nettstedet omdirigerer til et WordPress -plugin. Men behold varselet intakt for referanse. Siden $ -funksjonen ikke lenger støttes i Weebly, har vi erstattet alle $ i skriptet med jQuery.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon