Объявите массивы изображений как карту вместо отдельных переменных и измените ваши кнопки на вызовы setImageStack('bone'), setImageStack('lung') и т. Д.
В функции setImageStack создайте для нее ImageStackid, если он еще не существует, сохраните его для использования в будущем и вставьте в документ.
См. рабочий пример ниже.
const stacks = {
bone: [
// list of bone images
],
softTissue: [
// list of bone images
],
lung: [
// list of lung images
]
};
<button onClick="setImageStack('bone')">bone</button>
<button onClick="setImageStack('softTissue')">soft tissue</button>
<button onClick="setImageStack('lung')">lung</button>
// a map to keep track of the ImageStack instances
const imageStacks = {};
const imagesByStackName = {
softTissue: [
"https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg",
"https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg",
// others omitted for this example
],
bone: [
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG",
"https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg",
// others omitted
],
lung: [
"http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg",
"https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg",
]
};
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';
self.img_count = (self.img_array.length > 15) ? self.img_array.length : 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);
}
// keep track of instantiated ImageStacks
const stacks = {};
// creates a stack for the specified image list and stores it in the cache map
function createStack(whichImages) {
const images = imagesByStackName[whichImages];
stacks[whichImages] = new ImageStack({
images,
width: '512px',
height: '512px'
});
return stacks[whichImages];
}
// button onclick handler
function setImageStack(whichImages) {
// get the ImageStack instance for this set from our map cache; create it if it's not already there.
const stack = stacks[whichImages] || createStack(whichImages);
const container = document.querySelector('.example');
const child = container.firstElementChild;
if (child) {
container.replaceChild(stack.stack, child);
} else {
container.appendChild(stack.stack);
}
}
// set up initial stack display
setImageStack(Object.keys(imagesByStackName)[0]);
<div>
<button onclick="setImageStack('softTissue')" class="button">
Soft Tissue</button>
<button onclick="setImageStack('bone')" class="button">
Bone</button>
<button onclick="setImageStack('lung')" class="button">
Lung</button>
</div>
<div class="example">
</div>