Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
shared:home [2022/09/10 12:03] justin |
shared:home [2022/09/14 20:41] justin |
||
|---|---|---|---|
| Line 77: | Line 77: | ||
| .page #changingImage img.bottom { | .page #changingImage img.bottom { | ||
| position:absolute; | position:absolute; | ||
| - | opacity:0 | + | opacity:0; |
| -webkit-transition: opacity 1s ease-in-out; | -webkit-transition: opacity 1s ease-in-out; | ||
| -moz-transition: opacity 1s ease-in-out; | -moz-transition: opacity 1s ease-in-out; | ||
| Line 178: | Line 178: | ||
| // transition time should be longer than the style sheet | // transition time should be longer than the style sheet | ||
| // has for changing the opacity | // has for changing the opacity | ||
| - | transitionTime = 2500; | + | transitionTime = 2000; |
| // function changes the images from top to bottom and then | // function changes the images from top to bottom and then | ||
| Line 198: | Line 198: | ||
| topImage.srcset = bottomImage.srcset; | topImage.srcset = bottomImage.srcset; | ||
| } | } | ||
| - | // and make the top image visible again | ||
| - | topImage.style.opacity = 100; | ||
| - | // once it is done we can set the bottom image src | ||
| setTimeout(function(){ | setTimeout(function(){ | ||
| - | // now it should be safe to set the bottomImage to the | + | // and make the top image visible again |
| - | // next in the sequence - i.e. it is not showing now | + | topImage.style.opacity = 100; |
| - | changeIndex = (changeIndex==(nImages-1)) ? 0 : changeIndex+1; | + | // once it is done we can set the bottom image src |
| - | bottomImage.src = getImageSrc(changeIndex); | + | setTimeout(function(){ |
| - | // only set the bottom image to 0 if we want a full cross-phase | + | // now it should be safe to set the bottomImage to the |
| - | if (fullCrossFade) bottomImage.style.opacity = 0; | + | // next in the sequence - i.e. it is not showing now |
| - | if (useSrcset) { | + | changeIndex = (changeIndex==(nImages-1)) ? 0 : changeIndex+1; |
| - | bottomImage.srcset = getImageSrcset(changeIndex); | + | bottomImage.src = getImageSrc(changeIndex); |
| - | } | + | // only set the bottom image to 0 if we want a full cross-phase |
| + | if (fullCrossFade) bottomImage.style.opacity = 0; | ||
| + | if (useSrcset) { | ||
| + | bottomImage.srcset = getImageSrcset(changeIndex); | ||
| + | } | ||
| + | // start the process again | ||
| + | setTimeout(changeImage, imageUpdateTime-3*transitionTime); | ||
| + | },transitionTime); | ||
| },transitionTime); | },transitionTime); | ||
| },transitionTime); | },transitionTime); | ||
| Line 216: | Line 220: | ||
| // run the changeImage function to change the pictures | // run the changeImage function to change the pictures | ||
| - | setInterval(changeImage, imageUpdateTime); | + | setTimeout(changeImage, imageUpdateTime); |
| </script> | </script> | ||