Hm, I really suggest you learn more about Javascript, JQuery, AJAX and PHP before you attempt it. It looks like you have no clue how to go about this.
I'll point you in the right direction starting with W3 Schools (although definitely not the best resource but, it's a good start):
W3 Schools
Here's some more information about JQuery from their own JQuery API Documentation
More specifically, the $.ajax function
And here's how you connect to a Mysql database using PHP
With that being said, this is a general example, using your information, of how you would go about doing an AJAX/server response. I post this so that you might learn something from this code, as it does specifically what you requested:
Javascript
$(document).ready(function() {
$('#element').click(function() {
//Get data to be sent to server
//var sFamily = $("#family_search").text();
//var sFamily = $(this).text();
var sFamily = "family";
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {family: sFamily },
success: function(response){
//Use response
//alert("Server echo: "+response);
$("#output_element").html(response);
},
error: function(msg){
alert("Error: "+msg);
}
});
});
});
PHP file "thegamer.php"
<?php
//Credentials
$server = "localhost";
$user = "root";
$password ="admin";
$db = "dbo";
//Connect
$link = mysql_connect($server, $user, $password);
//Select database
mysql_select_db($db, $link);
//Assemble query
$family = mysql_real_escape_string($_POST['family'], $link);
$query = "SELECT imgurl FROM images WHERE family='$family'";
//Query database
$result = mysql_query($query, $link);
//Output result, send back to ajax as var 'response'
echo "<table>";
if(mysql_num_rows($result) > 0){
//Fetch rows
while($row = mysql_fetch_array($result)){
echo "<tr><td>".$row['imgurl']."</td></tr>";
}
}else{
echo "<tr><td>No results matching family \"$family\"</td></tr>";
}
echo "</table>";
//mysql_free_result($result)
//mysql_close($link);
?>