Deveti čas – Nivo slajder

Dragan Filipović Korak po korak, Kurs Comments (0)

1. Preuzmemo fajlovehttp://dev7studios.com/nivo-slider/

Skripta sadrži više fajlova od ostalih skripti koje smo do sada radili. Zato je bolje ovu skriptu staviti u svoj zaseban folder.

nivo-folder

 

U folderu DEMO nalazi se demo.html strana sa primerom slajdera. Ako pregledamo kod DEMO strane uočićemo nekoliko delova:

CSS za teme slajdera. Nivo slajder ima 4 teme (načina prikaza) koje možemo lako menjati. Ukoliko želimo da imamo samo jednu temu onda nam treba samo jedan CSS za izabranu temu.

CSS za slajder – glavni stil za slajder

CSS za DEMO stranu – stil koji služi samo za demo stranu, 

HTML za slajder – način postavljanja slika i aktivacija.

JS – skripte su povezane na dnu strane, radi bržeg učitavanja strane. Takođe postoji i kod za pokretanje slajdera.

nivo-demo-kod

 

Demo strana nam služi kao upustvo za povezivanje fajlova, ubacivanje slika i aktivaciju skripte.

 

2. – Copy/paste sa DEMO strane.

Kopiraćemo kod sa DEMO strane. Iz HEAD dela kopiramo kodove za povezivanje CSS fajlova. Kod postavljamo u HEAD deo naše strane (npr. index.html)

    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

 Iz BODY dela kopiramo sav kod i postavljamo u deo strane gde želimo da prikažemo slajder. U našem slučaju to će biti prvi red – header

<div id="glavna-tabela">
  <div id="heder">
  
<div id="wrapper">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
  
  </div>
  <!-- Kraj #heder -->

 3. Popravimo putanje linkova

Head deo

    <link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="nivo-slider/demo/style.css" type="text/css" media="screen" />

 Body deo

 <div id="heder">
  
<div id="wrapper">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="nivo-slider/demo/images/toystory.jpg" data-thumb="nivo-slider/demo/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="nivo-slider/demo/images/up.jpg" data-thumb="nivo-slider/demo/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="nivo-slider/demo/images/walle.jpg" data-thumb="nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="nivo-slider/demo/images/nemo.jpg" data-thumb="nivo-slider/demo/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
        </div>
    </div>
    <script type="text/javascript" src="nivo-slider/demo/scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
  
  </div>
  <!-- Kraj #heder -->

 4. Konfiguracija skripte

Prvo moramo promeniti izgled strane, obzirom da imamo dosta grešaka na sajtu.

slajder-greske

 

Redosled povezivanja fajlova u HEAD delu je veoma bitan. Poslednji CSS fajl u nizu ima prioritet u prikazivanju osobina.

Npr: Ukoliko je u prvom fajlu definisana crvena boja teksta, a u drugom plava boja teksta, Tekst će biti plave boje

U stil-1.css
p {
color:red;
}
U stil-2.css
p {
color:blue;
}

 Bela pozadina sajta dolazi iz CSS fajlova za skriptu, pa ćemo prvo naš glavni CSS staviti poslednji u nizu.

css-redosled

 

Nakon promene redosleda:

 

 

 

 

css-redosled2 

Visina slajdera zavisi od veličina slike. Obzirom da smo mi našem prvom redu definisali visinu od 200px, slike ne mogu da stanu, pa prelaze preko menija. Osim visine prvi red ima i pozadinsku sliku. Sada nam ne trebani visina, ni pozadinska slika, jer smo ubacili slajder preko. Osobine prvog reda ne možemo menjati, jer na ostalim stranama sajta slajder ne postoji, pa su osobine potrebne. Najbolje je jednostavno ukinuti format prvog reda u samoj strani, brisanjem id="prvi-red"

Ostaće nam prazan DIV tag koji će nam možda kasnije zatrebati, inače ceo div može da se obriše.

<div id="glavna-tabela">
  <div>
<!-- početak slajdera -->  
<div id="wrapper">
        <div class="slider-wrapper theme-default">

 Ostale greške su definisane u nekom od CSS fajlova za slajder. Elemente sa greškom, kao i njihove osobine i ime fajla možemo pronaći preko browser-a putem Inspect element.

nivo-inspect

 

Ovde vidimo da element slider-wrapper ima širinu 80% i gornju marginu od 100px. Te osobine su definisane u fajlu style.css na liniji 85.

U DW otvorimo style.css (u nivo-slider/demo folderu) i promenimo osobine

.slider-wrapper { 
	width: 100%; 
	margin: 0px auto;
}

 Sada se slajder bolj uklapa u naš sajt. Možemo promeniti i temu za slajder (bar, dark, light ili default) u HTML-u

<!-- početak slajdera -->  
<div id="wrapper">
        <div class="slider-wrapper theme-default">

 Umesto reči default unesemo naziv druge teme. 

<!-- početak slajdera -->  
<div id="wrapper">
        <div class="slider-wrapper theme-bar">

 Efekte skripte menjamo u jquery.nivo.slider.js fajlu, na samom kraju fajla.

    //Default settings
    $.fn.nivoSlider.defaults = {
        effect: 'random',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 3000,
        startSlide: 0,
        directionNav: true,
        controlNav: true,
        controlNavThumbs: false,
        pauseOnHover: true,
        manualAdvance: false,
        prevText: 'Prev',
        nextText: 'Next',
        randomStart: false,

 Na osnovu imena osobine zaključimo čemu služi. Npr. animSpeed – brzina animacije (tranzicije), controlNav – navigacija za kontrolu – tačkice. directionNav – strelice.

U JS možemo menjati sledeće vrednosti

-tekst (u ovom slučaju Ime efekta – effect: ‘random’ ; , natpis Prev i Next)

-brojeve (brzina animacije itd. izražena u milisekundama)

-On/Off opcije – true/false – uključujemo i isključujemo neke efekte (npr. controlNavThumbs: true; uključiće prikaz malih slika umesto tačkica.)

* Ime efekta – effect: ‘random’ ;

umesto reči random – nasumično, možemo izabrati neki drugi određeni efekat.

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

 

 

 

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.