Przewijarka (slider) newsów w jQuery

Autor: Tomasz "DoMeL" Wojciechowski, dodano: 21-04-2010
Kategoria: Programowanie i tworzenie

Użytkownicy polubili slidery przy prezentowaniu ciekawych wiadomości z witryny. Są efektowne, wprowadzają interakcję i mogą "schować" sporo treści. jQuery daje nieograniczone możliwości przy tworzeniu takich elementów. Oto jeden z nich.

Zanim zaczniemy, musimy ściągnąć bibliotekę jQuery oraz plugin jQuery Flow.

Download

 
Pliki te umieszczamy w tym samym katalogu co plik index. Pierwszym krokiem będzie osadzenie w sekcji <head> skryptów odpowiedzialnych za działanie oraz wywołanie skryptu. Do sekcji <head> wstawiamy kolejno poniższy kod:
 
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.flow.1.1.min.js" type="text/javascript"></script>
 
  • jquery-1.4.2.js - jest to biblioteka jQuery niezbędna do uzyskania naszego efektu;
  • jquery.flow.1.1.min.js - odpowiedzialny za działanie skryptu, zawarte są w nim wszystkie parametry odnośnie naszego Flow (prędkość przewijania i inne funkcje).
 
Następnym krokiem jest dodanie trzeciego skryptu, który jest odpowiedzialny za wywołanie oraz odpowiednie działanie naszego Flow.
 
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "900px",
height: "250px"
});
});
</script>
 
Sekcję <head> mamy już za sobą. Teraz musimy napisać nasze ciało dokumentu. W sekcji <body>, która odpowiedzialna jest za wyświetlanie treści na stronie umieszczamy poniższy kod:
 
<div id="container">
    <div id="controller" class="hidden">
       <span class="jFlowControl"></span>
       <span class="jFlowControl"></span>
       <span class="jFlowControl"></span>
    </div>

  <div id="slides">

   <div>
      <div class="featured-text">
        <h1 class="featured">
            featured text here 01
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod 
            vel euismod   tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae 
            turpis augue. Nulla facilisi.  Continue Reading...
        </p>
   </div>
   <div id="featured-image01">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
   </div>

 <div>
      <div class="featured-text">
        <h1 class="featured">
            featured text here 01
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod 
            vel euismod   tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae 
            turpis augue. Nulla facilisi.  Continue Reading...
        </p>
   </div>
   <div id="featured-image02">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
   </div>

 <div>
      <div class="featured-text">
        <h1 class="featured">
            featured text here 01
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod 
            vel euismod   tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae 
            turpis augue. Nulla facilisi.  Continue Reading...
        </p>
   </div>
   <div id="featured-image03">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
   </div>
 </div>
</div>

Przyjrzyjmy się bliżej naszemu kodowi

<div class="featured-text"> - sekcja odpowiedzialna za wyświetlanie się tekstu, w naszym wypadku jest to
nagłówek oraz treść;
 
<h1 class="featured"> ... </h1> - sekcja ta odpowiedzialna jest za nagłówek;
 
Pomiędzy <p> a </p> umieszczamy naszą treść, która wyświetlana będzie pod naszym nagłówkiem;
 
<div id="featured-image02"> - sekcja odpowiedzialna za wyświetlanie się obrazka;
 
<div class="featured-buttons"> oraz <div class="featured-btn"> - ta część kodu odpowiada za wyświetlanie oraz prawidłowe działanie naszych przycisków wstecz oraz dalej;
 
<div class="featured-btn"> - wyświetlanie oraz prawidłowe działanie przycisku dalej;
 
<img src="next_btn.png" alt="Next" class="jFlowNext" /> - obrazek użyty do funkcji dalej;
 
<div class="featured-btn"> - wyświetlanie oraz prawidłowe działanie przycisku wstecz;
 
<img src="prev_btn.png" alt="Previous" class="jFlowPrev" /> - obrazek użyty do funkcji wstecz;
 
Pozostaje nam teraz dodanie obrazków oraz ostylowanie (nadanie stylu oraz poprawne wyświetlanie).

Wykorzystane grafiki

Do naszego efektu użyjemy poniższych obrazków, które umieściliśmy w tym samym katalogu:
 
 
 
 
oraz przyciski do przewijania manualnego:
 
  

Tworzymy style CSS

Teraz czas na magię css! W pliku odpowiedzialnym za style umieszczamy poniższy kod:
 
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
        color: #ffffff;}

p {
font-size: 0.7em;
line-height: 18px;
text-align: justify;}

h1 {
color: #ffffff;
text-transform: uppercase;
font-size: 1.1em;
font-weight: normal;}

#container {
width: 900px;
margin: 0px auto;}

#featured-image01 {
background-image: url(featured_image.png);}

#featured-image02 {
background-image: url(featured_image2.png);}

#featured-image03 {
background-image: url(featured_image3.png);}

.featured-text {
float: left;
width: 450px;
margin-top: 25px;}

#featured-image01, #featured-image02, #featured-image03 {
float: right;
width: 449px;
height: 214px;
background-repeat: no-repeat;
background-position: right;}

#featured-image {
float: right;
width: 449px;
background-image: url(images/featured_image.png);
background-repeat: no-repeat;
background-position: right;
height: 214px;}

.featured-buttons {
height: 144px;
width: 34px;
margin-left: 75px;
padding-top: 70px;}

.hidden {
display: none;}

Efekt końcowy 

Jak widzimy, obrazki nie są wyświetlane z sekcji <body> lecz jako tło. Bardzo ważnym atrybutem w naszym przypadku jest ostatnia sekcja CSS, która odpowiada za poprawne wyświetlanie. I właściwie to wszystko. Nasz efekt prezentuje się następująco:
 
 

