I have a link that returns an array of images similar to the following one.
{ "imageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x50.png",
"expandedImageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x320.jpg" }
My goal is to display the first image in a <div>, and when it gets clicked, it changes to the second image.
How can I achieve this using only HTML and JavaScript?
In plain javascript, supposing you already have a div declared as <div id=divId></div> :
var images = {
"imageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x50.png",
"expandedImageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x320.jpg"
};
var div = document.getElementById('divId');
var img = document.createElement('img');
img.setAttribute('src', images.imageUrl);
div.appendChild(img);
img.onclick=function(){
this.src=images.expandedImageUrl;
};
If you have an array of objects similar to the images object, you may loop to create them. It's less trivial than it might seem due to the "closure effect", that's why I include the code :
var images = [
{ "imageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",
"expandedImageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"},
{ "imageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",
"expandedImageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"},
{ "imageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",
"expandedImageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"}
];
var div = document.getElementById('divId');
for (var i=0; i<images.length; i++) {
var image =images[i];
var img = document.createElement('img');
img.setAttribute('src', image.imageUrl);
div.appendChild(img);
(function(expandedImageUrl){ // we embed the expanded URL in a closure to avoid having the value at end of loop used
img.onclick=function(){
this.src=expandedImageUrl;
};
})(image.expandedImageUrl);
}
EDIT following question in comment :
And here's a version allowing a click to toggle between the two images :
var images = [
{ "imageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",
"expandedImageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"},
{ "imageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",
"expandedImageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"},
{ "imageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",
"expandedImageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"}
];
var div = document.getElementById('divId');
for (var i=0; i<images.length; i++) {
var image =images[i];
var img = document.createElement('img');
img.setAttribute('src', image.imageUrl);
img.setAttribute('othersrc', image.expandedImageUrl);
img.setAttribute('width', '600px');
div.appendChild(img);
img.onclick=function(){
var src = this.getAttribute('src');
this.src = this.getAttribute('othersrc');
this.setAttribute('othersrc', src);
};
}
