티스토리 뷰

웹프로그래밍/js

prototype & scriptaculous 이용한 간단한 slide show

공허공자 2009. 5. 7. 14:37

준비물

  • prototype.js
  • scriptaculous.js
  • slideshow.js (제일 아래 소스 있음)


사용예제 1)


HTML:
?
1
2
3
4
5
6
7
8
9
10
<div id="image-div-a"><img src="http://isth.search.nate.com:8080/search?pk=CYM_60328309_27241967/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240019%2f2009%2f5%2f2%2f74%2f872_rpdla4708.jpg" border="0"><div class="image-caption">설명 1</div></div>
<div id="image-div-b"><img src="http://isth.search.nate.com:8080/search?pk=CYM_60328309_27241937/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240004%2f2009%2f5%2f2%2f15%2f17_jerryhahn.jpg" border="0"><div class="image-caption">설명 2</div></div>
<div id="image-div-c"><img src="http://isth.search.nate.com:8080/search?pk=CYM_42292331_422658755/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240011%2f2009%2f4%2f9%2f28%2f%bf%f2%c2%a9+(140).gif" border="0"><div class="image-caption">설명 3</div></div>
<div id="image-div-d"><img src="http://isth.search.nate.com:8080/search?pk=CYM_53270287_254514422/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240004%2f2009%2f4%2f23%2f79%2f%a4%b1%a4%a4%a4%b7.jpg" border="0"><div class="image-caption">설명 4</div></div>     
 
<div id="counter"></div>
<div id="caption"></div>
 
<button id="PlayButton">Play</button>
<button id="PauseButton">Pause</button>

Javascript:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.observe('dom:loaded', function(){ 
    oMySlides = new iSlideShow({
        autostart   : true      // optional, boolean (default:true)
        start       : 0,        // optional, slides[start] (default:0)
        wait        : 4000,     // optional, milliseconds (default:4s)
        slides      : [
            'image-div-a',
            'image-div-b',
            'image-div-c',
            'image-div-d'
        ],
        counter     : 'counter-div-id', // optional...
        caption     : 'caption-div-id', // optional...     
        playButton  : 'PlayButton',     // optional (default:playButton)
        pauseButton : 'PauseButton',    // optional (default:PauseButton)
    });
});

사용예제 2)


HTML:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="photo">
    <div id="slideshow"></div>
    <ul>
        <li><img src="http://isth.search.nate.com:8080/search?pk=CYM_60328309_27241967/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240019%2f2009%2f5%2f2%2f74%2f872_rpdla4708.jpg" border="0"><div class="image-caption">설명 1</div></li>
        <li><img src="http://isth.search.nate.com:8080/search?pk=CYM_60328309_27241937/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240004%2f2009%2f5%2f2%2f15%2f17_jerryhahn.jpg" border="0"><div class="image-caption">설명 2</div></li>
        <li><img src="http://isth.search.nate.com:8080/search?pk=CYM_42292331_422658755/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240011%2f2009%2f4%2f9%2f28%2f%bf%f2%c2%a9+(140).gif" border="0"><div class="image-caption">설명 3</div></li>
        <li><img src="http://isth.search.nate.com:8080/search?pk=CYM_53270287_254514422/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f240004%2f2009%2f4%2f23%2f79%2f%a4%b1%a4%a4%a4%b7.jpg" border="0"><div class="image-caption">설명 4</div></li>
        <li><img src="http://isth.search.nate.com:8080/search?pk=CYM_40877514_356756466/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f260026%2f2009%2f3%2f4%2f90%2fbcv-syh7syh7.jpg" border="0"><div class="image-caption">설명 5</div></li>
        <li><img src="http://isth.search.nate.com:8080/search?pk=CYM_60328309_27515537/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f250009%2f2009%2f5%2f2%2f28%2fs4.jpg" border="0"><div class="image-caption">설명 6</div></li>
        <li><img src="http://isth.search.nate.com:8080/search?pk=CYM_42292331_426655531/http://cyimg24.cyworld.com/common/file_down.asp?redirect=%2f250032%2f2009%2f4%2f29%2f42%2f%bc%d2%b3%e0%bd%c3%b4%eb+(47).jpg" border="0"><div class="image-caption">설명 7</div></li>
    </ul>
    <div id="counter"></div>
    <div id="caption"></div>
</div>
 
<button id="PlayButton">Play</button>
<button id="PauseButton">Pause</button>
Javascript:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.observe('dom:loaded', function(){
    $('photo').down('ul').hide();   // container 사용시...
    oMySlides = new iSlideShow({
        autostart   : true      // optional, boolean (default:true)
        start       : 0,        // optional, slides[start] (default:0)
        wait        : 4000,     // optional, milliseconds (default:4s)
        slides      : $('photo').down('ul').select('li'),
        counter     : 'counter-div-id', // optional...
        caption     : 'caption-div-id', // optional...
        container   : 'slideshow',      // container 에 통째로 변경하여 보여줄때 (CSS와 크기제한에서 자유롭다.)
        playButton  : 'PlayButton',     // optional (default:playButton)
        pauseButton : 'PauseButton',    // optional (default:PauseButton)
    });
});

slideshow.js 소스

