MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda


SYAMSUDINNAMAKU telah hadir

Membuat Vertical Auto Slide jQuery


Vertical Auto Slide jQuery ini sama halnya dengan
Horizontal Auto Slide jQuery. Yang membedakannya
adalah pada posisinya. Bila pada yang lalu horizontal,
maka yang sekarang adalah vertical. Satu perbedaan-
nya lagi terletak pada penempatan kodenya. Untuk
Vertical Auto Slide jQuery ini, selain penempatan
kodenya bisa seperti pada yang Horizontal, bisa juga
langsung diletakkan pada sidebar. Previewnya dapat
anda lihat, kurang lebihnya seperti di bawah ini :








Untuk membuatnya, seperti yang telah dikatakan di atas,
cukup hanya menambahkan gadget HTML/JavaScript
kemudian masukkanlah kode berikut dalam kontennya.


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

<script type="text/javascript" src="http://h1.ripway.com/syamsudin/banner-autoslide.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
        
        //options( 1 - ON , 0 - OFF)
        var auto_slide = 1;
            var hover_pause = 1;
        var key_slide = 1;
        
        //speed of auto slide(
        var auto_slide_seconds = 5000;
        /* IMPORTANT: i know the variable is called ...seconds but it's 
        in milliseconds ( multiplied with 1000) '*/
        
        /*move he last list item before the first item. The purpose of this is 
        if the user clicks to slide left he will be able to see the last item.*/
        $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
        
        //check if auto sliding is enabled
        if(auto_slide == 1){
            /*set the interval (loop) to call function slide with option 'right' 
            and set the interval time to the variable we declared previously */
            var timer = setInterval('slide("right")', auto_slide_seconds); 
            
            /*and change the value of our hidden field that hold info about
            the interval, setting it to the number of milliseconds we declared previously*/
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }
  
        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list 
            $('#carousel_ul').hover(function(){
                //stop the interval
                clearInterval(timer)
            },function(){
                //and when mouseout start it again
                timer = setInterval('slide("right")', auto_slide_seconds); 
            });
  
        }
  
        //check if key sliding is enabled
        if(key_slide == 1){
            
            //binding keypress function
            $(document).bind('keypress', function(e) {
                //keyCode for left arrow is 37 and for right it's 39 '
                if(e.keyCode==37){
                        //initialize the slide to left function
                        slide('left');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide('right');
                }
            });

        }
        
        
  });

//FUNCTIONS BELLOW

//slide function  
function slide(where){
    
            //get the item width
            var item_width = $('#carousel_ul li').outerWidth() + 10;
            
            /* using a if statement and the where variable check 
            we will check where the user wants to slide (left or right)*/
            if(where == 'left'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
            
            }
            
            
            //make the sliding effect using jQuery's animate function... '
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                /* when the animation finishes use the if statement again, and make an ilussion
                of infinity by changing place of last or first item*/
                if(where == 'left'){
                    //...and if it slided to left we put the last item before the first item
                    $('#carousel_ul li:first').before($('#carousel_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
                }
                
                //...and then just get back the default left indent
                $('#carousel_ul').css({'left' : '-210px'});
            });
            
            }
  
</script>
<style type="text/css"></style>


<center>
<div id='carousel_container'>
<ul><div id='top_scroll'><a href='javascript:slide("top");'><img src='http://i1128.photobucket.com/albums/m486/syamsudin1/top_scroll.png' /></a></div></ul>
    <div id='carousel_inner'>
        <ul id='carousel_ul'>
            <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item1.png' /></a></li>
            <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item2.png' /></a></li>
            <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item3.png' /></a></li>

            <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item4.png' /></a></li>
            <li><a href='#'><img src='http://web.enavu.com/demos/carousel_revisited/item5.png' /></a></li>
            
        </ul>
    </div>
<ul><div id='bottom_scroll'><a href='javascript:slide("bottom");'><img src='http://i1128.photobucket.com/albums/m486/syamsudin1/bottom_scroll.png' /></a></div></ul>
<input type='hidden' id='hidden_auto_slide_seconds' value=0 />
</div></center>

KETERANGAN :

Ganti 5 (lima) gambar contoh di atas dengan
gambar kepunyaan anda.

Ubahlah ukuran pada kode tersebut dan sesuaikan
dengan gambar slide yang anda miliki.

Agar anda tidak terlalu repot, disarankan agar anda
mengubah saja ukuran gambar anda dengan me-
nyesuaikan ukuran gambar contoh di atas.

Namun bila anda ingin mencoba untuk mengutak-atik
kodenya, maka silahkan saja dan tidak ada salahnya.

Selamat mencoba.
Semoga berhasil, good luck!


0 comments:

Poskan Komentar