--- /dev/null
+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");
+ }
+ }
+});
+
+}
projects / eow / blobdiff