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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
if(!dojo._hasResource["dojox.image.Gallery"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.image.Gallery"] = true;
dojo.provide("dojox.image.Gallery");
dojo.experimental("dojox.image.Gallery");
//
// dojox.image.Gallery courtesy Shane O Sullivan, licensed under a Dojo CLA
// @author Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
//
// For a sample usage, see http://www.skynet.ie/~sos/photos.php
//
// TODO: Make public, document params and privitize non-API conformant methods.
// document topics.
dojo.require("dojo.fx");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.image.ThumbnailPicker");
dojo.require("dojox.image.SlideShow");
dojo.declare("dojox.image.Gallery",
[dijit._Widget, dijit._Templated],
{
// summary:
// Gallery widget that wraps a dojox.image.ThumbnailPicker and dojox.image.SlideShow widget
//
// imageHeight: Number
// Maximum height of an image in the SlideShow widget
imageHeight: 375,
// imageWidth: Number
// Maximum width of an image in the SlideShow widget
imageWidth: 500,
// pageSize: Number
// The number of records to retrieve from the data store per request.
pageSize: dojox.image.SlideShow.prototype.pageSize,
// autoLoad: Boolean
// If true, images are loaded before the user views them. If false, an
// image is loaded when the user displays it.
autoLoad: true,
// linkAttr: String
// Defines the name of the attribute to request from the store to retrieve the
// URL to link to from an image, if any.
linkAttr: "link",
// imageThumbAttr: String
// Defines the name of the attribute to request from the store to retrieve the
// URL to the thumbnail image.
imageThumbAttr: "imageUrlThumb",
// imageLargeAttr: String
// Defines the name of the attribute to request from the store to retrieve the
// URL to the image.
imageLargeAttr: "imageUrl",
// titleAttr: String
// Defines the name of the attribute to request from the store to retrieve the
// title of the picture, if any.
titleAttr: "title",
// slideshowInterval: Integer
// time in seconds, between image changes in the slide show.
slideshowInterval: 3,
templateString:"<div dojoAttachPoint=\"outerNode\" class=\"imageGalleryWrapper\">\n\t<div dojoAttachPoint=\"thumbPickerNode\"></div>\n\t<div dojoAttachPoint=\"slideShowNode\"></div>\n</div>\n",
postCreate: function(){
// summary: Initializes the widget, creates the ThumbnailPicker and SlideShow widgets
this.widgetid = this.id;
this.inherited(arguments)
this.thumbPicker = new dojox.image.ThumbnailPicker({
linkAttr: this.linkAttr,
imageLargeAttr: this.imageLargeAttr,
titleAttr: this.titleAttr,
useLoadNotifier: true,
size: this.imageWidth
}, this.thumbPickerNode);
this.slideShow = new dojox.image.SlideShow({
imageHeight: this.imageHeight,
imageWidth: this.imageWidth,
autoLoad: this.autoLoad,
linkAttr: this.linkAttr,
imageLargeAttr: this.imageLargeAttr,
titleAttr: this.titleAttr,
slideshowInterval: this.slideshowInterval,
pageSize: this.pageSize
}, this.slideShowNode);
var _this = this;
//When an image is shown in the Slideshow, make sure it is visible
//in the ThumbnailPicker
dojo.subscribe(this.slideShow.getShowTopicName(), function(packet){
//if(packet.index < _this.thumbPicker._thumbIndex
// || packet.index > _this.thumbPicker._thumbIndex + _this.thumbPicker.numberThumbs -1){
//if(!_this.thumbPicker.isVisible(packet.index)){
//var index = packet.index - (packet.index % _this.thumbPicker.numberThumbs);
_this.thumbPicker._showThumbs(packet.index);
//}
});
//When the user clicks a thumbnail, show that image
dojo.subscribe(this.thumbPicker.getClickTopicName(), function(evt){
_this.slideShow.showImage(evt.index);
});
//When the ThumbnailPicker moves to show a new set of pictures,
//make the Slideshow start loading those pictures first.
dojo.subscribe(this.thumbPicker.getShowTopicName(), function(evt){
_this.slideShow.moveImageLoadingPointer(evt.index);
});
//When an image finished loading in the slideshow, update the loading
//notification in the ThumbnailPicker
dojo.subscribe(this.slideShow.getLoadTopicName(), function(index){
_this.thumbPicker.markImageLoaded(index);
});
this._centerChildren();
},
setDataStore: function(dataStore, request, /*optional*/paramNames){
// summary: Sets the data store and request objects to read data from.
// dataStore:
// An implementation of the dojo.data.api.Read API. This accesses the image
// data.
// request:
// An implementation of the dojo.data.api.Request API. This specifies the
// query and paging information to be used by the data store
// paramNames:
// An object defining the names of the item attributes to fetch from the
// data store. The four attributes allowed are 'linkAttr', 'imageLargeAttr',
// 'imageThumbAttr' and 'titleAttr'
this.thumbPicker.setDataStore(dataStore, request, paramNames);
this.slideShow.setDataStore(dataStore, request, paramNames);
},
reset: function(){
// summary: Resets the widget to its initial state
this.slideShow.reset();
this.thumbPicker.reset();
},
showNextImage: function(inTimer){
// summary: Changes the image being displayed in the SlideShow to the next
// image in the data store
// inTimer: Boolean
// If true, a slideshow is active, otherwise the slideshow is inactive.
this.slideShow.showNextImage();
},
toggleSlideshow: function(){
// summary: Switches the slideshow mode on and off.
this.slideShow.toggleSlideshow();
},
showImage: function(index, /*optional*/callback){
// summary: Shows the image at index 'idx'.
// idx: Number
// The position of the image in the data store to display
// callback: Function
// Optional callback function to call when the image has finished displaying.
this.slideShow.showImage(index, callback);
},
_centerChildren: function() {
// summary: Ensures that the ThumbnailPicker and the SlideShow widgets
// are centered.
var thumbSize = dojo.marginBox(this.thumbPicker.outerNode);
var slideSize = dojo.marginBox(this.slideShow.outerNode);
var diff = (thumbSize.w - slideSize.w) / 2;
if(diff > 0) {
dojo.style(this.slideShow.outerNode, "marginLeft", diff + "px");
} else if(diff < 0) {
dojo.style(this.thumbPicker.outerNode, "marginLeft", (diff * -1) + "px");
}
}
});
}
|
