Looks like I was able to figure it out. The main issue was I wasn't initiating prettyPhoto and I also changed the format of the js objects being pulled in to simplify the code. Well here's the final code I ended up getting:
$(document).ready(function(){
function loopIt(stations) {
var stationed = [];
for(var i=0; i<stations.length; i++){
var loc = stations[i].loc;
var name = stations[i].name;
stationed.push('<a href="#" alt="' + name + '" title="' + name +
'" data-i="' + i + '"><area shape="circle" coords="' + loc + '" /></a>');
}
return stationed.join('\n');
}
$('#subway').append(loopIt(stations));
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
$('img[usemap]').rwdImageMaps();
$('a').on('click', function(e){
e.preventDefault();
var ib = $(this).data('i');
imgs = stations[ib].imgName;
var name = [];
var desc = [];
for(var i=0; i<imgs.length; i++){
name.push(stations[ib].name);
desc.push(name[0] + ' - MTA Lines: ' + stations[ib].line);
}
$.prettyPhoto.open(imgs,name,desc);
});
})
You can check out the custom map I made for my buddy, an artist in New York. He took pictures of all the subway stations throughout NYC and the points on the map link to each stations pics in a prettyPhoto gallery. Click there to check it out --> http://adminref.com/NYCPhotoMap/index.html