Jak dodać nową pozycję?

Na początku musimy dodać linijkę:
<span class="jFlowControl"></span>
do sekcji: 
<div id="controller" class="hidden">
 
Odpowiada ona za samo wyświetlanie. Następnym krokiem jest dodanie poniższego kodu aby skrypt mógł wyświetlić naszą nową pozycję:
 
<div>
      <div class="featured-text">
        <h1 class="featured">
            Tytul
        </h1>
        <p>
            tresc
        </p>
   </div>
   <div id="webinside">
      <div class="featured-buttons">
          <div class="featured-btn">
              <img src="next_btn.png" alt="Next" class="jFlowNext" />
                  <div class="featured-btn">
                      <img src="prev_btn.png" alt="Previous" class="jFlowPrev" />
                  </div>
          </div>
      </div>
   </div>
</div>
 
Uwaga!
Dodając sekcję <div id="webinside"> ... </div> musimy do pliku .css dodać:
 
#webinside
 
Powinno wyglądać to mniej więcej tak:
 
#featured-image01, #featured-image02, #featured-image03, #webinside {
float: right;
width: 449px;
height: 214px;
background-repeat: no-repeat;
background-position: right;}
 
Drugą czynnością, którą musimy wykonać jest dodanie do pliku .css kodu:
 
#webinside {
background-image: url(sciezka do obrazka);}
 
I to wszystko. Zapraszamy jak zawsze do eksperymentowania z jQuery i wdrażania własnych pomysłów. Swoje uwagi możecie zamieszczać w komentarzach poniżej.
 
Powodzenia!

 

Ocena 2.74/5 (54.84%) (500 głosów)

Komentarze:

  • Nie działa w Chrome
    Dodał: Gość data: 2010-05-19
    Dlaczego na mojej stronie działa we wszystkich przeglądarkach, tylko nie w chrome? Dodam, że przykładowy skrypt do tego artykułu, działa bez problemu...

  • Dodał: DoMeL data: 2010-05-20
    Może gdzieś błąd popełniasz?

  • Dodał: Gośćiu data: 2010-05-30
    No jak, skoro działa mi w innych przeglądarkach...

  • Dodał: Gośćiu data: 2010-06-02
    Napiszę, jak rozwiązałem mój problem:

    Problem powodowało, to że główny div strony miał w html'u atrybut 'alig="center', po usunięciu działa już pod Chrome(Safari też wcześniej protestowała, teraz jest dobrze). Diva wyśrodkowałem w css, nie ma problemu.

    Zastanawia mnie czemu to miało wpływa na działanie tego slidera w Chrome i Safari...

    Pozdrawiam!
  • alkazercer
    Dodał: Gość data: 2010-06-17
    Uważam że używanie takich sliderów powinno być ustawowo zabronione gdyż wymusza poziome przewijanie które z założenia jest złe. Może być stosowane jedynie na stronach domowych artystów i upośledzonych umysłowo właścicieli dużych koncernów.
  • Aleś wypalił
    Dodał: Gość data: 2010-08-19
    alkazercer aleś wypalił. "dlatego, że z założenia jest złe" buhahaha. Z założenia to przewijanie poziome ale paskiem przeglądarki jest złe(jak ci się strona nie mieści i musisz przewinąć paskiem przeglądarki żeby zobaczyć całość). Musisz być jednym z tych upośledzonych chyba.
  • Automatyczne przewijanie
    Dodał: Gość data: 2010-08-26
    A jak zrobić żeby slajdy przewijały się automatycznie?
  • slider pionowy
    Dodał: szymisiu data: 2011-02-10
    Bardzo fajny tutorial. Gratulacje. Jestem w trakcie robienia znajomym stronki na sliderze pionowym, tylko w IE rozwala się menu. Może ktoś pomoże?
    www.fletissimo.web44.net
  • Przwiejanie
    Dodał: emilo1 data: 2011-02-28
    Można zrobić żeby było automatyczne?

  • Dodał: dachu data: 2011-04-29
    podoba sie
  • nie dziala w php?
    Dodał: adas90 data: 2011-05-01
    WITAM, mam pytanie, jesli moze mi ktoś pomoc.. - co mam zrobić, żeby zadziałało mi to w pliku .php ?? Probowalem, ale tylko w html dziala. Ktoś podpowie ?
  • nie dziala poprawnie na innym komputerze
    Dodał: qbass data: 2011-06-22
    slider nie dziala poprawnie na komputerze kolegi. mamy te same przegladarki (nie jestem pewien czy wersje tez), ale np. inne rozdzielczosci monitora. czy to ma w ogle jakis wplyw skoro wszystko jest ustawione w cms? ma ktos jakis pomysl?
  • czy to działa w extreme fusion?
    Dodał: wiedxma data: 2011-08-18
    witam, chciałam się dowiedzieć czy ten slider napisany w ten sposób będzie działał na extreme fusion a jeśli nie to jakich modyfikacji należy dokonać zeby działał?
  • Pytanko
    Dodał: Gość data: 2011-09-05
    Hejka, a jak zrobić autoscroll??
  • slider
    Dodał: Gość data: 2012-05-18
    A jak zrobić by np slider wyświetlał losowe ogłoszenia z puli ogłoszeń promowanych? Zeby sam pobierał treść z bazy i umieszczał na stronie?


  • slider
    Dodał: Gość data: 2013-02-23
    czy da się przycisk pev/next zakodować tak, by nie przenosił do poprzedniego/następnego slajdu, a do konkretnego ustalonego odgórnie? zeby powstały takie przyciski 1,2,3,4 i po nacisnieciu odpowiedniego numerka przenosi do takiego slajdu.
  • test
    Dodał: Gość data: 2013-04-29
    testtest


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.