15# Slajder w nagłówku

Cześć wszystkim!
Od jakiegoś czasu nosiłam się z zamiarem opracowania prostego slidera celem opublikowania tu instrukcji. W końcu się udało i muszę przyznać,że dla mnie efekt jest zadowalający. Pokażę Wam dziś w jaki sposób opracować pokaz slajdów na swojego bloga, a także wytłumaczę jak umieścić taki w nagłówku.
Efekt, który chcemy uzyskać prezentuje się następująco:


  • pierwszy kotek!
  • drugi kotek!
  • trzeci kotek!
  • czwarty kotek!


Zaczniemy od dodania kodu HTML w miejsce naszego nagłówka. Wchodzimy w nasz edytor kodu HTML, w panelu administracyjnym bloga klikając na odnośnik "Szablon", by następnie skierować się do "Dostosuj kod HTML". Kursor kierujemy na arkusz z kodem i klikamy gdziekolwiek, by po wciśnięciu klawiszy CTRL i F móc wyszukać: <header>
Usuwamy cały kod pomiędzy <header>, a </header> i zastępujemy go:

<div id="slajder">
<div class="poprzedni">⇐</div>
<div class="nastepny">⇒</div>
<ul>
<li>
<img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span>
</li>
<li>
<img src="adres drugiego obrazka"/>
<span>podpis pod drugim obrazkiem</span>
</li>
<li>
<img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span>
</li>
</ul>
</div>

Kod uzupełniamy w preferowane przez nas obrazki i tekst, który ma się pod nimi pojawić.
Szablon zapisujemy.

KROK I i 1/2 - opcjonalnie

Jeśli chcecie, by kliknięcie w slajd powodowało przeniesienie do jakiejś podstrony wystarczy nieco zmodyfikować kod. W takim przypadku każdy element z listy powinien prezentować się następująco:

<li>
<a href="link przekierowania"><img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span></a>
</li>

KROK II - CSS

Czas na edytowanie stylu naszego slidera.
Kierujemy się do panelu administracyjnego naszego bloga, by kolejno przenieść się do Dostosuj > Zaawansowane > Dodaj arkusz CSS
Tam też wklejamy i według preferencji edytujemy następujący kod:

#slajder {
    position: relative;
    overflow: hidden;
  }
  #slajder ul {
    position: relative;
    margin: 0;
    padding: 0;
  }
  #slajder ul li {
    position: relative;
    display: block;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 600px; /*szerokość slajdów*/
    height: 400px; /*wysokość slajdów*/
  }
  #slajder img {
    height: auto;
    max-width: 700px; /*maksymalna szerokość obrazków w slajdach*/
    min-width: 600px; /*minimalna szerokość obrazków w slajdach*/
    min-height: 400px; /*minimalna wysokość obrazków w slajdach*/
    position: relative;
  }
  #slajder li span {
      background-color: rgba(0, 0, 0, 0.5); /*kolor tła pod opisem naszego slajdu*/
      position: absolute;
      display: block;
      font-family: Arial; /*czcionka*/
      font-size: 16px; /*rozmiar czcionki slajdu*/
      text-transform: uppercase; /*zamienienie wszystkich liter na wielkie*/
      text-align: center; /*wyśrodkowanie tekstu*/
      padding: 10px; /*odległość tekstu od ramki*/
      color: white; /*kolor tekstu*/
      width: 580px; /*szerokość ramki z opisem slajdu (by była od brzegu do brzegu zdjęcia należy od szerokości slajdów odjąć 2x padding w odległości tekstu od ramki)*/
      z-index: 1 !important;
      bottom: 0px; /*odległość ramki z opisem od dolnej krawędzi zdjęcia*/
    }
    .poprzedni {
      background-color: rgba(0, 0, 0, 0.8); /*kolor tła pod strzałką kierującą nas do poprzedniego slajdu*/
      color: white; /*kolor tej strzałki*/
      cursor: pointer; /*zmiana kursora*/
      display: block;
      width: 15px; /*szerokość tła strzałki*/
      position: absolute;
      bottom: 180px; /*odległość omawianej strzałki od dolnej krawędzi*/
      z-index: 1;
      padding: 15px; /*odległość strzałki od ramek tła*/
      left: 0px; /*ustawienie strzałki po lewej stronie*/
    }
    .nastepny {
      background-color: rgba(0, 0, 0, 0.8); /*kolor tła pod strzałką kierującą nas do następnego slajdu*/
      color: white; /*kolor tej strzałki*/
      cursor: pointer; /*zmiana kursora*/
      display: block;
      width: 15px; /*szerokość tła strzałki*/
      position: absolute;
      bottom: 180px; /*odległość omawianej strzałki od dolnej krawędzi*/
      z-index: 1;
      padding: 15px; /*odległość strzałki od ramek tła*/
      right: 0px; /*ustawienie strzałki po prawej stronie*/
    }

Zmiany należy zastosować do bloga.

KROK III - JQUERY

