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 : "
\n",
postCreate : function() {
// summary: Initializes the widget, creates the ThumbnailPicker and
// SlideShow widgets
this.widgetid = this.id;
this.inherited("postCreate", arguments)
this.thumbPicker = new dojox.image.ThumbnailPicker({
linkAttr : this.linkAttr,
imageLargeAttr : this.imageLargeAttr,
titleAttr : this.titleAttr,
useLoadNotifier : true
}, 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");
}
}
});
}