?
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/**
 *  Basic Slideshow App
 *
 *  Plagerised from Tom Doyle by Isotope Communications Ltd, Dec 2008
 *  http://www.tomdoyletalk.com/2008/10/28/simple-image-gallery-slideshow-with-scriptaculous-and-prototype/
 *
 *  Published [16/12/08]:
 *  http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/
 *
 *  Patched [07/05/09]:
 *  container 추가
 *
 *  Changes: Basically made it an object so that you can run multiple instances and so that
 *           it doesn't get interfered with by other scripts on the page.
 *
 *           Have also added a few things, like "Captions" and the option of changing the
 *           effects..
 *
 *  To start the slideshow:
 *      oMySlides.startSlideShow();
 *
 *  To skip forward, back, stop:
 *      oMySlides.goNext();
 *      oMySlides.goPrevious();
 *      oMySlides.stop();
**/
 
var iSlideShow = new Class.create();
 
iSlideShow.prototype = {
 
    initialize : function (oArgs){
        this.wait           = oArgs.wait ? oArgs.wait : 4000;
        this.start          = oArgs.start ? oArgs.start : 0;
        this.duration       = oArgs.duration ? oArgs.duration : 0.5;
        this.autostart      = (typeof(oArgs.autostart)=='undefined') ? true : oArgs.autostart;
        this.slides         = oArgs.slides;
        this.counter        = oArgs.counter;
        this.caption        = oArgs.caption;
        this.container      = oArgs.container;  // 통째로 변경
        this.playButton     = oArgs.playButton ? oArgs.playButton : 'PlayButton';
        this.pauseButton    = oArgs.pauseButton ? oArgs.pauseButton : 'PauseButton';
        this.iImageId       = this.start;
        if ( this.slides ) {
            this.numOfImages    = this.slides.length;
            if ( !this.numOfImages ) {
                alert('No slides?');
            }
            this.textIn = '1 / ' + this.numOfImages;
            this.updatecounter();
            if(this.container) this.swapImage(0,0);
        }
        if ( this.autostart ) {
            this.startSlideShow();
        }
    },
 
    // The Fade Function
    swapImage: function (x,y) {
        if(this.container) {
            $(this.container).update($(this.slides[x]).innerHTML).appear({ duration: this.duration, from:0.0, to:1.0 });
        } else {
            $(this.slides[x]) && $(this.slides[x]).appear({ duration: this.duration });
            $(this.slides[y]) && $(this.slides[y]).fade({ duration: this.duration });
        }
    },
 
    play: function () {
 
        var imageShow, imageHide;
 
        imageShow = this.iImageId+1;
        imageHide = this.iImageId;
 
        if (imageShow == this.numOfImages) {
            this.swapImage(0,imageHide);
            this.iImageId = 0;
        } else {
            this.swapImage(imageShow,imageHide);
            this.iImageId++;
        }
 
        this.textIn = this.iImageId+1 + ' / ' + this.numOfImages;
        this.updatecounter();
    },
 
    stop: function() {
        clearInterval(this.play);
        $(this.playButton) && $(this.playButton).appear({ duration: 0 });
        $(this.pauseButton) && $(this.pauseButton).hide();
    },
 
    goNext: function () {
        clearInterval(this.play);
        $(this.playButton) && $(this.playButton).appear({ duration: 0 });
        $(this.pauseButton) && $(this.pauseButton).hide();
 
        var imageShow, imageHide;
 
        imageShow = this.iImageId+1;
        imageHide = this.iImageId;
 
        if (imageShow == this.numOfImages) {
            this.swapImage(0,imageHide);
            this.iImageId = 0;
        } else {
            this.swapImage(imageShow,imageHide);
            this.iImageId++;
        }
 
        this.updatecounter();
    },
 
    goPrevious: function () {
        clearInterval(this.play);
        $(this.playButton) && $(this.playButton).appear({ duration: 0 });
        $(this.pauseButton) && $(this.pauseButton).hide();
 
        var imageShow, imageHide;
 
        imageShow = this.iImageId-1;
        imageHide = this.iImageId;
 
        if (this.iImageId == 0) {
            this.swapImage(this.numOfImages-1,imageHide);
            this.iImageId = this.numOfImages-1;
 
            //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
 
        } else {
            this.swapImage(imageShow,imageHide);
            this.iImageId--;
 
            //alert(imageShow + ' and ' + imageHide)
        }
 
        this.updatecounter();
    },
 
    updatecounter: function () {
        var textIn = this.iImageId+1 + ' / ' + this.numOfImages;
        $(this.counter) && ( $(this.counter).update(textIn) );
        if ( !$(this.container) && $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
            $(this.caption).update(oNewCaption.innerHTML);
        }
    },
 
    // the onload event handler that starts the fading.
    startSlideShow: function () {
        this.play = setInterval(this.play.bind(this),this.wait);
        $(this.playButton) && $(this.playButton).hide();
        $(this.pauseButton) && $(this.pauseButton).appear({ duration: 0 });
 
        this.updatecounter();
    }
}
저작자표시 동일조건

'웹프로그래밍 > js' 카테고리의 다른 글

모든 자바스크립트 오류를 디버그 콘솔에 던지기  (0) 2009.06.01
Shadowbox.js  (0) 2009.05.07
Floatbox (최고의 javascript windowing system)  (0) 2009.04.30
The Lightbox Clones Matrix  (0) 2009.04.30
Ferdinand.Slider  (0) 2009.04.23
공유하기 링크
댓글