- Timestamp:
- 2021-01-25T16:08:18+13:00 (3 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/greenstone3/web/interfaces/default/transform/pages/classifier.xsl-for-gs311
r34646 r34721 126 126 127 127 <xsl:template name="Collage"> 128 129 <script language="javascript" type="text/javascript"> 130 <xsl:text disable-output-escaping="yes"> 131 window.onload=function(){getImages()}; 132 133 var _allImagesURLS = new Array(); 134 var _allDocids = new Array(); 135 136 var _allImages = new Array(); 137 138 var _collageDelayMsec = 5000; // used to be 10000 139 var currentImage; 140 var cFrameNum; 141 var timer; 142 //var Caption = "More Pre-history"; 143 144 function collageNextImage(collageFrameNum) 145 { 146 cFrameNum = collageFrameNum; 147 var wrapper = $("#collagewrapper"); 148 149 var wrapperWidth = wrapper.width(); 150 var wrapperHeight = wrapper.height(); 151 152 var image_i_pos = collageFrameNum % _allImages.length; 153 currentImage = _allImages[image_i_pos].clone(); 154 155 var imageHeight = currentImage[0].naturalHeight; 156 var imageWidth = currentImage[0].naturalWidth; 157 158 if ((imageHeight == 0) || (imageWidth == 0)) { 159 // looks like the image hasn't had time to load in yet 160 console.log("For image-frame-number=" + image_i_pos + ", zero dimension encountered => skipping" ); 161 } 162 else { 163 var x = Math.random() * (wrapperWidth - imageWidth); 164 var y = Math.random() * (wrapperHeight - imageHeight); 165 166 currentImage.css({position:"absolute", visibility:"visible", opacity:"1"}); 167 currentImage.offset({top:y, left:x}); 168 169 var doc_href = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + _allDocids[image_i_pos]; 170 var anchoredCurrentImage = $('<a>', {'href': doc_href, 'target': '_blank'} ); 171 anchoredCurrentImage.append(currentImage); 172 173 wrapper.append(anchoredCurrentImage); 174 175 currentImage.fadeTo(25000, 0, function() 176 { 177 $(this).css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"}); 178 }); 179 } 180 181 timer = setTimeout(function() 182 { 183 184 collageNextImage(collageFrameNum + 1); 185 }, _collageDelayMsec); 186 } 187 188 function initCollage() 189 { 190 for(var i = 0; i < _allImagesURLS.length; i++) 191 { 192 var wrapper = $("#collagewrapper"); 193 194 var newImage = $("<img>", {src:_allImagesURLS[i]}); 195 newImage.css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"}); 196 197 wrapper.append(newImage); 198 199 var wrapperHeight = 586; 200 if(window != window.top){wrapperHeight=400;} 201 var wrapperWidth = wrapper.width(); 202 203 var imageHeight = newImage.height(); 204 var imageWidth = newImage.width(); 205 206 if(imageWidth > wrapperWidth || imageHeight > wrapperHeight) 207 { 208 var xDifference = imageWidth - wrapperWidth; 209 var yDifference = imageHeight - wrapperHeight; 210 if(xDifference > yDifference) 211 { 212 newImage.width(wrapperWidth); 213 } 214 else 215 { 216 newImage.height(wrapperHeight); 217 } 218 } 219 _allImages.push(newImage); 220 } 221 222 223 } 224 225 function changeClick(){ 226 227 var div = document.getElementById("collagewrapper"); 228 div.onclick = function(){pause()}; 229 230 } 231 232 function pause(){ 233 234 currentImage.stop(); 235 clearTimeout(timer); 236 var div = document.getElementById("collagewrapper"); 237 div.onclick = function(){stopPause()}; 238 239 240 241 } 242 243 function stopPause(){ 244 245 currentImage.fadeTo(25000, 0, function() 246 { 247 $(this).css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"}); 248 }); 249 250 timer = setTimeout(function() 251 { 252 collageNextImage(cFrameNum + 1); 253 }, _collageDelayMsec); 254 255 256 changeClick() 257 } 258 259 function caption(event){ 260 261 var div = document.getElementById('collagewrapper'); 262 var node = document.createElement('div'); 263 node.style.top = event.layerY + 'px'; 264 node.style.left = event.layerX + 'px'; 265 node.style.textAlign = "center"; 266 node.style.background = "#FEFDE1"; 267 node.style.border = "1px solid black"; 268 node.style.position = "absolute"; 269 node.id = 'popBox'; 270 node.innerHTML = Caption; 271 div.appendChild(node); 272 273 } 274 275 function hideCaption(){ 276 node = document.getElementById('popBox'); 277 node.parentNode.removeChild(node); 278 } 279 280 281 </xsl:text> 282 </script> 283 <div id="collagewrapper" style="width: 800px; height: 643px; position: relative; background-image:url('sites/{$site_name}/collect/twso/images/oldimagebackground1.png'); text-align: center;" alt="Click to start/stop a collage of newspaper clippings" title="Click to start/stop a collage of newspaper clippings" onmouseover="" onmouseout=""><xsl:text> </xsl:text></div> 284 <!--<div id="text" style="text-align: center; background-color:#ffffff; background-color:rgba(255, 255, 255, 0.3)"> 285 <div id="textcontent"> 286 <h3>Hamilton Orchestral Society, 1903</h3>(precursor to the Trust Waikato Symphony Orchestra) 287 </div> 288 </div>--> 289 <script type="text/javascript"> 290 <xsl:text disable-output-escaping="yes"> 291 function getImages() 292 293 { 294 var extregex = ".*(jpg$|png$)"; 295 extregex = extregex.replace(/\|/g, "%7C"); 296 297 var url = gs.xsltParams.library_name + "?a=g&s=GetAllImagesInCollection&rt=r&s1.extregex="+extregex+"&s1.c=" + gs.cgiParams.c + "&o=xml"; 298 299 var callback = { 300 success: function(data) 301 { 302 var xml = data.responseXML; 303 304 var imageList = xml.getElementsByTagName("image"); 305 306 307 for(var i = 0; i < imageList.length; i++) 308 { 309 310 var imageElem = imageList[i]; 311 var docid = imageElem.getAttribute("docid"); 312 //console.log("****docid = " + docid); 313 var imageURL = imageElem.firstChild.nodeValue; 314 315 imageURL = imageURL.replace(/\\/gi, "/"); 316 imageURL = imageURL.replace(/%5C/gi, "/"); 317 318 imageURL = imageURL.substring(imageURL.indexOf("sites")); 319 // assoc file paths now need to start with the library name 320 _allImagesURLS.push("library/"+imageURL); 321 _allDocids.push(docid); 322 } 323 324 if(_allImagesURLS.length > 0) 325 { 326 initCollage(); 327 328 // start the collaging of the img tags 329 collageNextImage(0); 330 331 // Set a click handler on the collage-div to pause if clicked 332 console.log("*** currently supressing div click handler"); 333 //changeClick(); 334 335 } 336 }, 337 failed: function(data){alert("FAILED");} 338 }; 339 340 YAHOO.util.Connect.asyncRequest("GET", url , callback); 341 } 342 </xsl:text> 343 </script> 344 128 <script type="text/javascript" src="interfaces/{$interface_name}/js/collage_scripts.js"><xsl:text> </xsl:text></script> 129 <div id="collagewrapper" style="width: 800px; height: 643px; position: relative; background-image:url('sites/{$site_name}/collect/twso/images/oldimagebackground1.png'); text-align: center;" alt="Click to start/stop a collage of images" title="Click to start/stop a collage of images" onmouseover="" onmouseout=""><xsl:text> </xsl:text></div> 345 130 346 131 </xsl:template>
Note:
See TracChangeset
for help on using the changeset viewer.