Search code examples
jqueryapiflickr

Replace Flickr album instead of appending it


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>");
            });
        });
});

Solution

  • 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>