How to change $.ajax url source variables on button click?

Question

The script below displays thumbnail images from the gallery1thumbs folder and when clicked opens the larger version from the gallery1full folder.

I want to create a button that when clicked, will change those values to gallery2thumb gallery2full so that new images display, replacing the old ones.

I have tried so many approaches that all failed. I am trying to do this as simple as possible as the page will ultimately have a lot of these buttons. I don't want the page to reload which is why I chose ajax.

I just don't know how to code the button so it changes these values and displays the new content.

 <script>
 $( document ).ready(function() {
ajaxFunction = function(gallery) {
  $.ajax({
    url : gallery.thumbs,
    success: function (data) {
      $(data).find("a").attr("href", function (i, val) {
        if( val.match(/\.(jpe?g|png|gif)$/) ) { 
            $("#griddie").append( "<a class='item' href='"+ gallery.full + val +"'><img class='squares' src='"+ gallery.thumbs + val +"'></a>" );
        } 
      });
    }
  });
};
gallery = [];
gallery[0] = {
  thumbs: "/gallery1thumbs/",
  full: "/gallery1full/"
}
gallery[1] = {
  thumbs: "/gallery2thumbs/",
  full: "/gallery2full/"
}
counter = 0;
$("#button").click( function() {
 ajaxFunction([counter % 2]);
});
});
</script>
<button id="button">click here</button>
<div id="griddie"></div>

Answer 1

a simple way to do this would be to wrap the AJAX request in a function like this

ajaxFunction = function(gallery) {
  $.ajax({
    url : gallery.full,
    success: function (data) {
      $(data).find("a").attr("href", function (i, val) {
        if( val.match(/\.(jpe?g|png|gif)$/) ) { 
            $("#griddie").append( "<a class='item' href='"+ data + val +"'><img class='squares' src='"+ gallery.thumbs + val +"'></a>" );
        } 
      });
    }
  });
};

then call that function on button click. then you can make the paths into objects (something like this would work)

gallery = [];
gallery[0] = {
  thumbs: "/gallery1thumbs/",
  full: "/gallery1full/"
}
gallery[1] = {
  thumbs: "/gallery2thumbs/",
  full: "/gallery2full/"
}

then you can toggle which one you're using, and call your new ajax function like so

counter = 0;
$("#button").click( function() {
 ajaxFunction(gallery[counter % 2]);
});

edit: forgot to mention, you can probably just save the thumbs somewhere, and if you can memoize all of the resources it’s even better, then you only have to make a call the first two times. good luck!