1window.addEventListener('load', slideShow, false); 2window.addEventListener('load', slideShowPowerImages, false); 3 4 5function slideShow() { 6 7 /* GLOBALS **********************************************************************************************/ 8 var globals = { 9 images: ["images/IMG_5310.jpg", "images/IMG_5409.jpg", "images/header.jpg", "images/header1.jpg", "images/header2.jpg", "images/header3.jpg", "images/header4.jpg", "images/header5.jpg", "images/header6.jpg" ], 10 iTotalImages:8, //"images/homepage/chairperson.jpg", 11 slideDelay: 4000, // The time interval between consecutive slides. 12 fadeDelay: 35, // The time interval between individual opacity changes. This should always be much smaller than slideDelay. 13 wrapperID: "slideShowImages", // The ID of the <div> element that contains all of the <img> elements to be shown as a slide show. 14 buttonID: "slideShowButton", // The ID of the <button> element that toggles the slide show on and off. 15 prevButtonID: "prevSlide", 16 nextButtonID: "nextSlide", 17 buttonStartText: "Play", // Text used in the slide show toggle button. 18 buttonStopText: "Pause", // Text used in the slide show toggle button. 19 wrapperObject: null, // Will contain a reference to the <div> element that contains all of the <img> elements to be shown as a slide show. 20 buttonObject: null, // If present, will contain a reference to the <button> element that toggles the slide show on and off. The initial assumption is that there is no such button element (hence the false value). 21 prevButtonObject:null, 22 nextButtonObject:null, 23 slideImages: [], // Will contain all of the slide image objects. 24 slideShowID: null, // A setInterval() ID value used to stop the slide show. 25 slideShowRunning: true, // Used to record when the slide show is running and when it's not. The slide show is always initially running. 26 slideIndex: 0 // The index of the current slide image. 27 } 28 29 /* MAIN *************************************************************************************************/ 30 31 initializeGlobals(); 32 33 if ( insufficientSlideShowMarkup() ) { 34 return; // Insufficient slide show markup - exit now. 35 } 36 37 // Assert: there's at least one slide image. 38 39 if (globals.slideImages.length == 1) { 40 return; // The solo slide image is already being displayed - exit now. 41 } 42 43 // Assert: there's at least two slide images. 44 45 initializeSlideShowMarkup(); 46 47 globals.wrapperObject.addEventListener('click', toggleSlideShow, false); // If the user clicks a slide show image, it toggles the slide show on and off. 48 49 if (globals.buttonObject) { 50 globals.buttonObject.addEventListener('click', toggleSlideShow, false); // This callback is used to toggle the slide show on and off. 51 } 52 53 if (globals.prevButtonObject) { 54 //globals.prevButtonObject.textContent = "PREV"; 55 globals.prevButtonObject.addEventListener('click', showPrevSlide, false); 56 } 57 if (globals.nextButtonObject) { 58 //globals.nextButtonObject.textContent = "NEXT"; 59 globals.nextButtonObject.addEventListener('click', showNextSlide, false); 60 } 61 62 startSlideShow(); 63 64 /* FUNCTIONS ********************************************************************************************/ 65 66 function initializeGlobals() { 67 globals.wrapperObject = (document.getElementById(globals.wrapperID) ? document.getElementById(globals.wrapperID) : null); 68 globals.buttonObject = (document.getElementById(globals.buttonID) ? document.getElementById(globals.buttonID) : null); 69 globals.prevButtonObject = (document.getElementById(globals.prevButtonID) ? document.getElementById(globals.prevButtonID) : null); 70 globals.nextButtonObject = (document.getElementById(globals.nextButtonID) ? document.getElementById(globals.nextButtonID) : null); 71 72 73 if (globals.wrapperObject) { 74 //globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []); 75 for (var i = 0; i < globals.iTotalImages; i++) { 76 77 var sImage = document.createElement('img'); 78 sImage.setAttribute('src', globals.images[i]); 79 sImage.setAttribute('width', "720"); 80 sImage.setAttribute('height', "360"); 81 82 document.getElementById(globals.wrapperID).appendChild(sImage); 83 } 84 globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []); 85 } 86 } // initializeGlobals 87 88 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 89 90 function insufficientSlideShowMarkup() { 91 if (!globals.wrapperObject) { // There is no wrapper element whose ID is globals.wrapperID - fatal error. 92 if (globals.buttonObject) {
93 globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element when present. 94 } 95 return true; 96 } 97 98 if (!globals.slideImages.length) { // There needs to be at least one slide <img> element - fatal error. 99 if (globals.wrapperObject) { 100 globals.wrapperObject.style.display = "none"; // Hide the not needed <div> wrapper element. 101 } 102 103 if (globals.buttonObject) { 104 globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element. 105 } 106 107 return true; 108 } 109 110 return false; // The markup expected by this library seems to be present. 111 } // insufficientSlideShowMarkup 112 113 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 114 115 function initializeSlideShowMarkup() { 116 var slideWidthMax = maxSlideWidth(); // Returns a value that is always in pixel units. 117 var slideHeightMax = maxSlideHeight(); // Returns a value that is always in pixel units. 118 119 globals.wrapperObject.style.position = "relative"; 120 globals.wrapperObject.style.overflow = "hidden"; // This is just a safety thing. 121 globals.wrapperObject.style.width = slideWidthMax + "px"; 122 globals.wrapperObject.style.height = slideHeightMax + "px"; 123 124 var slideCount = globals.slideImages.length; 125 for (var i = 0; i < slideCount; i++) { 126 globals.slideImages[i].style.opacity = 0; 127 globals.slideImages[i].style.position = "absolute"; 128 globals.slideImages[i].style.top = (slideHeightMax - globals.slideImages[i].getBoundingClientRect().height) / 2 + "px"; 129 globals.slideImages[i].style.left = (slideWidthMax - globals.slideImages[i].getBoundingClientRect().width) / 2 + "px"; 130 } 131 132 globals.slideImages[0].style.opacity = 1; // Make the first slide visible. 133 134 if (globals.buttonObject) { 135 //globals.buttonObject.textContent = globals.buttonStopText; 136 //globals.buttonObject.setAttribute(src, "images/pause.jpg"); 137 document.getElementById("slideShowButton").src = "images/pause.jpg"; 138 } 139 } // initializeSlideShowMarkup 140 141 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 142 143 function maxSlideWidth() { 144 var maxWidth = 0; 145 var maxSlideIndex = 0; 146 var slideCount = globals.slideImages.length; 147 148 for (var i = 0; i < slideCount; i++) { 149 if (globals.slideImages[i].width > maxWidth) { 150 maxWidth = globals.slideImages[i].width; // The width of the widest slide so far. 151 maxSlideIndex = i; // The slide with the widest width so far. 152 } 153 } 154 return globals.slideImages[maxSlideIndex].getBoundingClientRect().width; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels. 155 } // maxSlideWidth 156 157 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 158 159 function maxSlideHeight() { 160 var maxHeight = 0; 161 var maxSlideIndex = 0; 162 var slideCount = globals.slideImages.length; 163 164 for (var i = 0; i < slideCount; i++) { 165 if (globals.slideImages[i].height > maxHeight) { 166 maxHeight = globals.slideImages[i].height; // The height of the tallest slide so far. 167 maxSlideIndex = i; // The slide with the tallest height so far. 168 } 169 } 170 return globals.slideImages[maxSlideIndex].getBoundingClientRect().height; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels. 171 } // maxSlideHeight 172 173 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 174 175 function startSlideShow() { 176 globals.slideShowID = setInterval(transitionSlides, globals.slideDelay); 177 } // startSlideShow 178 179 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 180 181 function haltSlideShow() { 182 clearInterval(globals.slideShowID); 183 } // haltSlideShow 184 185 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 186 187 function toggleSlideShow() { 188 if (globals.slideShowRunning) { 189 haltSlideShow(); 190 if (globals.buttonObject) { 191 //globals.buttonObject.textContent = globals.buttonStartText;
192 //globals.buttonObject.setAttribute(src, "images/play.jpg"); 193 document.getElementById("slideShowButton").src = "images/play.jpg"; 194 } 195 } 196 else { 197 startSlideShow(); 198 if (globals.buttonObject) { 199 //globals.buttonObject.textContent = globals.buttonStopText; 200 //globals.buttonObject.setAttribute(src, "images/pause.jpg"); 201 document.getElementById("slideShowButton").src = "images/pause.jpg"; 202 } 203 } 204 globals.slideShowRunning = !(globals.slideShowRunning); 205 } // toggleSlideShow 206 207 function showPrevSlide() { 208 209 haltSlideShow(); 210 var currentSlide = globals.slideImages[globals.slideIndex]; 211 212 --(globals.slideIndex); 213 if (globals.slideIndex < 0) { 214 globals.slideIndex = globals.slideImages.length - 1; 215 } 216 217 var prevSlide = globals.slideImages[globals.slideIndex]; 218 currentSlide.style.opacity = 0; 219 prevSlide.style.opacity = 1; 220 221 if(globals.slideShowRunning) 222 startSlideShow(); 223 } 224 225 function showNextSlide() { 226 227 haltSlideShow(); 228 var currentSlide = globals.slideImages[globals.slideIndex]; 229 230 ++(globals.slideIndex); 231 if (globals.slideIndex >= globals.slideImages.length) { 232 globals.slideIndex = 0; 233 } 234 235 var nextSlide = globals.slideImages[globals.slideIndex]; 236 currentSlide.style.opacity = 0; 237 nextSlide.style.opacity = 1; 238 239 if (globals.slideShowRunning) 240 startSlideShow(); 241 } 242 243 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 244 245 function transitionSlides() { 246 var currentSlide = globals.slideImages[globals.slideIndex]; 247 248 ++(globals.slideIndex); 249 if (globals.slideIndex >= globals.slideImages.length) { 250 globals.slideIndex = 0; 251 } 252 253 var nextSlide = globals.slideImages[globals.slideIndex]; 254 255 var currentSlideOpacity = 1; // Fade the current slide out. 256 var nextSlideOpacity = 0; // Fade the next slide in. 257 var opacityLevelIncrement = 1 / globals.fadeDelay; 258 var fadeActiveSlidesID = setInterval(fadeActiveSlides, globals.fadeDelay); 259 260 function fadeActiveSlides() { 261 currentSlideOpacity -= opacityLevelIncrement; 262 nextSlideOpacity += opacityLevelIncrement; 263 264 if (currentSlideOpacity >= 0 && nextSlideOpacity <= 1) { 265 currentSlide.style.opacity = currentSlideOpacity; 266 nextSlide.style.opacity = nextSlideOpacity; 267 } 268 else { 269 currentSlide.style.opacity = 0; 270 nextSlide.style.opacity = 1; 271 clearInterval(fadeActiveSlidesID); 272 } 273 } // fadeActiveSlides 274 } // transitionSlides 275} // slideShow 276 277 278function slideShowPowerImages() { 279 280 /* GLOBALS **********************************************************************************************/ 281 var globals = { 282 images: ["images/header.jpg", "images/header1.jpg", "images/header2.jpg", "images/header3.jpg", "images/header4.jpg", "images/header5.jpg"], 283 iTotalImages: 6, 284 slideDelay: 4000, // The time interval between consecutive slides. 285 fadeDelay: 35, // The time interval between individual opacity changes. This should always be much smaller than slideDelay.
286 wrapperID: "slideShowPowerImages", // The ID of the <div> element that contains all of the <img> elements to be shown as a slide show. 287 buttonID: "slideShowPlayPauseButton", // The ID of the <button> element that toggles the slide show on and off. 288 prevButtonID: "prevSlide", 289 nextButtonID: "nextSlide", 290 buttonStartText: "Play", // Text used in the slide show toggle button. 291 buttonStopText: "Pause", // Text used in the slide show toggle button. 292 wrapperObject: null, // Will contain a reference to the <div> element that contains all of the <img> elements to be shown as a slide show. 293 buttonObject: null, // If present, will contain a reference to the <button> element that toggles the slide show on and off. The initial assumption is that there is no such button element (hence the false value). 294 prevButtonObject: null, 295 nextButtonObject: null, 296 slideImages: [], // Will contain all of the slide image objects. 297 slideShowID: null, // A setInterval() ID value used to stop the slide show. 298 slideShowRunning: true, // Used to record when the slide show is running and when it's not. The slide show is always initially running. 299 slideIndex: 0 // The index of the current slide image. 300 } 301 302 /* MAIN *************************************************************************************************/ 303 304 initializeGlobals(); 305 306 if (insufficientSlideShowMarkup()) { 307 return; // Insufficient slide show markup - exit now. 308 } 309 310 // Assert: there's at least one slide image. 311 312 if (globals.slideImages.length == 1) { 313 return; // The solo slide image is already being displayed - exit now. 314 } 315 316 // Assert: there's at least two slide images. 317 318 initializeSlideShowMarkup(); 319 320 globals.wrapperObject.addEventListener('click', toggleSlideShow, false); // If the user clicks a slide show image, it toggles the slide show on and off. 321 322 if (globals.buttonObject) { 323 globals.buttonObject.addEventListener('click', toggleSlideShow, false); // This callback is used to toggle the slide show on and off. 324 } 325 326 if (globals.prevButtonObject) { 327 //globals.prevButtonObject.textContent = "PREV"; 328 globals.prevButtonObject.addEventListener('click', showPrevSlide, false); 329 } 330 if (globals.nextButtonObject) { 331 //globals.nextButtonObject.textContent = "NEXT"; 332 globals.nextButtonObject.addEventListener('click', showNextSlide, false); 333 } 334 335 startSlideShow(); 336 337 /* FUNCTIONS ********************************************************************************************/ 338 339 function initializeGlobals() { 340 globals.wrapperObject = (document.getElementById(globals.wrapperID) ? document.getElementById(globals.wrapperID) : null); 341 globals.buttonObject = (document.getElementById(globals.buttonID) ? document.getElementById(globals.buttonID) : null); 342 globals.prevButtonObject = (document.getElementById(globals.prevButtonID) ? document.getElementById(globals.prevButtonID) : null); 343 globals.nextButtonObject = (document.getElementById(globals.nextButtonID) ? document.getElementById(globals.nextButtonID) : null); 344 345 346 if (globals.wrapperObject) { 347 //globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []); 348 for (var i = 0; i < globals.iTotalImages; i++) { 349 350 var sImage = document.createElement('img'); 351 sImage.setAttribute('src', globals.images[i]); 352 sImage.setAttribute('width', "950"); 353 sImage.setAttribute('height', "450"); 354 355 document.getElementById(globals.wrapperID).appendChild(sImage); 356 } 357 globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []); 358 } 359 } // initializeGlobals 360 361 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 362 363 function insufficientSlideShowMarkup() { 364 if (!globals.wrapperObject) { // There is no wrapper element whose ID is globals.wrapperID - fatal error. 365 if (globals.buttonObject) {
366 globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element when present. 367 } 368 return true; 369 } 370 371 if (!globals.slideImages.length) { // There needs to be at least one slide <img> element - fatal error. 372 if (globals.wrapperObject) { 373 globals.wrapperObject.style.display = "none"; // Hide the not needed <div> wrapper element. 374 } 375 376 if (globals.buttonObject) { 377 globals.buttonObject.style.display = "none"; // Hide the not needed slide show button element. 378 } 379 380 return true; 381 } 382 383 return false; // The markup expected by this library seems to be present. 384 } // insufficientSlideShowMarkup 385 386 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 387 388 function initializeSlideShowMarkup() { 389 var slideWidthMax = maxSlideWidth(); // Returns a value that is always in pixel units. 390 var slideHeightMax = maxSlideHeight(); // Returns a value that is always in pixel units. 391 392 globals.wrapperObject.style.position = "relative"; 393 globals.wrapperObject.style.overflow = "hidden"; // This is just a safety thing. 394 globals.wrapperObject.style.width = slideWidthMax + "px"; 395 globals.wrapperObject.style.height = slideHeightMax + "px"; 396 397 var slideCount = globals.slideImages.length; 398 for (var i = 0; i < slideCount; i++) { 399 globals.slideImages[i].style.opacity = 0; 400 globals.slideImages[i].style.position = "absolute"; 401 globals.slideImages[i].style.top = (slideHeightMax - globals.slideImages[i].getBoundingClientRect().height) / 2 + "px"; 402 globals.slideImages[i].style.left = (slideWidthMax - globals.slideImages[i].getBoundingClientRect().width) / 2 + "px"; 403 } 404 405 globals.slideImages[0].style.opacity = 1; // Make the first slide visible. 406 407 if (globals.buttonObject) { 408 //globals.buttonObject.textContent = globals.buttonStopText; 409 //globals.buttonObject.setAttribute(src, "images/pause.jpg"); 410 document.getElementById("slideShowPlayPauseButton").src = "images/pause.jpg"; 411 } 412 } // initializeSlideShowMarkup 413 414 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 415 416 function maxSlideWidth() { 417 var maxWidth = 0; 418 var maxSlideIndex = 0; 419 var slideCount = globals.slideImages.length; 420 421 for (var i = 0; i < slideCount; i++) { 422 if (globals.slideImages[i].width > maxWidth) { 423 maxWidth = globals.slideImages[i].width; // The width of the widest slide so far. 424 maxSlideIndex = i; // The slide with the widest width so far. 425 } 426 } 427 return globals.slideImages[maxSlideIndex].getBoundingClientRect().width; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels. 428 } // maxSlideWidth 429 430 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 431 432 function maxSlideHeight() { 433 var maxHeight = 0; 434 var maxSlideIndex = 0; 435 var slideCount = globals.slideImages.length; 436 437 for (var i = 0; i < slideCount; i++) { 438 if (globals.slideImages[i].height > maxHeight) { 439 maxHeight = globals.slideImages[i].height; // The height of the tallest slide so far. 440 maxSlideIndex = i; // The slide with the tallest height so far. 441 } 442 } 443 return globals.slideImages[maxSlideIndex].getBoundingClientRect().height; // Account for the image's border, padding, and margin values. Note that getBoundingClientRect() is always in units of pixels. 444 } // maxSlideHeight 445 446 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 447 448 function startSlideShow() { 449 globals.slideShowID = setInterval(transitionSlides, globals.slideDelay); 450 } // startSlideShow 451 452 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 453 454 function haltSlideShow() { 455 clearInterval(globals.slideShowID); 456 } // haltSlideShow 457 458 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 459 460 function toggleSlideShow() { 461 if (globals.slideShowRunning) { 462 haltSlideShow(); 463 if (globals.buttonObject) { 464 //globals.buttonObject.textContent = globals.buttonStartText;
465 //globals.buttonObject.setAttribute(src, "images/play.jpg"); 466 document.getElementById("slideShowPlayPauseButton").src = "images/play.jpg"; 467 } 468 } 469 else { 470 startSlideShow(); 471 if (globals.buttonObject) { 472 //globals.buttonObject.textContent = globals.buttonStopText; 473 //globals.buttonObject.setAttribute(src, "images/pause.jpg"); 474 document.getElementById("slideShowPlayPauseButton").src = "images/pause.jpg"; 475 } 476 } 477 globals.slideShowRunning = !(globals.slideShowRunning); 478 } // toggleSlideShow 479 480 function showPrevSlide() { 481 482 haltSlideShow(); 483 var currentSlide = globals.slideImages[globals.slideIndex]; 484 485 --(globals.slideIndex); 486 if (globals.slideIndex < 0) { 487 globals.slideIndex = globals.slideImages.length - 1; 488 } 489 490 var prevSlide = globals.slideImages[globals.slideIndex]; 491 currentSlide.style.opacity = 0; 492 prevSlide.style.opacity = 1; 493 494 if (globals.slideShowRunning) 495 startSlideShow(); 496 } 497 498 function showNextSlide() { 499 500 haltSlideShow(); 501 var currentSlide = globals.slideImages[globals.slideIndex]; 502 503 ++(globals.slideIndex); 504 if (globals.slideIndex >= globals.slideImages.length) { 505 globals.slideIndex = 0; 506 } 507 508 var nextSlide = globals.slideImages[globals.slideIndex]; 509 currentSlide.style.opacity = 0; 510 nextSlide.style.opacity = 1; 511 512 if (globals.slideShowRunning) 513 startSlideShow(); 514 } 515 516 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 517 518 function transitionSlides() { 519 var currentSlide = globals.slideImages[globals.slideIndex]; 520 521 ++(globals.slideIndex); 522 if (globals.slideIndex >= globals.slideImages.length) { 523 globals.slideIndex = 0; 524 } 525 526 var nextSlide = globals.slideImages[globals.slideIndex]; 527 528 var currentSlideOpacity = 1; // Fade the current slide out. 529 var nextSlideOpacity = 0; // Fade the next slide in. 530 var opacityLevelIncrement = 1 / globals.fadeDelay; 531 var fadeActiveSlidesID = setInterval(fadeActiveSlides, globals.fadeDelay); 532 533 function fadeActiveSlides() { 534 currentSlideOpacity -= opacityLevelIncrement; 535 nextSlideOpacity += opacityLevelIncrement; 536 537 if (currentSlideOpacity >= 0 && nextSlideOpacity <= 1) { 538 currentSlide.style.opacity = currentSlideOpacity; 539 nextSlide.style.opacity = nextSlideOpacity; 540 } 541 else { 542 currentSlide.style.opacity = 0; 543 nextSlide.style.opacity = 1; 544 clearInterval(fadeActiveSlidesID); 545 } 546 } // fadeActiveSlides 547 } // transitionSlides 548} // slideShow
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.