YA: Simple Image Galler From Database WOC

<?php
function html_apos($str){ /*    Helps to perserve syntax errors with apostrophies in text, by converting to html characters codes    */
    return str_replace("'", "&#39;", $str);
}
require("includes/connect.php");
$id = mysql_real_escape_string( $_GET["id"] );
$sql = "SELECT * FROM project_gallery WHERE id='$id'";
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_array($result);
$name = $row['name'];
$location = $row['location'];
$shortdesc = $row['shortdesc'];
$photo = $description = $description_title = Array();
for($i=1;$i<7;++$i){
    $photo[] = $row['photo' . $i];
    $description[] = $row['description' . $i];
    $description_title[] = $row['description_title' . $i];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
            var num=0;
            var imgArray = [];
<?php
for( $i=0; $i<6; ++$i){
    echo '            ' . 'imgArray[' . $i . "] = ['projects/" . $id . "/" . $photo[$i] . "','" . html_apos($description_title[$i]) . "','" . html_apos($description[$i]) . "'];" . PHP_EOL;
}
?>
            function byId(id){/*    Cross Browser getElementById()    */
                if (document.layers) {
                    return document.layers[id];
                } else if (document.all) {
                    return document.all[id];
                } else if (document.getElementById) {
                    return document.getElementById(id);
                } else{
                    return null;
                }
            }
            function slideshow(dir) {
                num += dir;
                if(num < 0){
                    num = imgArray.length - 1;
                }else if( num == imgArray.length){
                    num = 0;
                }
                byId('mypic').src = imgArray[num][0];
                byId('title').innerHTML = imgArray[num][1];
                byId('desc').innerHTML = imgArray[num][2];
                return false;
            }
            window.onload = function (){
                slideshow(0);
            }
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>More infomation on <?php echo $name; ?></title>
        <!-- <link href="includes/gallery_style.css" rel="stylesheet" type="text/css" /> -->
    </head>
<body>
    <div id="container" style="min-height:400px;">
        <!-- First Image is now loaded by Javascript -->
        <img src="#" id="mypic" name="mypic" border="0">
        <br>
        <!-- Place the text for the first image here -->
        <p id="title">&nbsp;</p>
        <p id="desc">&nbsp;</p>
        <p>
            <a href="#" onclick="return slideshow(-1);">« Previous</a> |
            <a href="#" onclick="return slideshow(1);"> Next »</a>
        </p>
    </div>
</body>
</html>