User:Jeremy/sandbox: Difference between revisions
From WikiMSK
No edit summary |
No edit summary |
||
(104 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<div class="example"> | |||
</div> | |||
<script> | <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> | </script> | ||
</html> | </html> |
Latest revision as of 22:17, 24 October 2022