This shows you the differences between two versions of the page.
Both sides previous revision Previous revision | Previous revision | ||
shared:home [2020/06/26 13:04] |
shared:home [2022/09/14 20:41] (current) justin |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | <html> | + | <html><script type="text/javascript" language="JavaScript"> |
- | <style type="text/css"> | + | |
- | a:link { | + | // Names of images (these should be in data/media/home.) |
- | color: #820000; | + | imageNames = new Array("anzabrainego", "diamond_ice_brain", "brainnewfin", "sunmoon", "miyakojima", "lavabrain", "fishlights", "miyako", "iceland", "california"); |
- | text-decoration: none; | + | |
+ | // If useSrcset is true then each of the above images need to be scaled to | ||
+ | // multiple widths for faster loading. There is a csh script in ~/bin called | ||
+ | // wikiimage which automatically scales images and moves them into the data/media/home directory | ||
+ | useSrcset = true; | ||
+ | srcsetScales = [480, 960, 1136, 1334, 1920, 2560]; | ||
+ | |||
+ | // Set how often to update the images in ms. Note that the transition times | ||
+ | // are defined in the style for changingImage items | ||
+ | imageUpdateTime = 7500; | ||
+ | |||
+ | // Set how to do cross-fade. Half cross-fade means that the previous image | ||
+ | // goes from 100% to 0 while the new image (below) stays at 100%. | ||
+ | // Full cross-fade means that the previous image goes from 100% to 0 | ||
+ | // while the new image goes from 0 to 100. The full cross-fade was implemented | ||
+ | // to hide issues that happen when different images have different sizes | ||
+ | fullCrossFade = false; | ||
+ | </script> | ||
+ | |||
+ | <style> | ||
+ | .page table { | ||
+ | border: none; | ||
+ | table-layout: fixed; | ||
+ | width: 100%; | ||
} | } | ||
- | a:visited { | + | |
- | color: #820000; | + | .page table tr { |
- | text-decoration: none; | + | border: none; |
} | } | ||
- | a:hover { | + | |
- | color: #20895B; | + | .page table tr td { |
- | text-decoration: none; | + | border: none; |
+ | text-align: justify; | ||
} | } | ||
- | a:active { | + | |
- | color: #A1C1AE; | + | .page img { |
- | text-decoration: none; | + | border-radius: 25px; |
+ | box-shadow: 4px 8px 6px lightgray; | ||
} | } | ||
- | </style> | ||
- | <table style="width:100%;border:0;"><tr style="border:0;"><td style="border:0;font-family:helvetica,arial,sans-serif;font-size:28px;font-weight:bold;"> | + | .page table thead th { |
+ | border: none; | ||
+ | background-color: lightsteelblue; | ||
+ | height: 5vh; | ||
+ | box-shadow: 4px 8px 6px lightgray; | ||
+ | border-radius: 10px; | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .grid-container { | ||
+ | display: grid; | ||
+ | grid-row-gap: 5vh; | ||
+ | grid-column-gap: 5vw; | ||
+ | grid-auto-flow: row; | ||
+ | grid-template-columns: auto auto auto; | ||
+ | grid-template-rows: auto auto auto auto auto; | ||
+ | } | ||
- | <script type="text/javascript" language="JavaScript"> | + | .page #changingImage { |
+ | position:relative; | ||
+ | align="middle"; | ||
+ | } | ||
- | // create cookie | + | .page #changingImage img.top { |
- | function createCookie(name,value,days) { | + | position:relative; |
- | if (days) { | + | -webkit-transition: opacity 1s ease-in-out; |
- | var date = new Date(); | + | -moz-transition: opacity 1s ease-in-out; |
- | date.setTime(date.getTime()+(days*24*60*60*1000)); | + | -o-transition: opacity 1s ease-in-out; |
- | var expires = "; expires="+date.toGMTString(); | + | transition: opacity 1s ease-in-out; |
- | } | + | |
- | else var expires = ""; | + | |
- | document.cookie = name+"="+value+expires+"; path=/"; | + | |
} | } | ||
- | // read cookie | + | .page #changingImage img.bottom { |
- | function readCookie(name) { | + | position:absolute; |
- | var nameEQ = name + "="; | + | opacity:0; |
- | var ca = document.cookie.split(';'); | + | -webkit-transition: opacity 1s ease-in-out; |
- | for(var i=0;i < ca.length;i++) { | + | -moz-transition: opacity 1s ease-in-out; |
- | var c = ca[i]; | + | -o-transition: opacity 1s ease-in-out; |
- | while (c.charAt(0)==' ') c = c.substring(1,c.length); | + | transition: opacity 1s ease-in-out; |
- | if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); | + | |
- | } | + | |
- | return null; | + | |
} | } | ||
+ | </style> | ||
+ | |||
+ | <script type="text/javascript" language="JavaScript"> | ||
// Set to how many images there are | // Set to how many images there are | ||
- | nImages = 8; | + | nImages = imageNames.length; |
- | imageNames = new Array(nImages); | + | // Set last image, so that the first displayed image |
- | imageWidth = new Array(nImages); | + | // will be the first image in the list |
- | imageHeight = new Array(nImages); | + | var lastImageNum = nImages-2; |
- | // Names of images | ||
- | imageNames[0] = 'anzabrainego'; | ||
- | imageNames[1] = 'sunmoon'; | ||
- | imageNames[2] = 'iceland'; // needs higher res | ||
- | imageNames[3] = 'fishlights'; // needs higher res | ||
- | imageNames[4] = 'miyako'; // needs higher res | ||
- | imageNames[5] = 'brainnewfinnotext'; // needs higher res | ||
- | imageNames[6] = 'california'; // needs higher res | ||
- | imageNames[7] = 'miyakojima'; | ||
- | //imageNames[0] = 'tokyofull32.gif'; | + | // function to write img tag for a random one of the above images |
- | //imageNames[1] = 'brain_hoodoo800.jpg'; | + | function writeRandomImage(className, imageWidth, imageHeight) { |
- | //imageNames[2] = 'brainwordle800.png'; | + | |
- | //imageNames[3] = 'brainice800.jpg'; | + | |
- | //imageNames[3] = 'efficientselection800.png'; | + | |
- | //imageNames[4] = 'shinjuku800.jpg'; | + | |
- | // read the cookie value for the last displayed image | + | // increment value of lastImage |
- | var lastImageNum = readCookie('lastImageNum'); | + | lastImageNum = parseInt(lastImageNum)+1; |
+ | if (!((lastImageNum < nImages) && (lastImageNum >= 0))) | ||
+ | lastImageNum = 0; | ||
- | // increment value | + | // set the image number to display |
- | lastImageNum = parseInt(lastImageNum)+1; | + | dispImage = lastImageNum; |
- | if (!((lastImageNum < nImages) && (lastImageNum >= 0))) | + | |
- | lastImageNum = 0; | + | |
- | // save the lastImageNum | + | // write out image tag |
- | createCookie('lastImageNum',lastImageNum,1) | + | imgTag = '<img '; |
+ | |||
+ | // write classname if asked for | ||
+ | if (className !== undefined) { | ||
+ | // write the class id | ||
+ | imgTag = imgTag+'class="'+className+'" '; | ||
+ | // also give it the same id | ||
+ | imgTag = imgTag+'id="'+className+'" '; | ||
+ | } | ||
+ | else { | ||
+ | // write the default class | ||
+ | imgTag = imgTag+'class="media" '; | ||
+ | } | ||
- | // set the image number to display | + | // Write out image string |
- | dispImage = lastImageNum; | + | imgTag = imgTag+'src='+getImageSrc(dispImage)+' '; |
+ | |||
+ | if (useSrcset) { | ||
+ | // now set up the secret which allows for multiple scaled images | ||
+ | // The default image will just be called e.g. image.jpg and then | ||
+ | // there are scaled images that are called image_1920w.jpg for example | ||
+ | // that are scaled to a width of 1920 pixels | ||
+ | imgTag = imgTag+'srcset="'+getImageSrcset(dispImage); | ||
- | // put image into a table | + | // remove last comma and end subset field |
- | document.write('<tr style="border:0;"><td style="border:0;">'); | + | imgTag = imgTag.substr(0,imgTag.length-2)+'" '; |
+ | } | ||
+ | |||
+ | // write image width and height if passed in | ||
+ | if ((imageWidth !== undefined) && (imageHeight !== undefined)) { | ||
+ | imgTag=imgTag+' width="'+imageWidth+'" height="'+imageHeight+'" '; | ||
+ | } | ||
- | // Images are scaled to multiple widths for faster loading | + | // close the img html |
- | // There is a csh script in home called wikiimage which automatically scales images | + | imgTag=imgTag+' alt="" />'; |
- | //imageScales = [480, 960, 1136, 1334, 1920]; | + | //imgTag=imgTag+' alt="" style="box-shadow:10px 10px 10px #AAAAAA"/>'; |
- | imageScales = [480, 960, 1136]; | + | |
+ | // write the imgTag | ||
+ | document.write(imgTag); | ||
+ | //console.log(imgTag); | ||
+ | } | ||
- | // Write out image string with srcset which allows for multiple scaled images | + | // get the full image src name from the imageNum |
- | document.write('<img src="/lib/exe/fetch.php/home/'+imageNames[dispImage]+'_1136w.jpg'+'" cache=cache" srcset="'); | + | function getImageSrc(imageNum) { |
+ | return '"/lib/exe/fetch.php/home/'+imageNames[imageNum]+'.jpg"'; | ||
+ | } | ||
+ | // get the full image srcset string from the imageNum | ||
+ | function getImageSrcset(imageNum) { | ||
+ | srcset = ''; | ||
+ | // write out each one of the scaled image names and the width | ||
+ | srcsetScales.forEach(function (item) { | ||
+ | srcset=srcset+'/lib/exe/fetch.php/home/'+imageNames[imageNum]+'_'+item+'w.jpg '+item+'w, '; | ||
+ | }); | ||
+ | return srcset; | ||
+ | } | ||
- | // write out each one of the scaled image names and the width | + | // Make a double image - the top one is the one being shown and |
- | imageScales.forEach(function (item) { | + | // the bottom one is used for transitions. |
- | document.write('/lib/exe/fetch.php/home/'+imageNames[dispImage]+'_'+item+'w.jpg '+item+'w '); | + | document.write('<div id="changingImage">'); |
- | }); | + | writeRandomImage("bottom"); |
+ | writeRandomImage("top"); | ||
+ | document.write('</div>'); | ||
+ | |||
+ | // some variables for the changeImage function | ||
+ | let changeIndex = dispImage; | ||
+ | const topImage = document.getElementById('top'); | ||
+ | const bottomImage = document.getElementById('bottom'); | ||
+ | |||
+ | // transition time should be longer than the style sheet | ||
+ | // has for changing the opacity | ||
+ | transitionTime = 2000; | ||
+ | |||
+ | // function changes the images from top to bottom and then | ||
+ | // loads a new image for the next transition. It gets | ||
+ | // called periodically to change the images | ||
+ | function changeImage() { | ||
+ | // set the top image to change opacity to 0 | ||
+ | // this will go incrementally over a second | ||
+ | // due to the style settings | ||
+ | topImage.style.opacity=0; | ||
+ | bottomImage.style.opacity=100; | ||
+ | // set a timeout to flip the images back once | ||
+ | // the transition expected to be over | ||
+ | setTimeout(function(){ | ||
+ | // now set the top image (which should have opacity 0 by now) | ||
+ | // to be the same as the bottom image | ||
+ | topImage.src = bottomImage.src; | ||
+ | if (useSrcset) { | ||
+ | topImage.srcset = bottomImage.srcset; | ||
+ | } | ||
+ | setTimeout(function(){ | ||
+ | // and make the top image visible again | ||
+ | topImage.style.opacity = 100; | ||
+ | // once it is done we can set the bottom image src | ||
+ | setTimeout(function(){ | ||
+ | // now it should be safe to set the bottomImage to the | ||
+ | // next in the sequence - i.e. it is not showing now | ||
+ | changeIndex = (changeIndex==(nImages-1)) ? 0 : changeIndex+1; | ||
+ | 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); | ||
+ | } | ||
- | // close the img html | + | // run the changeImage function to change the pictures |
- | document.write('" class="media" alt="" style="box-shadow:10px 10px 10px #AAAAAA"/>'); | + | setTimeout(changeImage, imageUpdateTime); |
</script> | </script> | ||
Line 109: | Line 226: | ||
<img src="/data/media/shared/brainnewfin800.jpg" class="media" alt="" /> | <img src="/data/media/shared/brainnewfin800.jpg" class="media" alt="" /> | ||
</noscript> | </noscript> | ||
- | </tr></td> | + | <table> |
<tr style="border:0;"><td style="border:0;font-family:verdana,arial,sans-serif;font-size:14px;font-style:italic;text-justify:inter-word;text-align:justify;text-shadow:10px 10px 7px #A0A0A0"> | <tr style="border:0;"><td style="border:0;font-family:verdana,arial,sans-serif;font-size:14px;font-style:italic;text-justify:inter-word;text-align:justify;text-shadow:10px 10px 7px #A0A0A0"> | ||
- | How does neural activity in the human cortex create our sense of visual perception? Our lab at Stanford uses a combination of functional magnetic resonance imaging, computational modeling, and psychophysical measurements to link human perception to cortical brain activity.<br><br> | + | How does neural activity in the human cortex give rise to visual perception? Our lab at Stanford uses a combination of functional magnetic resonance imaging, computational modeling, and psychophysical measurements to link human perception to cortical brain activity.<br><br> |
</td></tr> | </td></tr> | ||
</table> | </table> | ||
</html> | </html> |