I have a gallery with images, these images can be dragged to another place and also dragged back. When dragging them back, a sort function places them at the correct place again (order of ID).
now since I made this function, my onClick Tag function for the Image tag doesn't work anymore can someone explain me why this is and how I can solve this?
HTML (Razor):
<ul class="gallery col-md-8 borderBoxes" id="gallery">
@for (int i = 0; i < Model.PageList.Count; i++)
{
<li class="imageListItem ui-icon-zoomin" id="@Model.PageList[i].ID">
<figure id="@(i+1)">
<img class="pages small" src="data:image/jpeg;base64,@Model.PageList[i].ImageBaase64" onclick="imageLarger(this)" />
</figure>
</li>
}
</ul>
OnClickFunction (JS):
function imageLarger(image) {
if ($(image).width() === 700) {
$(image).width(100);
setTimeout(function () {
$(image).removeClass("largePages");
$("li", $("#gallery")).draggable("option", "disabled", false);
}, 300);
} else {
$("li", $("#gallery")).draggable("option", "disabled", true);
$(image).width(700);
$(image).addClass("largePages");
}
};
SortFunction (JS):
function sortByImageID() {
var gallery = document.getElementById("gallery");
var galleryItems = gallery.getElementsByClassName("imageListItem");
for (var i = 0; i < galleryItems.length; i++) {
var listitems = [];
for (i = 0; i < galleryItems.length; i++) {
listitems.push(galleryItems.item(i));
}
listitems.sort(function (a, b) {
var compA = a.getElementsByTagName("figure")[0].getAttribute('id');
var compB = b.getElementsByTagName("figure")[0].getAttribute('id');
return (parseInt(compA) < parseInt(compB)) ? -1 : (parseInt(compA) > parseInt(compB)) ? 1 : 0;
});
for (i = 0; i < listitems.length; i++) {
gallery.appendChild(listitems[i]);
}
}
}