До сих пор не очень ясно, что вы пытаетесь сделать.Когда вы щелкаете изображение, на какое изображение вы пытаетесь его изменить?Почему это повлияет на уровень масштабирования?
Я проверил ваш jsfiddle и вместо уровня масштабирования, это сам график, смещающийся вверх и вниз, потому что вы заполняете элемент, который ранее не имел высоты.Если вы дадите ему min-height, график перестанет смещаться вверх и вниз, когда он впервые приобретает ребенка или теряет их всех.
Вот такой ответвление:
#list {
min-height: 25px;
}
Приложение 2019-06-22: Изменить изображение при нажатии mapImage
Чтобы изменить изображение при нажатии, вместо попытки обновить исходные данные для привязки поля свойства, пожалуйста, обновитесвойство href напрямую.
То есть вместо:
ev.target.dataItem.dataContext.imageURL = "data:image/png;base64,...";
Просто сделайте:
ev.target.href = "data:image/png;base64,...";
Демо-версия ниже была обновлена, чтобы включить это, нажмите Уттар-Прадеш-> затем Meerut (значок с рукой / указателем):
https://jsfiddle.net/notacouch/d6u9ofh7/
Приложение 2019-06-26: Изменить изображение при нажатии «id»
Если вы не согласны с вышесказанным, обязательно закомментируйте строку переназначения изображения: ev.target.href = "...";.
Если вы хотите изменить изображение mapImage при нажатии на элемент .selected, я предлагаю использоватьделегирование событий в родительском #list div для обработки их событий щелчка вместо воссоздания одного для каждого нового div.Затем в этом обработчике событий, поскольку вы используете jQuery, вы можете проверить его текстовое содержимое с помощью .text(), преобразовать его в Number и перебирать mapImages, пока не будет найдено соответствующее mapImage.dataItem.dataContext.id.Затем назначьте его дочернее изображение.
Пример обработчика события ниже:
$('#list').on('click', '.selected', function(event) {
var id = Number($(event.target).text());
var totalImages = imageSeries.mapImages.length;
var mapImage;
for(var i = 0; i < totalImages; ++i) {
mapImage = imageSeries.mapImages.getIndex(i);
if (mapImage.dataItem.dataContext.id === id) {
mapImage.children.getIndex(0).href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEX///8AAAD39/f19fUmJiYgICAdHR0sLCySkpL8/PwWFhbj4+Px8fEPDw/n5+ecnJw2Nja/v79zc3OKioqlpaW1tbVLS0t/f3/Gxsbd3d3Nzc3X19dUVFRubm6vr69oaGhAQEAk5whvAAAB+klEQVRYhe2Yi5KCIBSGBfGaJqmVabf3f8qVg02GYKgws83wzexOHekP+A+HwPP0aSltFzTXBz9QzwObV67RQG1Y+HJiqkXB/p8uBoVxxSSve8/bX9mrytisNCnTu/M3d/Y6bYwIZ9DRMnm9T0oYQrZdGaY37cahDkZRbBTuIqkKfF/UyT6hSXKGjNhNn+wgY87J9IkeB5iLo/zhEWblsEpYtE9kvZ0x+yCdXR0XytrEC4VbqrWmYfUvqlkZjPWhMdYMalapPStHtMAh8BopvBbYPSGvdPvheZChT0mGilTf7RPhdlZfWjX5qBLpAzUrn6tZ/k3XPhFu582f/e5oZb1sIvV4uX3fZmyGSmHnUIn265X7LUhasw6BfnbOACsiGK8IvuOVBnY8XL52UQ5UAmLo10tL3tWnI9y+BBsh4XaSbtiLUE6JMWg+/BRC1hh6bYGtO/6/APsf4LXxKXEafpDG6+ISJC6vist6LbYcelEp4qr2csi7R5EiTsbxSBGf4gejplgeD0Z7CSbyuJN20k7aSTtpJ+2knbSTdtJO+lelrR04VMeepXEJSw9xqris16HAcIQvFsZl2DtI/xoTr7fwmScmlYU8iUNz11qBkN1mbuI4tt2zi7XLOKtXiP2fueR4w6WDzGR6cLIApEML2YLTXrq2c/lZoPoPNtQibDMMVRwAAAAASUVORK5CYII=";
break;
}
}
});
Демонстрация:
https://jsfiddle.net/notacouch/bxgz74t1/
Или вместо итерации, так как вв этом случае id является действительным id из mapImages, мы можем использовать MapImageSeries 'getImageById() метод :
$('#list').on('click', '.selected', function(event) {
var id = Number($(event.target).text()); // or via close icon's id
var mapImage = imageSeries.getImageById(id);
if (mapImage) {
mapImage.children.getIndex(0).href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEX///8AAAD39/f19fUmJiYgICAdHR0sLCySkpL8/PwWFhbj4+Px8fEPDw/n5+ecnJw2Nja/v79zc3OKioqlpaW1tbVLS0t/f3/Gxsbd3d3Nzc3X19dUVFRubm6vr69oaGhAQEAk5whvAAAB+klEQVRYhe2Yi5KCIBSGBfGaJqmVabf3f8qVg02GYKgws83wzexOHekP+A+HwPP0aSltFzTXBz9QzwObV67RQG1Y+HJiqkXB/p8uBoVxxSSve8/bX9mrytisNCnTu/M3d/Y6bYwIZ9DRMnm9T0oYQrZdGaY37cahDkZRbBTuIqkKfF/UyT6hSXKGjNhNn+wgY87J9IkeB5iLo/zhEWblsEpYtE9kvZ0x+yCdXR0XytrEC4VbqrWmYfUvqlkZjPWhMdYMalapPStHtMAh8BopvBbYPSGvdPvheZChT0mGilTf7RPhdlZfWjX5qBLpAzUrn6tZ/k3XPhFu582f/e5oZb1sIvV4uX3fZmyGSmHnUIn265X7LUhasw6BfnbOACsiGK8IvuOVBnY8XL52UQ5UAmLo10tL3tWnI9y+BBsh4XaSbtiLUE6JMWg+/BRC1hh6bYGtO/6/APsf4LXxKXEafpDG6+ISJC6vist6LbYcelEp4qr2csi7R5EiTsbxSBGf4gejplgeD0Z7CSbyuJN20k7aSTtpJ+2knbSTdtJO+lelrR04VMeepXEJSw9xqris16HAcIQvFsZl2DtI/xoTr7fwmScmlYU8iUNz11qBkN1mbuI4tt2zi7XLOKtXiP2fueR4w6WDzGR6cLIApEML2YLTXrq2c/lZoPoPNtQibDMMVRwAAAAASUVORK5CYII=";
}
});
Демонстрация:
https://jsfiddle.net/notacouch/5ravqhoL/