image thumbnails

[Woodburn2006]

i have a couple of problems to discover and as im very new its hard understanding examples from the internet.

 

i am creating an image gallery and have a bar on the page which shows image thumbnails which can be clicked to see the larger image, i have the larger image ability sorted but in testing i used just php to create the menu. i had it so that the menu displays 5 thumbs then you can click next or prev to scroll through the images in the gallery. i had this all working with just php but i now want to do it with AJAX so that when you click next or prev then it loads the next or last 5 images without loading the whole page again.

 

i have created a php page that creates the thumbs menu and have tested it and it works fine. now i just need to incorporate it into my actual site. i have the place holders etc for it but i cannot work out how to load the ajax function to load the thumbs when the browser opens the site and also without knowing this i cannot test the thumbs menu to see if it works.

 

the second roblem i have is i do not know how to call ajax functions on simple text links, i have had a similar problem using images as links and have been helped nicely by the guys here but i am not advanced enough to mess about. i have tried what i might think works but it dosnt alot of the time. and as the next and prev buttons are text links i need to work out how its done

 

below is the codes of the pages i am using:

 

photos.php (where the viewer sees the images)

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="spacer_column"> </td>
    <td class="content_sub">
    
<!--start of left sub table -->   

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3" class="frame_sub_border_top">galleries</td>
      </tr>
      <tr>
        <td class="frame_border_left_right"> </td>
        <td class="sub_window" align='left'>
    
<?    
    $sql_galleries = "SELECT gallery,date,photo_id FROM photos ORDER BY date"; 

	$result_galleries = mysql_query($sql_galleries, $connection);
   		if (mysql_error()) { print "Database Error: $sql_news " . mysql_error(); }

	while($row_galleries = mysql_fetch_array($result_galleries)){
		extract($row_galleries);
		$photo_id = substr($photo_id, 0, 5);
		$photo_gallery = $gallery;

		if ($photo_gallery != $current_gallery){
			echo "<img src='images/folder.png' height='30px'> <a href='?go=photos&a=$photo_id'>".$photo_gallery."</a><br / >";
			$current_gallery = $photo_gallery;
		}
	}
?>
        
          </td>
        <td class="frame_border_left_right"> </td>
      </tr>
      <tr>
        <td colspan="3" class="frame_border_bottom"></td>
      </tr>
      <tr>
        <td colspan="3" class="spacer_row"></td>
      </tr>
      <tr>
        <td colspan="3" class="frame_sub_border_top">where are we?</td>
      </tr>
      <tr>
        <td class="frame_border_left_right"> </td>
        <td class="sub_window"></td>
        <td class="frame_border_left_right"> </td>
      </tr>
      <tr>
        <td colspan="3" class="frame_border_bottom"></td>
      </tr>
    </table>
    
<!--end of left sub table --></td>
    <td class="spacer_column"> </td>
    <td class="content_main_large">
    
<!--start of main content table -->

<table id="gallery" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" class="frame_main_border_top">
<?
    $sql_gallery_heading = "SELECT gallery FROM photos WHERE photo_id LIKE '$a%'"; 

	$result_gallery_heading = mysql_query($sql_gallery_heading, $connection);
   		if (mysql_error()) { print "Database Error: $sql_gallery_heading " . mysql_error(); }

	$rows_gallery_heading = mysql_fetch_array($result_gallery_heading);

	echo $rows_gallery_heading["gallery"]." (". mysql_num_rows($result_gallery_heading)." photos)";
?>
    </td>
  </tr>
  <tr>
    <td class="frame_border_left_right"> </td>
    <td class="main_window_photos_thumbs"><div id="thumbNails">thumbnails go here</div></td>
    <td class="frame_border_left_right"> </td>
  </tr>
  <tr>
    <td colspan="3" class="frame_border_bottom"></td>
  </tr>
  <tr>
    <td colspan="3" class="spacer_row"></td>
  </tr>
  <tr>
    <td colspan="3" class="frame_main_border_top">large photo</td>
  </tr>
  <tr>
    <td class="frame_border_left_right"> </td>
    <td class="main_window_photos_view">
    <div id="bigPic"><b>large image shown here</b></div>
    </td>
    <td class="frame_border_left_right"> </td>
  </tr>
  
  <tr>
    <td colspan="3" class="frame_border_bottom"></td>
  </tr>
  <tr>
    <td colspan="3" class="spacer_row"> </td>
    </tr>
</table>

