I would like to show a album from Flickr by clicking on button1 and button2.
But I want it to replace the other album when being clicked instead of showing under it. I've tried to change appendTo to replaceWith but that didn't work.
html:
<div id="images"></div>
<a id="button1" href="#">1</a>
<a id="button2" href="#">2</a>
script:
$("#button1").click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157615971582524&nsid=33000359@N05&lang=en-us&format=json&jsoncallback=?" , function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='" + item.link + "'></a>");
});
});
});
$("#button2").click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157630193661622&nsid=33000359@N05&lang=en-us&format=json&jsoncallback=?" , function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='" + item.link + "'></a>");
});
});
});
Simply add $('#images a').remove() in two click function()
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function() {
$('#images a').remove()
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157615971582524&nsid=33000359@N05&lang=en-us&format=json&jsoncallback=?" , function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='" + item.link + "'></a>");
});
});
});
$("#button2").click(function() {
$('#images a').remove()
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157630193661622&nsid=33000359@N05&lang=en-us&format=json&jsoncallback=?" , function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='" + item.link + "'></a>");
});
});
});
})
</script>