title: How to go to next and previous object in JSON array returned by json_encode with jQuery?
body: <p>I'm currently trying to load some JSON image data from a PHP file with AJAX, and with jQuery cycle through the results on the click of a next/previous button. I can successfully load the data when I indicate a specified index (data.record[0].image;) but I want it to load the first index and nothing else, and go to the next JSON.object.image key/value pair ON CLICK, but I can't seem to get the next previous buttons to work. Here's what I have so far..</p>
  
  <p>PHP: 
  
  <pre><code>    include('./connection.php');
      $query = "SELECT artist, title, year, image, description, ID FROM voting";
      $result = $mysqli-&gt;query($query);
  
      if (!$result) die($mysqli-&gt;error);
      $array = array();
      while ($row = $result-&gt;fetch_object()) {
          $array[] = $row;
  
      }
      echo json_encode(array('records' =&gt; $array), JSON_UNESCAPED_SLASHES);
  </code></pre>
  
  <p>JSON is in the following format:</p>
  
  <pre><code>{"records":[
              {
                  "artist":"At The Drive In",
                  "title":"Acrobatic Tenement ",
                  "year":"1996",
                  "image":"./img/atdi01.jpg",
                  "description":"Arguably the the pioneering album of post-hardcore, Acrobatic Tenement is At The Drive In's seminal album. ",
                  "ID":"1"
              }
      ]
  </code></pre>
  
  <p>script.js file: </p>
  
  <pre><code>      $("#get-data").click(function(){ //load JSON data...
          $.getJSON("api.php", //gets a JSON data from api.php
            function(data){     //callback function if request succeeds
  
  
              $.each(data.records, function(i,record){
                var current = 0;
                var img = $("&lt;img/&gt;").attr({
                  id: "album_image", 
                  class: "album", 
                  src: data.records[i].image,
                  });
                $("#content").html(img);
                $("#next-bt").click(function(){
                  current + 1;
                  return false;
                });
                $("#prev-bt").click(function(){
                  current - 1;
                  return false;
                });
  
              });
            });           //end of callback function and end of .getJSON statement
        });               //end of button.click function
  </code></pre>
  
  <p>Please help! I'm about to pull my hair out.</p>