<!--end of main content table -->    </td>
    <td class="spacer_column"> </td>
  </tr>
</table>

 

thumbnails.js

var xmlHttp

function showPhoto(a,page)
{
   xmlHttp = createXmlHttp()

   if (xmlHttp == null)
   {
      alert("Browser does not support HTTP Request");
      return;
   } 

   var url = "/AJAX/thumbnails.php";
   url += "?a=" + a;
   url += "&page=" + page;
   url += "&sid=" + Math.random();
   xmlHttp.onreadystatechange = stateChanged;
   xmlHttp.open("GET", url, true)
   xmlHttp.send(null)
} 

function stateChanged() 
{
   if(xmlHttp.readyState == 1 || xmlHttp.readyState == "loading")
   {
       document.getElementById("thumbNails").innerHTML="<img src='/images/ajax-loader.gif' border='0' alt='running' />";
   }

   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   { 
       document.getElementById("thumbNails").innerHTML=xmlHttp.responseText 
   } 
}
function createXmlHttp()
{
var xmlHttp;

try
{
	//try the hard way because IE7 doesn't implement XMLHttpRequest() properly
	var xmlVersions = new Array('MSXML2.XMLHTTP.6.0',
                                                      'MSXML2.XMLHTTP.5.0',
                                                      'MSXML2.XMLHTTP.4.0',
                                                      'MSXML2.XMLHTTP.3.0',
                                                      'MSXML2.XMLHTTP',
                                                      'Microsoft.XMLHTTP');

	//iterate through the array until we get one that works
	for(var i = 0; i < xmlVersions.length && !xmlHttp; i++)
	{
		xmlHttp = new ActiveXObject(xmlVersions[i]);
	}
}
catch(e)
{
	//try the easy way for the good browsers
	xmlHttp = new XMLHttpRequest();
}

//return object (if we have one) or null
return xmlHttp;
}

 

 

thumbnails.php

<?
$a=$_GET["a"];
$page=$_GET["page"];

include("db.inc");
include("/content/functions.php");
$connection = connect_to_sql($host,$usr,$pwd,$db);

if (!$connection)
		{
		die('Could not connect: ' . mysql_error());
		}

    $page = $_GET['page'] ? (int) $_GET['page'] : 1;

$limit= 5;                
    $query_count = "SELECT count(*) AS rowcount FROM photos WHERE photo_id LIKE '$a%'";     
    $result_count = mysql_query($query_count, $connection);     
    $row_count = mysql_fetch_array($result_count, MYSQL_ASSOC);
    $totalrows = $row_count['rowcount'];

$limitvalue = $page * $limit - ($limit);  
    $query_thumbs  = "SELECT * FROM photos WHERE photo_id LIKE '$a%' ORDER BY photo_id LIMIT $limitvalue, $limit";         
    $result_thumbs = mysql_query($query_thumbs) or die("Error: " . mysql_error());

    
    
echo"<table width='100%' border='0' cellspacing='5' cellpadding='0'>
     <tr>
     <td width='10%' class='photos_thumbs'>";

  
if($page > 1){  
    $pageprev = $page - 1; 
         
    echo ("<a href=\"$PHP_SELF?go=photos&page=".$pageprev."\"><< PREV</a>");  
}

    
echo"</td><td width='80%' valign='middle' class='photos_thumb_img'>";


$img_number = 0;
while ($row_thumbs = mysql_fetch_array($result_thumbs)) {
		extract($row_thumbs);
		if($img_number == 4){	
			echo "<img id='$photo_id' src='$url' height='65px' border='1'>";
		}else{
			echo "<img id='$photo_id' src='$url' height='65px' border='1'>     ";
			$img_number ++;
		}
	}

$numofpages = ceil($totalrows / $limit);  

echo"</td><td width='10%' class='photos_thumbs'>";

if($page < $numofpages){ 
        $pagenext = $page + 1; 
        echo("<a href=\"$PHP_SELF?go=photos&page=".$pagenext."\">NEXT >></a>");  
    }

echo"</td></tr></table>";

?>

 

this bit of javascript is in the heading of my main index.php file.

<script type=\"text/javascript\">
   			window.onload = function()
   				{
      				var gallery = document.getElementById('gallery');
      				var images = gallery.getElementsByTagName('img');

      				for(var i = 0; i < images.length; i++)
      					{
         					images[i].onclick = function()
         				{
            		showPhoto(this.id);
         				}
      				}
   				}
	</script>

 

any type of input it much appreciated

 

thanks alot