-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
155 lines (141 loc) · 5.88 KB
/
index.html
File metadata and controls
155 lines (141 loc) · 5.88 KB
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="mud(tm) - Takashi Okamoto" />
<meta name="copyright" content="2008 BuzaMoto. All rights reserved." />
<!-- (c) 2008 BuzaMoto. All rights reserved. -->
<title>BuzaMoto: ImageFadeGallery</title>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css" media="screen" />
<script src="javascripts/prototype.js" language="JavaScript" type="text/javascript"></script>
<script src="javascripts/BM_ImageFadeGallery.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
////////////////////////////////////////////////////////////////////////////////
// INIT
var gallery;
function ifg_init() {
gallery = new com.buzamoto.ImageFadeGallery.Gallery('gallery',[
{
src: "images/300x400.png",
title: "Image 0",
caption: "This is the first image."
},
{
src: "images/400x300.png",
title: "Image 1",
caption: "This is the second image."
},
{
src: "images/300x400.png",
title: "Image 2",
caption: "This is the third image."
},
{
src: "images/400x300.png",
title: "Image 3",
caption: "This is the last image."
}
], {startNum: 2, preload: true, autoplay: 0});
}
////////////////////////////////////////////////////////////////////////////////
// EVENTS
Event.observe(window, 'load', ifg_init, false);
</script>
</head>
<body>
<div id="header">
<a href="http://buzamoto.com">BuzaMoto</a> | JavaScript Collection | ImageFadeGallery Version
<script type="text/javascript">
document.write(com.buzamoto.ImageFadeGallery.Version);
</script>
</div>
<div id="content">
<p class="tagline">
<strong>ImageFadeGallery</strong> is a simple JavaScript-based image viewer. Perfect for displaying images on your site.
</p>
<ul>
<li><a href="#usage">Usage</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#download">Download</a></li>
</ul>
<h2><a name="usage">Usage</a></h2>
<p>
1. Within the <head>, you need to set up the gallery when the page loads:
<pre>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/BM_ImageFadeGallery.js"></script>
<script type="text/javascript">
// Construct array of images you want to include.
// Each image is an object consisting of src, title and captions.
// src is the only required field.
var arrayOfImages = [
{src: 'images/a.jpg', title: 'Image A', caption: 'This is image A!'},
{src: 'images/b.jpg', title: 'Image B', caption: 'This is image B!'},
{src: 'images/c.jpg', title: 'Image C', caption: 'This is image C!'}
];
// Create new gallery.
// usage: com.buzamoto.ImageFadeGallery.Gallery(id, imageArray);
// id: The id of the <img> for the gallery.
// imageArray: array of images included in the gallery.
var gallery;
Event.observe(window, 'load', function() {
gallery = new com.buzamoto.ImageFadeGallery.Gallery('gallery', arrayOfImages);
});
</script>
</pre>
2. Inside <body>, we need include a <img>, and some controls.
<pre>
// Only next and prev buttons are required.
// Note the naming of the element ids. They all start with id of the gallery frame:
// i.e. idOfFrame_title, idOfFrame_next, etc...
<img id="gallery" src="" alt="image display" />
<ul>
<li><a href="#" id="gallery_prev">Prev</a> | <a href="#" id="gallery_next">Next</a></li>
<li>
<!-- use the goto* where * is an integer to set which image in the imageArray to show -->
<a href="#" id="gallery_goto0">0</a> /
<a href="#" id="gallery_goto1">1</a> /
<a href="#" id="gallery_goto2">2</a> /
<a href="#" id="gallery_goto3">3</a>
</li>
<li><!-- use start for starting and stop for stopping autoplay -->
<a href="#" id="gallery_start">Start</a> /
<a href="#" id="gallery_stop">Stop</a>
</li>
<li id="gallery_title"></li>
<li id="gallery_caption"></li>
<li id="gallery_number"></li>
</ul>
</pre>
</p>
<h2><a name="examples">Examples</a></h2>
<div id="gallery-wrapper" class="gallery" style="width: 100%; height: 400px;">
<div id="gallery-image-wrapper" style="float: left; width: 400px; height: 400px;">
<img id="gallery" src="" alt="image display" />
</div>
<div id="gallery-controller-wrapper" style="float: left; margin-left: 10px; width: 200px;">
<ul>
<li><strong>controlling with prev/next</strong></li>
<li><a href="#" id="gallery_prev">Prev</a> | <a href="#" id="gallery_next">Next</a></li>
<li><strong>control to specific image</strong></li>
<li><a href="#" id="gallery_goto0">0</a> / <a href="#" id="gallery_goto1">1</a> / <a href="#" id="gallery_goto2">2</a> / <a href="#" id="gallery_goto3">3</a></li>
<li><strong>autoplay</strong></li>
<li><a href="#" id="gallery_start">Start</a> / <a href="#" id="gallery_stop">Stop</a></li>
<li id="gallery_title" style="font-weight: bold;"></li>
<li id="gallery_caption"></li>
<li id="gallery_number"></li>
</ul>
</div>
</div>
<h2><a name="download">Download</a></h2>
Get the latest version from <a href="http://github.com">github</a>:<br />
<pre>git clone git://github.com/mud/imagefadegallery.git</pre>
</div>
<div id="footer-wrapper">
<div id="footer">
<span>© 2008 <a href="http://buzamoto.com">BuzaMoto</a>. All rights reserved.</span>
</div>
</div>
</body>
</html>