[34720] | 1 | window.onload=function(){ getImages() };
|
---|
| 2 |
|
---|
| 3 | var _allImagesURLS = new Array();
|
---|
| 4 | var _allDocids = new Array();
|
---|
| 5 |
|
---|
| 6 | var _allImages = new Array();
|
---|
| 7 |
|
---|
| 8 | var _collageDelayMsec = 4000; // used to be 10000
|
---|
| 9 | var _collageFadeTime = 25000;
|
---|
| 10 | var _oversizedHeightFrac = 0.9;
|
---|
| 11 | var _oversizedWidthFrac = 0.9;
|
---|
| 12 |
|
---|
| 13 | var clonedImageQueue = new Array();
|
---|
| 14 | var anchoredClonedImageQueue = new Array();
|
---|
| 15 |
|
---|
| 16 | var cFrameNum;
|
---|
| 17 | var timer;
|
---|
| 18 |
|
---|
| 19 | var COLLAGE_DEBUG = true;
|
---|
| 20 |
|
---|
| 21 | function removeClonedImage(clonedImage,anchoredClonedImage)
|
---|
| 22 | {
|
---|
| 23 | clonedImagePos = clonedImageQueue.indexOf(clonedImage);
|
---|
| 24 | if (clonedImagePos>=0) {
|
---|
| 25 | clonedImageQueue.splice(clonedImagePos,1); // del element from array
|
---|
| 26 | }
|
---|
| 27 | else {
|
---|
| 28 | // This shouldn't happen, unless there has been an issue with incorrectly removing an image
|
---|
| 29 | // from the Queue
|
---|
| 30 | if (COLLAGE_DEBUG) {
|
---|
| 31 | console.log("**** Warning: in unpause::remove() failed to file cloned collage image: ");
|
---|
| 32 | console.log(clonedImage);
|
---|
| 33 | }
|
---|
| 34 | }
|
---|
| 35 |
|
---|
| 36 | anchoredClonedImagePos = anchoredClonedImageQueue.indexOf(anchoredClonedImage);
|
---|
| 37 | if (anchoredClonedImagePos>=0) {
|
---|
| 38 | anchoredClonedImageQueue.splice(anchoredClonedImagePos,1); // del element from array
|
---|
| 39 | }
|
---|
| 40 | else {
|
---|
| 41 | // This shouldn't happen, unless there has been an issue with incorrectly removing an image
|
---|
| 42 | // from the Queue
|
---|
| 43 | if (COLLAGE_DEBUG) {
|
---|
| 44 | console.log("**** Warning: failed to file anchored cloned collage image: " + anchoredClonedImage);
|
---|
| 45 | }
|
---|
| 46 | }
|
---|
| 47 |
|
---|
| 48 | anchoredClonedImage.remove();
|
---|
| 49 | }
|
---|
| 50 |
|
---|
| 51 |
|
---|
| 52 | function scaleOversizedImage(newImage,imageWidth,imageHeight,wrapperWidthThreshold,wrapperHeightThreshold)
|
---|
| 53 | {
|
---|
| 54 | var xDifference = imageWidth - wrapperWidthThreshold;
|
---|
| 55 | var yDifference = imageHeight - wrapperHeightThreshold;
|
---|
| 56 |
|
---|
| 57 | //console.log("xDifference = " + xDifference);
|
---|
| 58 | //console.log("yDifference = " + yDifference);
|
---|
| 59 |
|
---|
| 60 | var xScaleDown = 1;
|
---|
| 61 | if (xDifference>0) {
|
---|
| 62 | // oversized by width
|
---|
| 63 | xScaleDown = Math.ceil(imageWidth / wrapperWidthThreshold);
|
---|
| 64 | }
|
---|
| 65 |
|
---|
| 66 | var yScaleDown = 1;
|
---|
| 67 | if (yDifference>0) {
|
---|
| 68 | // oversized by height
|
---|
| 69 | yScaleDown = Math.ceil(imageHeight / wrapperHeightThreshold);
|
---|
| 70 | }
|
---|
| 71 |
|
---|
| 72 | var maxScaleDown = Math.max(xScaleDown,yScaleDown);
|
---|
| 73 |
|
---|
| 74 | // ****
|
---|
| 75 | //console.log("**** scaling down by: " + maxScaleDown);
|
---|
| 76 |
|
---|
| 77 | newImage.height(imageHeight / maxScaleDown);
|
---|
| 78 | newImage.width(imageWidth / maxScaleDown);
|
---|
| 79 | }
|
---|
| 80 |
|
---|
| 81 | function collageNextImage(collageFrameNum)
|
---|
| 82 | {
|
---|
| 83 | collageFrameNum = collageFrameNum % _allImages.length; // keep counter cyclic
|
---|
| 84 | cFrameNum = collageFrameNum;
|
---|
| 85 |
|
---|
| 86 | var wrapper = $("#collagewrapper");
|
---|
| 87 |
|
---|
| 88 | var wrapperWidth = wrapper.width();
|
---|
| 89 | var wrapperHeight = wrapper.height();
|
---|
| 90 | //console.log("wrapperWidth = " + wrapperWidth);
|
---|
| 91 | //console.log("wrapperHeight = " + wrapperHeight);
|
---|
| 92 |
|
---|
| 93 | var image_i_pos = collageFrameNum;
|
---|
| 94 | var clonedImage = _allImages[image_i_pos].clone();
|
---|
| 95 |
|
---|
| 96 | var imageWidth = clonedImage[0].width;
|
---|
| 97 | var imageHeight = clonedImage[0].height;
|
---|
| 98 | //console.log("ImageWidth = " + imageWidth);
|
---|
| 99 | //console.log("ImageHeight = " + imageHeight);
|
---|
| 100 |
|
---|
| 101 | if ((imageHeight == 0) || (imageWidth == 0)) {
|
---|
| 102 | // looks like the image hasn't had time to load in yet
|
---|
| 103 | console.log("For image-frame-number=" + image_i_pos + ", zero dimension encountered => skipping" );
|
---|
| 104 | }
|
---|
| 105 | else {
|
---|
| 106 |
|
---|
| 107 | var wrapperWidthThreshold = wrapperWidth * _oversizedWidthFrac;
|
---|
| 108 | var wrapperHeightThreshold = wrapperHeight * _oversizedHeightFrac;
|
---|
| 109 |
|
---|
| 110 | //console.log("wrapperWidthThreshold = " + wrapperWidthThreshold);
|
---|
| 111 | //console.log("wrapperHeightThreshold = " + wrapperHeightThreshold);
|
---|
| 112 |
|
---|
| 113 | if (imageWidth > wrapperWidthThreshold || imageHeight > wrapperHeightThreshold)
|
---|
| 114 | {
|
---|
| 115 | scaleOversizedImage(clonedImage,imageWidth,imageHeight,wrapperWidthThreshold,wrapperHeightThreshold);
|
---|
| 116 | // Need to update width and height, as scaledOversizedImage changes this
|
---|
| 117 | imageWidth = clonedImage.width();
|
---|
| 118 | imageHeight = clonedImage.height();
|
---|
| 119 |
|
---|
| 120 | // ****
|
---|
| 121 | //console.log("new ImageWidth = " + imageWidth);
|
---|
| 122 | //console.log("new ImageHeight = " + imageHeight);
|
---|
| 123 |
|
---|
| 124 | }
|
---|
| 125 |
|
---|
| 126 | var x = Math.random() * (wrapperWidth - imageWidth);
|
---|
| 127 | var y = Math.random() * (wrapperHeight - imageHeight);
|
---|
| 128 | //console.log("var x = " + x);
|
---|
| 129 | //console.log("var y = " + y);
|
---|
| 130 |
|
---|
| 131 | clonedImage.css({position:"absolute", visibility:"visible", opacity:"1"});
|
---|
| 132 | clonedImage.offset({top:y, left:x});
|
---|
| 133 |
|
---|
| 134 | var doc_href = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + _allDocids[image_i_pos];
|
---|
| 135 | var anchoredClonedImage = $('<a>', {'href': doc_href, 'target': '_blank'} );
|
---|
| 136 | anchoredClonedImage.append(clonedImage);
|
---|
| 137 |
|
---|
| 138 | wrapper.append(anchoredClonedImage);
|
---|
| 139 |
|
---|
| 140 | var queue_next_free_pos = clonedImageQueue.length;
|
---|
| 141 | clonedImageQueue.push(clonedImage);
|
---|
| 142 | anchoredClonedImageQueue.push(anchoredClonedImage);
|
---|
| 143 |
|
---|
| 144 | clonedImage.fadeTo(_collageFadeTime, 0, function() {
|
---|
| 145 | removeClonedImage(clonedImage,anchoredClonedImage);
|
---|
| 146 | });
|
---|
| 147 | }
|
---|
| 148 |
|
---|
| 149 | timer = setTimeout(function() {
|
---|
| 150 | collageNextImage(collageFrameNum + 1);
|
---|
| 151 | }, _collageDelayMsec);
|
---|
| 152 | }
|
---|
| 153 |
|
---|
| 154 |
|
---|
| 155 | function initCollage()
|
---|
| 156 | {
|
---|
| 157 | var wrapper = $("#collagewrapper");
|
---|
| 158 | var wrapperHeight = wrapper.height();
|
---|
| 159 | var wrapperWidth = wrapper.width();
|
---|
| 160 |
|
---|
| 161 | for (var i=0; i<_allImagesURLS.length; i++) {
|
---|
| 162 |
|
---|
| 163 | var newImage = $("<img>", {src:_allImagesURLS[i]});
|
---|
| 164 | newImage.css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});
|
---|
| 165 |
|
---|
| 166 | wrapper.append(newImage);
|
---|
| 167 |
|
---|
| 168 | _allImages.push(newImage);
|
---|
| 169 | }
|
---|
| 170 | }
|
---|
| 171 |
|
---|
| 172 |
|
---|
| 173 |
|
---|
| 174 | function pause()
|
---|
| 175 | {
|
---|
| 176 | // console.log("**** pause()");
|
---|
| 177 |
|
---|
| 178 | if (clonedImageQueue.length > 0) {
|
---|
| 179 | var queue_len = clonedImageQueue.length;
|
---|
| 180 | for (var i=0; i<queue_len; i++) {
|
---|
| 181 | var clonedImage = clonedImageQueue[i];
|
---|
| 182 | clonedImage.stop(true,false); // clearQueue=true, jumpToEnd=false
|
---|
| 183 | }
|
---|
| 184 | }
|
---|
| 185 | clearTimeout(timer);
|
---|
| 186 |
|
---|
| 187 | var div = document.getElementById("collagewrapper");
|
---|
| 188 | div.onclick = function(){ unpause() };
|
---|
| 189 | }
|
---|
| 190 |
|
---|
| 191 |
|
---|
| 192 | function callbackClosure(clonedImageI, anchoredClonedImageI, callback) {
|
---|
| 193 | return function() {
|
---|
| 194 | return callback(clonedImageI, anchoredClonedImageI);
|
---|
| 195 | }
|
---|
| 196 | }
|
---|
| 197 |
|
---|
| 198 | function unpause()
|
---|
| 199 | {
|
---|
| 200 | //console.log("**** unpause()");
|
---|
| 201 |
|
---|
| 202 | if (clonedImageQueue.length > 0) {
|
---|
| 203 | var queue_len = clonedImageQueue.length;
|
---|
| 204 | for (var i=0; i<queue_len; i++) {
|
---|
| 205 |
|
---|
| 206 | var clonedImageI = clonedImageQueue[i];
|
---|
| 207 | var anchoredClonedImageI = anchoredClonedImageQueue[i];
|
---|
| 208 |
|
---|
| 209 | var opacity = clonedImageI.css('opacity');
|
---|
| 210 | var fade_time = opacity * _collageFadeTime;
|
---|
| 211 | /*
|
---|
| 212 | clonedImageI.fadeTo(fade_time, 0,
|
---|
| 213 | callbackClosure(clonedImageI, anchoredClonedImageI,
|
---|
| 214 | function(clonedImageJ, anchoredClonedImageJ) {
|
---|
| 215 | //console.log("***** unpause delayed remove with clonedImage:!");
|
---|
| 216 | //console.log(clonedImageJ);
|
---|
| 217 | removeClonedImage(clonedImageJ,anchoredClonedImageJ)
|
---|
| 218 | })
|
---|
| 219 | );
|
---|
| 220 | */
|
---|
| 221 | clonedImageI.fadeTo(fade_time, 0,
|
---|
| 222 | callbackClosure(clonedImageI, anchoredClonedImageI, removeClonedImage)
|
---|
| 223 | );
|
---|
| 224 | }
|
---|
| 225 | }
|
---|
| 226 |
|
---|
| 227 | timer = setTimeout(function() {
|
---|
| 228 | collageNextImage(cFrameNum + 1);
|
---|
| 229 | }, _collageDelayMsec);
|
---|
| 230 |
|
---|
| 231 |
|
---|
| 232 | var div = document.getElementById("collagewrapper");
|
---|
| 233 | div.onclick = function(){ pause() };
|
---|
| 234 | }
|
---|
| 235 |
|
---|
| 236 |
|
---|
| 237 | function getImages()
|
---|
| 238 | {
|
---|
| 239 | var extregex = ".*(jpg$|png$)";
|
---|
| 240 | extregex = extregex.replace(/\|/g, "%7C");
|
---|
| 241 |
|
---|
| 242 | var url = gs.xsltParams.library_name + "?a=g&s=GetAllImagesInCollection&rt=r&s1.extregex="+extregex+"&s1.c=" + gs.cgiParams.c + "&o=xml";
|
---|
| 243 | var callback = {
|
---|
| 244 | success: function(data)
|
---|
| 245 | {
|
---|
| 246 | var xml = data.responseXML;
|
---|
| 247 |
|
---|
| 248 | var imageList = xml.getElementsByTagName("image");
|
---|
| 249 |
|
---|
| 250 |
|
---|
| 251 | for(var i = 0; i < imageList.length; i++)
|
---|
| 252 | {
|
---|
| 253 |
|
---|
| 254 | var imageElem = imageList[i];
|
---|
| 255 | var docid = imageElem.getAttribute("docid");
|
---|
| 256 | //console.log("****docid = " + docid);
|
---|
| 257 | var imageURL = imageElem.firstChild.nodeValue;
|
---|
| 258 |
|
---|
| 259 | imageURL = imageURL.replace(/\\/gi, "/");
|
---|
| 260 | imageURL = imageURL.replace(/%5C/gi, "/");
|
---|
| 261 |
|
---|
| 262 | imageURL = imageURL.substring(imageURL.indexOf("sites"));
|
---|
| 263 | // assoc file paths now need to start with the library name
|
---|
| 264 | _allImagesURLS.push("library/"+imageURL);
|
---|
| 265 | _allDocids.push(docid);
|
---|
| 266 | }
|
---|
| 267 |
|
---|
| 268 | if(_allImagesURLS.length > 0)
|
---|
| 269 | {
|
---|
| 270 | initCollage();
|
---|
| 271 | var collagewrapper = document.getElementById("collagewrapper");
|
---|
| 272 | collagewrapper.onclick = function(){ pause() };
|
---|
| 273 |
|
---|
| 274 | // start the collaging of the img tags
|
---|
| 275 | collageNextImage(0);
|
---|
| 276 |
|
---|
| 277 |
|
---|
| 278 | }
|
---|
| 279 | },
|
---|
| 280 | failed: function(data){alert("Failed to retrieve list of images to collage from Greenstone3 server");}
|
---|
| 281 | };
|
---|
| 282 |
|
---|
| 283 | YAHOO.util.Connect.asyncRequest("GET", url , callback);
|
---|
| 284 | }
|
---|