Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
(function(){
/*
Unbounce Community :: Tips & Scripts :: Dynamic Image Replacement Using URL Parameters
TS:0002-04-???
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/
// Add the image source as the value of a URL parameter to have it appear on the page
// Add ID's of Images in builder
var imageOne = $("#lp-pom-image-11");
var imageTwo = $("#lp-pom-image-12");
// Add URL parameters
var img1 = getURLParameter('img1');
var img2 = getURLParameter('img2');
// function to get URL parameter
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
// change image if parameter exists
if (img1) {
$(image1).children().children().attr("src",img1);
$(image1).children().children().attr("data-src-desktop-1x",img1);
$(image1).children().children().attr("data-src-desktop-2x",img1);
$(image1).children().children().attr("data-src-desktop-3x",img1);
$(image1).children().children().attr("data-src-mobile-1x",img1);
$(image1).children().children().attr("data-src-mobile-2x",img1);
$(image1).children().children().attr("data-src-mobile-3x",img1);
}
if (img2) {
$(image2).children().children().attr("src",img2);
$(image2).children().children().attr("data-src-desktop-1x",img2);
$(image2).children().children().attr("data-src-desktop-2x",img2);
$(image2).children().children().attr("data-src-desktop-3x",img2);
$(image2).children().children().attr("data-src-mobile-1x",img2);
$(image2).children().children().attr("data-src-mobile-2x",img2);
$(image2).children().children().attr("data-src-mobile-3x",img2);
}
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.