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:
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:
Kod uzupełniamy w preferowane przez nas obrazki i tekst, który ma się pod nimi pojawić.
Szablon zapisujemy.
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:
Zmiany należy zastosować do bloga.
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:
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]
Czytaj dalej >>
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>Pogrubione wartości stanowią prędkość przesuwania się kolejnych zdjęć w milisekundach.
<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>
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]