Ostatnim co musimy zrobić jest dodanie kodu jQuery, który umożliwi slajderowi spełnianie swojej funkcji.
Kierujemy się, ponownie jak w pierwszym kroku do edytora kodu HTML, by po kliknięciu na obszar z kodem odnaleźć </head>. Tuż nad nim wklejamy następujący kod:

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
  jQuery(document).ready(function ($) {
   var slideCount = $('#slajder ul li').length;
   var slideWidth = $('#slajder ul li').width();
   var slideHeight = $('#slajder ul li').height();
   var slajderUlWidth = slideCount * slideWidth;
   $('#slajder').css({ width: slideWidth, height: slideHeight });
   $('#slajder ul').css({ width: slajderUlWidth, marginLeft: - slideWidth });
    $('#slajder ul li:last-child').prependTo('#slajder ul');
      function moveLeft() {
          $('#slajder ul').animate({
              left: + slideWidth
          }, 500, function () {
              $('#slajder ul li:last-child').prependTo('#slajder ul');
              $('#slajder ul').css('left', '');
          });
      };
      function moveRight() {
          $('#slajder ul').animate({
              left: - slideWidth
          }, 500, function () {
              $('#slajder ul li:first-child').appendTo('#slajder ul');
              $('#slajder ul').css('left', '');
          });
      };
      $('.poprzedni').click(function () {
          moveLeft();
      });
      $('.nastepny').click(function () {
          moveRight();
      });
  });
  </script>
Pogrubione wartości stanowią prędkość przesuwania się kolejnych zdjęć w milisekundach.

To wszystko ode mnie w dniu dzisiejszym.
Jestem Wam winna przeprosiny za częstotliwość postów na tym blogu, uwarunkowane to było niedoborem wolnego czasu. Teraz mam go dużo więcej i obiecuję, że teraz posty będą się pojawiały dużo częściej.
Zachęcam do komentowania! :)

źródła: [x][x][x][x][x]

15 komentarzy:

  1. obiecuję, postawię ci kiedyś pomnik, ale taki fest, pięciometrowy, z brązu.
    a potem będę się pod nim modlić.

    OdpowiedzUsuń
    Odpowiedzi
    1. Brzmi to trochę creepy...
      Ale dziękuję! :D

      Usuń
  2. A IĆ ty ;-;
    kiedyś próbowałam zrobić taki slajder, to wyszło jedno wielkie G... W wolnej chwili wypróbuję, bo chyba znowu zmienię główny u siebie, na coś prostego ;D

    OdpowiedzUsuń
    Odpowiedzi
    1. Troszkę czasu mi to zjadło. :) Pokmiń, pokmiń... Trzymam kciuki! :D

      Usuń
  3. Nadal się dziwię, jak ty to robisz *.*

    OdpowiedzUsuń
    Odpowiedzi
    1. Troszkę z tym pracy jest... :)
      Dziękuję za komentarz! :)

      Usuń
  4. Efekt cudowny jak te kociaczki na zdjęciach. :* Cutes <3

    OdpowiedzUsuń
  5. Mooaosd, jak zwykle epicko! :D
    Jak skończy się sesja, to będę sobie kombinować, o ile przejdę przez jutrzejsze egzaminy. :v Zastanawiam się nad jedną rzeczą... Bo mogę na razie przejrzeć to tylko powierzchownie. :(
    Otóż, jest gdzieś w tym kodzie magiczny fragmencik, odpowiadający za to, że jeżeli zwlekamy z kliknięciem, to obrazy przesuwają się samodzielnie po, przypuśćmy, dziesięciu sekundach? Bo o ile dobrze rozumiem zdanie pod kodami, chodzi o czas przesuwania się zdjęć podczas naszej ingerencji. :D Mogę źle rozumieć, od 3 dni siedzę nad stertami książek i nie rozróżniam już prawej od lewej. xD

    OdpowiedzUsuń
    Odpowiedzi
    1. W tym slajderze niestety obrazki nie będą przesuwały się samodzielnie. :)
      No, ale taki pokaz slajdów też z pewnością kiedyś zrobię, bo szczerze mówiąc wkręciłam się w to dość mocno i mam zamiar eksperymentować. ^^
      Pozdrawiam i dziękuję za komentarz!

      Usuń
  6. Bardzo wspaniała i przydatna instrukcja! Na pewno wykorzystam ją w następnym szablonie głównym.
    Zrobienie takiego slajdera to dla mnie czarna magia, serio. I cały czas jestem zdziwiona skąd u Ciebie tyle wiedzy i pomysłów! ;o Jestem pod ogromnym wrażeniem, kociaku! ;**

    Ale mam pytanie: Co zrobić by to nie nagłówek był slajderem, a sam gadżet tekstu?

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo dziękuję Ci za komentarz! :)
      Żeby ustawić taki slajder w gadżecie, a nie nagłówku należy wkleić kod HTML z kroku pierwszego do gadżetu HTML/Javascript, lub w sekcji HTML w gadżecie z tekstem. Reszta pozostaje bez zmian. :)

      Usuń
  7. Uratowałaś mnie tą instrukcją ^
    Próbowałam wcześniej ze slajderem ale jakoś nie wychodził:D
    Pracuję właśnie nad nowym szablonem głównym,który niedługo się pojawi.
    Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za komentarz. <3
      Trzymam kciuki żeby Ci się powiodło i nie mogę doczekać się efektów Twojej pracy! ^^

      Usuń
  8. Dlaczego kiedy próbuje wykonać pierwszy krok wyskakuje mi powiadomienie o treści "There should be one and only one skin in the template, and we found: 0"

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy