יש לנו ווידג'ט תמונה שאנחנו מנסים להחליף את התמונה המוצגת ע"י קוד JS
כשהתמונות הן באותו הגודל בדיוק 1920X1132 אז אנחנו מצליחים להחליף תמונות ע"י החלפת הsrc של אלמנט הimg וגם ה-srcset על שלל הרזולוציות שלו
הבעיה מתחילה כשיש לנו תמונות בגודל שונה ואז הרזולוציה של התמונות החלופיות היא גם שונה ואז אנחנו לא מצליחים להחליף את התמונה.
יש לכם עצה כיצד ניתן לפתור את זה?
אולי מה ההמרה בין רזולוציה מלאה של תמונה לרזולוציות המשנה שאמורות להיות בSRCSET?
זה הקוד הקיים כיום:
function ChangeImage(elementId, oldSrc, newSrc){
var image = document.getElementById(elementId);
var elms = image.getElementsByTagName("img");
elms[0].src = newSrc;
var imagesrcset = elms[0].srcset;
var newimagesrcset = imagesrcset.split(oldSrc.replace(/\.[^/.]+$/, "")).join(newSrc.replace(/\.[^/.]+$/, ""));
elms[0].srcset = newimagesrcset;
}
כשהתמונות הן באותו הגודל בדיוק 1920X1132 אז אנחנו מצליחים להחליף תמונות ע"י החלפת הsrc של אלמנט הimg וגם ה-srcset על שלל הרזולוציות שלו
הבעיה מתחילה כשיש לנו תמונות בגודל שונה ואז הרזולוציה של התמונות החלופיות היא גם שונה ואז אנחנו לא מצליחים להחליף את התמונה.
יש לכם עצה כיצד ניתן לפתור את זה?
אולי מה ההמרה בין רזולוציה מלאה של תמונה לרזולוציות המשנה שאמורות להיות בSRCSET?
זה הקוד הקיים כיום:
function ChangeImage(elementId, oldSrc, newSrc){
var image = document.getElementById(elementId);
var elms = image.getElementsByTagName("img");
elms[0].src = newSrc;
var imagesrcset = elms[0].srcset;
var newimagesrcset = imagesrcset.split(oldSrc.replace(/\.[^/.]+$/, "")).join(newSrc.replace(/\.[^/.]+$/, ""));
elms[0].srcset = newimagesrcset;
}