Użytkownicy polubili slidery przy prezentowaniu ciekawych wiadomości z witryny. Są efektowne, wprowadzają interakcję i mogą „schować” sporo treści. 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
- (zapisz jako…)
- (zapisz jako…)
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 tonagłó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!
