Warning: fopen(/bb6d4c30b05a01c36fba42c7c33bb2462108c3b6) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/cc4eeb77668856d249dc02616ca01e9425a1ec1c) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/b48b3466aef5e1cf19b3fd9712dc6e90f35c6c29) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Tutorial ten napisał Kevin Liew na swoim blogu. Pokazuje jak łatwo można zrobić slider treści z użyciem jQuery.

Zasada działania jest bardzo prosta, mamy listę UL z trzema przyciskami, a każdy przycisk jest odniesieniem do prawego panelu. Do przechodzenia do odpowiedniego panelu używamy wtyczki scroll-To jQuery. Więcej o wtyczce dowiecie się tutaj – scrollTo plugin website.

s

HTML

HTML jest trochę długi tym razem. Właściwie składa się z dwóch sekcji.

1. Lista UL – Jest to lista przycisków, możesz dodać ich tyle ile chcesz, albo zmienić styl layoutu jak chcesz.
2. Slider – tutaj umieszczasz wszystkie treści z paneli, w tym przypadku mamy trzy panele z unikalnym ID. Chowamy panel za pomocą diva maski z overflow: hidden.

http://www.queness.com/scrollTo przesuwa element (pełniący role maski) na element, który chcemy wyświetlić. Działa to podobnie jak w photoshopie pokazując nam elementy, które chcemy widzieć a inne ukrywa. Wtyczka scrollTo wykorzystuje to i tak zawne “kotwice”. Składają się one z punktu i łącza. Łącze tonic innego jak link, czyli odsyłacz do punktu, który chcemy wyświetlić, jest nim tutaj ID panelu. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<div id="hero-slider">
    <ul>
        <li><a href="#" rel="#panel-1" class="active">Item 1</a></li>
        <li><a href="#" rel="#panel-2">Item 2</a></li>
        <li><a href="#" rel="#panel-3">Item 3</a></li>
    </ul>
    <div class="mask">
        <div class="slider-body">
            <div class="panel" id="panel-1">
                <h2>Title 1</h2>
                <p>Paragraph</p>
            </div>
            <div class="panel" id="panel-2">
                <h2>Title 2</h2>
                <p>Paragraph</p>
            </div>
            <div class="panel" id="panel-3">
                <h2>Title 3</h2>
                <p>Paragraph</p>
            </div>
        </div>
    </div> <!-- .mask -->
    <div class="clear"></div>
</div> <!-- #hero-slider -->

CSS

Najtrudniejszą częścią css jest maska. Musimy upewnić się, że overflow jest ustawiony tak by ukryć panele. Również wymiar panelu i maski musi być taki sam.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

#hero-slider {
    text-align:left;
    background-color:#efefef;
    border:1px solid #ccc; width:450px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    margin:0 auto;
    font-family:arial;
}   

#hero-slider .mask {
    float:left;
    width:300px;
    height:280px;
    margin:15px 0 0 10px;
    overflow:hidden;
}   

#hero-slider .panel {
    width:300px;
    height:280px;
    text-align:left;
}   

#hero-slider ul {
    margin:0;
    padding:15px 15px 0 15px;
    list-style:none;
    float:left;
    border-right:1px solid #dedede;
    height:285px;
}   

#hero-slider ul li {
    margin:10px 0;
}   

#hero-slider ul a {
    outline:none;
    text-decoration: underline;
    display:block;
    width:75px;
    height:74px;
    text-indent:-999em;
}   

#hero-slider a {
    background: url(button.png) no-repeat 0 0;
}   

#hero-slider ul a.active {
    background-position: -75px;
}   

.panel h2 {
    padding:15px 0 0 0;
    color:#0058a9;
}   

.panel p {
    color:#666;
}   

.clear {clear:both}

Javascript

JavaScript jest krótki i prosty, komentarze są wyjaśnieniem do każdej linii javascriptu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

//append click event to the UL list anchor tag
$('#hero-slider ul a').click(function () {   

    //reset all the items
    $('#hero-slider ul a').removeClass('active');   

    //set current item as active
    $(this).addClass('active');    

    //scroll it to the right position
    $('.mask').scrollTo($(this).attr('rel'), 300);   

    //disable click event
       return false;           

});

Konkluzja

Jest to prosty skrypt, który uczyni wasze witryny bardziej interaktywnymi. Najważniejsze jest to, że może on pomóc w korzystaniu z przestrzeni mądrze i wyświetlić informacje w ciekawy sposób. To proste, i wierzę, że będzie bardzo przydatny przy waszych projektach stron internetowych.

Autor: queness.com
Źródło: link