Differences

This shows you the differences between two versions of the page.

--- shared:home [2020/02/03 19:06]
+++ shared:home [2022/09/10 12:03]
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
-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;
+}
+// Make a double image - the top one is the one being shown and
+// the bottom one is used for transitions.
+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 = 2500;
+// 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;
+     }
+     // 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);
+       }
+     },transitionTime);
+   },transitionTime);
+}
-// write out each one of the scaled image names and the width
+// run the changeImage function to change the pictures
-imageScales.forEach(function (item) {
+setInterval(changeImage, imageUpdateTime);
-document.write('/lib/exe/fetch.php/home/'+imageNames[dispImage]+'_'+item+'w.jpg '+item+'w ');
-});
-// close the img html
-document.write('" class="media" alt="" style="box-shadow:10px 10px 10px #AAAAAA"/>');
 </script>
@@ Line 109: / Line 223: @@
 <img src="/data/media/shared/brainnewfin800.jpg" class="media" alt="" />
 </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">
-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 analysis, 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>
 </table>
 </html>

Gardner Lab

Stanford University

Differences

Gardner Lab

Stanford University

Site Tools

Differences

Page Tools