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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testing the ThumbnailPicker</title>
<style type="text/css">
@import "../../../dijit/tests/css/dijitTests.css";
@import "../resources/image.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script>
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript" src="../ThumbnailPicker.js"></script>
<script type="text/javascript">
// dojo.require("dojox.image.Gallery");
dojo.require("dojox.data.FlickrRestStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.parser"); // find widgets
/*
Initializes the ThumbnailPicker with a data store that
reads from the Flickr REST APIs.
*/
function initFlickrGallery() {
var flickrRestStore = new dojox.data.FlickrRestStore();
var req = {
query: {
userid: "44153025@N00",//The Flickr user id to use
apikey: "8c6803164dbc395fb7131c9d54843627",//An API key is required.
sort: [
{
descending: true //Use descending sort order, ascending is default.
}
],
tags: ["superhorse", "redbones", "beachvolleyball","dublin","croatia"],
tag_mode: "any" //Match any of the tags
},
count: 20
};
//Set the flickr data store on two of the dojox.image.ThumbnailPicker widgets
dijit.byId('thumbPicker1').setDataStore(flickrRestStore, req);
dijit.byId('thumbPicker3').setDataStore(flickrRestStore, req);
}
/*
Initializes the second ThumbnailPicker widget with a data store that
reads information from a JSON URL. This also tells the ThumbnailPicker
the name of the JSON attributes to read from each data item retrieved
from the JSON URL.
*/
function initItemStoreGallery(){
var itemRequest = {
query: {},
count: 20
};
var itemNameMap = {
imageThumbAttr: "thumb",
imageLargeAttr: "large"
};
//Set the dojo.data.ItemFileReadStore on two of the dojox.image.ThumbnailPicker widgets
//Note the use of the 'itemNameMap', which tells the widget what attributes to
//read from the store. Look in the 'images.json' file in the same folder as this
//file to see the data being read by the widget.
dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap);
dijit.byId('thumbPicker4').setDataStore(imageItemStore, itemRequest, itemNameMap);
}
//Subscribe to clicks on the thumbnails, and print out the information provided
function doSubscribe(){
function updateDiv(packet){
dojo.byId('PublishedData').innerHTML = "You selected the thumbnail:"
+ "<br/><b>Index:</b> " + packet.index
+ "<br/><b>Url:</b> " + packet.url
+ "<br/><b>Large Url:</b> " + packet.largeUrl
+ "<br/><b>Title:</b> " + packet.title
+ "<br/><b>Link:</b> " + packet.link
;
};
//When an image in the ThumbnailPicker is clicked on, it publishes
//information on the image to a topic, whose name is found by calling
//the 'getTopicName' function on the widget.
dojo.subscribe(dijit.byId('thumbPicker1').getClickTopicName(), updateDiv);
dojo.subscribe(dijit.byId('thumbPicker2').getClickTopicName(), updateDiv);
}
dojo.addOnLoad(initFlickrGallery);
dojo.addOnLoad(initItemStoreGallery);
dojo.addOnLoad(doSubscribe);
</script>
</head>
<body>
<h1 class="testTitle">dojox.image.ThumbnailPicker</h1>
<div id="PublishedData" style="background-color:light-grey">
When you click on a thumbnail image, it's information is placed here
</div>
<h2>From FlickrRestStore:</h2>
This ThumbnailPicker should have 8 thumbnails, with each of them linking
to a URL when clicked on. The cursor should also change when over an image.
<div id="thumbPicker1" dojoType="dojox.image.ThumbnailPicker" size="500"
useHyperlink="true" ></div>
<h2>From ItemFileReadStore:</h2>
This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
open a URL, and the cursor should not change when over an image that is not an arrow.
<div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker" size="400"
isClickable="false"></div>
<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div>
<h2>From FlickrRestStore:</h2>
This ThumbnailPicker should have 6 thumbnails, with each of them linking
to a URL when clicked on. The cursor should also change when over an image.
Unlike the ThumbnailPicker above, when these links are clicked on, this page
changes, instead of a popup window.
<div id="thumbPicker3" dojoType="dojox.image.ThumbnailPicker" size="600"
useHyperLink="true" hyperlinkTarget="this"></div>
<h2>From ItemFileReadStore, and vertical:</h2>
This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
open a URL, and the cursor should not change when over an image that is not an arrow.
The thumbnails should also be aligned vertically.
<div id="thumbPicker4" dojoType="dojox.image.ThumbnailPicker" size="300"
isClickable="false" isHorizontal="false"></div>
</body>
</html>
|
