title: How to change $.ajax url source variables on button click?
body: <p>The script below displays thumbnail images from the gallery1thumbs folder and when clicked opens the larger version from the gallery1full folder.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I just don't know how to code the button so it changes these values and displays the new content.</p>
  
  <pre><code> &lt;script&gt;
   $( 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( "&lt;a class='item' href='"+ gallery.full + val +"'&gt;&lt;img class='squares' src='"+ gallery.thumbs + val +"'&gt;&lt;/a&gt;" );
          } 
        });
      }
    });
  };
  gallery = [];
  gallery[0] = {
    thumbs: "/gallery1thumbs/",
    full: "/gallery1full/"
  }
  gallery[1] = {
    thumbs: "/gallery2thumbs/",
    full: "/gallery2full/"
  }
  counter = 0;
  $("#button").click( function() {
   ajaxFunction([counter % 2]);
  });
  });
  &lt;/script&gt;
  &lt;button id="button"&gt;click here&lt;/button&gt;
  &lt;div id="griddie"&gt;&lt;/div&gt;
  </code></pre>