WikiMSK:Sandbox/box12: Difference between revisions

From WikiMSK
(Created page with "{{#related:Pyomyositis}} {{#related:Enthesis}}")
 
No edit summary
 
Line 1: Line 1:
{{#related:Pyomyositis}}
<html>
{{#related:Enthesis}}
<div class="example">
 
</div>
<script>
// how to use the funciton on line 94
// for questions email felix@demont.is
 
var images10 = [
  "https://c1.staticflickr.com/5/4408/36911638800_7f554b122f_o.jpg",
  "https://c1.staticflickr.com/5/4345/36911638670_a1bbffc14c_o.jpg",
  "https://c1.staticflickr.com/5/4359/37166488521_67b51412f5_o.jpg",
  "https://c1.staticflickr.com/5/4375/36911638530_9a5f5f9299_o.jpg",
  "https://c1.staticflickr.com/5/4417/36495726713_20521b5372_o.jpg",
  "https://c1.staticflickr.com/5/4376/36495726633_8b48fc83d3_o.jpg",
  "https://c1.staticflickr.com/5/4343/36495726613_4f8310a864_o.jpg",
  "https://c1.staticflickr.com/5/4425/36495726553_8fd2411a7f_o.jpg",
  "https://c1.staticflickr.com/5/4394/36495726443_cb6f6b0d9b_o.jpg",
  "https://c1.staticflickr.com/5/4348/36911638180_551e1c2257_o.jpg"
];
 
var images19 = [
  "https://wikimsk.org/w/img_auth.php/b/b7/MRI_T2_Lumbar_Spine_L1_Transpedicular_Axial.jpg",
  "https://wikimsk.org/w/img_auth.php/thumb/b/bb/MRI_T2_Lumbar_Spine_L1_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L1_Subpedicular_Axial.jpg",
  "https://wikimsk.org/w/img_auth.php/thumb/f/f9/MRI_T2_Lumbar_Spine_L1-L2_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L1-L2_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/b/be/MRI_T2_Lumbar_Spine_L2_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/f/f1/MRI_T2_Lumbar_Spine_L2_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/4/40/MRI_T2_Lumbar_Spine_L2-L3_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L2-L3_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/2/27/MRI_T2_Lumbar_Spine_L3_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/e/e9/MRI_T2_Lumbar_Spine_L3_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/0/00/MRI_T2_Lumbar_Spine_L3-L4_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L3-L4_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/c/cc/MRI_T2_Lumbar_Spine_L4_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/5/59/MRI_T2_Lumbar_Spine_L4_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/4/49/MRI_T2_Lumbar_Spine_L4-L5_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L4-L5_Transarticular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/a/ab/MRI_T2_Lumbar_Spine_L5_Transpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5_Transpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/1/13/MRI_T2_Lumbar_Spine_L5_Subpedicular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5_Subpedicular_Axial.jpg",
"https://wikimsk.org/w/img_auth.php/thumb/9/94/MRI_T2_Lumbar_Spine_L5-S1_Transarticular_Axial.jpg/600px-MRI_T2_Lumbar_Spine_L5-S1_Transarticular_Axial.jpg"
];
 
images = images10;
images2 = images19;
 
function ImageStack (options) {
 
  var self = this;
   
  self.img_array = options.images;
 
  self.stack = document.createElement('div');
  self.stack.style.overflow = 'auto';
  self.stack.style.maxWidth = '100%';
  self.stack.style.height = options.height;
  self.stack.style.width = options.width;
  self.stack.style.backgroundSize = 'cover'
  self.stack.style.position = 'relative';
 
  var typeRegex = /(\D+)/
  var sizeType = options.height.match(typeRegex)[0]
 
  var numberRegex = /(\d+)/
  self.height_number = Number( options.height.match(numberRegex)[0] )
   
  self.wrapper = document.createElement('div');
 
  for (var i = 0; i < self.img_array.length; i++) {
   
    var image = document.createElement('img');
    image.src = self.img_array[i];
   
    image.style.display = 'none';
    image.style.position = 'absolute';
    image.style.width = options.width;
    image.style.height = options.height;
    image.style.top = 0;
    image.style.left = 0;
    image.dataset.iid = i;
   
    self.wrapper.appendChild(image);
   
  }
   
  self.image_elements = self.wrapper.querySelectorAll('img');
 
  self.scrollobject = document.createElement('div');
  self.scrollobject.style.width = '100%';
  self.scrollobject.style.position = 'absolute';
  self.scrollobject.style.zIndex = '2';
  if (self.img_array.length > 15){
  self.img_count = self.img_array.length;
  } else {
  self.img_count = 15;
  }
  self.scrollobject_height = Math.floor( 0.1 * self.img_count * self.height_number );
 
  self.scrollobject.style.height = self.scrollobject_height + sizeType;
 
  self.scrollUpdate = function (e) {
   
    self.height_number = self.stack.getBoundingClientRect().height
    self.scrollobject_height = Math.floor( 0.1 * self.img_count * self.height_number );
   
    var sT = self.stack.scrollTop
    var hn05 = self.img_array.length - 1
    var hh = (self.scrollobject_height - self.height_number) / hn05
    scrollval = Math.floor(sT / (hh))
   
    self.currentimg = self.image_elements[scrollval].src
   
    self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
   
  }
 
  self.stack.addEventListener('scroll', self.scrollUpdate);
 
  self.currentimg = self.image_elements[0].src
  self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
 
  /*
 
  window.addEventListener('resize', function () {
    var stackRect = self.stack.getBoundingClientRect()
   
    console.log(stackRect)
   
    self.height_number = stackRect.height
    self.scrollobject_height = Math.floor( 0.1 * self.img_array.length * self.height_number );
   
    self.stack.style.width = stackRect.width + 'px'
    self.stack.style.eight = stackRect.width + 'px'
  })
 
  */
     
  self.stack.appendChild(self.wrapper);
  self.stack.appendChild(self.scrollobject);
 
  return self.stack;
 
}
 
/*
 
The function ImageStack returns a Element Node, which can be appended to an already existing element or modified, however someone wants to change it.
 
The parameters should have to be a height of the element, the width of the elment, and a list (Array) to all the images.
 
*/
 
var stack = new ImageStack({
  images: images2,
  height: '350px',
  width: '350px'
});
 
var stack2 = new ImageStack({
  images: images,
  height: '30rem',
  width: '30rem'
});
 
// append the stack to the .example element
 
document.querySelector('.example').appendChild(stack);
document.querySelector('.example').appendChild(stack2);
</script>
</html>

Latest revision as of 22:18, 24 October 2022

Retrieved from ‘https://wikimsk.org/w/index.php?title=WikiMSK:Sandbox/box12&oldid=19495’