Pass Pagination data to Page

Question

I have a page that I'm trying to get AJAX thumbnail replacement & pagination to work. The page loads the initial thumbs: http://www.partiproductions.com/vault_test/1-a-b.php But when clicking nav buttons, it should change the thumbnails, but doesn't.

My click function (forward button):

$('#gort').mouseup (function() {
  var curpg = parseInt($('.thumbwrap').attr('data-cpg'),10);
  console.log('Cur Pg: ' + curpg);
  var newpg = curpg + 1;
  console.log('New Pg: ' + newpg);
  var $totpgs = parseInt($('.thumbwrap').attr('data-tpgs'),10);
  console.log('Total Pages: ' + $totpgs);
  if (newpg > 1) {$('#goleft').show(200)}
  if (newpg == $totpgs) {newpg = $totpgs; $('#gort').hide()}   // limit page to total pages
  if (newpg < $totpgs) {$('#gort').show(200)}
  $('.thumbwrap').attr('data-cpg', newpg);
  var $start = (newpg - 1) * 15;
  console.log('Start: ' + $start);
  // my attempt to pass $start to pagination.php
  $.ajax({
    url:'pagination.php',
    type:'POST',
    data:{start:$start},
    dataType:'JSON'
    success: function(response) {
      thumbparse(response);
    }
  });
});

Currently simple thumbparse function:

 function thumbparse(response) {
   alert(response);
   console.log('Thumbparse output: ' + $navresults);
 }

Pagination.php:

<?php
$thumbst = $_POST['start'];  // capture input from AJAX
echo "Inside Pagination: $thumbst";
require_once 'meekrodb.2.2.class.php';
require_once 'dconnect.php';
// pull from database using specific page items
$navresults = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
  WHEN '1' THEN 1
  WHEN '2' THEN 2
  WHEN '3' THEN 3  
  WHEN 'A' THEN 4
  WHEN 'B' THEN 5
  ELSE 6
  END), theme
  LIMIT $thumbst,15");
if(isset($_POST['start']) && !empty($_POST['start'])) {    
  echo json_encode($navresults);
}  
// my attempt to loop through assigned variables that are echoed in main pg   
$x = 0;
foreach ($navresults as $row) {
  $x++;
  if ($x == 1) {
    $t1 = $row['theme'];
    $d1 = $row['developer'];
    $th1 = $row['thumb'];
    $thlg1 = $row['thumb_lg'];
  }
  ... other x's
}

I'm not seeing the echoes from pagination.php How do I get the new thumb data ($navresults) passed back to main page and get that data into the DOM? Code please, as I'm just learning - thanks.

Update 1:

function thumbparse(response) {
  alert(response);
  var obj = JSON.parse(response);
  alert(obj.count);
  console.log('Thumbparse results: ' + $navresults);
}

Update 2:

function thumbparse(response) {
  alert(response);
  console.log(response);
  var x = 0;
  var obj = response;
  $.each(obj, function(key, val) {
    x++;
    var y = x - 1;
    $('ul.thumbwrap .thumb:nth-of-type(y) img').attr({
      alt: obj.theme,
      src: obj.thumb,
      'data-retina': obj.thumb_lg
    });
    $('ul.thumbwrap .thumb:nth-of-type(y) p.hname').text(obj.theme);
    $('ul.thumbwrap .thumb:nth-of-type(y) p.hdev').text(obj.developer);
  });
}

Update 3:

function thumbparse(response) {
  alert(response);
  console.log(response);
  var x = 0;
  var obj = response;
  $.each(obj, function(key, val) {
    x++;
    var y = x - 1;
    console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src')); // correct
    console.log('New src: ' + obj.thumb);  // undefined
    $('.thumb').eq(y).find('img').attr({
      alt: obj.theme,
      src: obj.thumb,
      'data-retina': obj.thumb_lg
    });
    $('.thumb').eq(y).find('p.hname').text(obj.theme);
    $('.thumb').eq(y).find('p.hdev').text(obj.developer);
  });
}

Update 4:

function thumbparse(response) {
  alert(response);
  console.log(response);
  var x = 0;
  var obj = response;
  $.each(obj, function(key, val) {
    x++;
    var y = x - 1;
    console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src'));
    console.log('New src: ' + obj[key].thumb);
    $('.thumb').eq(y).find('img').attr({
      alt: obj[key].theme,
      src: obj[key].thumb,
      'data-retina': obj[key].thumb_lg
    });
    $('.thumb').eq(y).find('p.hname').text(obj[key].theme);
    $('.thumb').eq(y).find('p.hdev').text(obj[key].developer);
    if (obj[key].theme == '') {$('.thumb').eq(y).hide()}
  });
}

Answer 1

Try this:

function thumbparse(response) {
 console.log(response);
  var x = 0;
  var obj = response;
 $.each(obj, function(key, val) {
 x++;
var y = x - 1;
console.log('Exist. src: ' + $('.thumb').eq(y).find('img').attr('src'));//Actual src
console.log('New src: ' + obj[key].thumb); //new src from json response
$('.thumb').eq(y).find('img').attr({
  alt: obj[key].theme,
  src: obj[key].thumb,
  'data-retina': obj[key].thumb_lg
});
$('.thumb').eq(y).find('p.hname').text(obj[key].theme);
$('.thumb').eq(y).find('p.hdev').text(obj[key].developer);
if (obj[key].theme == '') {$('.thumb').eq(y).hide()}
 });
}