image gallery next/previous

image gallery next/previous

Hello!
I'm new to jQuery. I've made simple image gallery (part is my code and part is code from on the internet). You can see it on www.odmori-se.com/galerija/test.php (click on image). Everything works but I want to add previous/next links below image when it's clicked and maximized. I don't know how to do that.
Thanks in advance!

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" language="javascript">
        jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
            //this.css("top", "25px");
            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
            return this;
        }
        $(document).ready(function() {       
            $("#thumbnail img").click(function(e){
           
                $("#background").css({"opacity" : "0.7"})
                                .fadeIn("fast");           
                           
                $("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>")
                          
                           .center()
                           .fadeIn("fast");           
               
                return false;
            });
               
            $(document).keypress(function(e){
                if(e.keyCode==27){
                    $("#background").fadeOut("fast");
                    $("#large").fadeOut("fast");
                }
            });
           
            $("#background").click(function(){
                $("#background").fadeOut("fast");
                $("#large").fadeOut("fast");
            });
           
            $("#large").click(function(){
                $("#background").fadeOut("fast");
                $("#large").fadeOut("fast");
            });
           
        });
    </script>
    <style>
    .slike {
    margin: 0.5em;
    border: 1px solid #ccc;
    padding: 1em;
    font-size: 10px; }
    img {
    border:none;
    }
    #thumbnail img {
        cursor: pointer;   
    }
    #large {
        display: none;
        position: absolute;
        background: #FFFFFF;   
        padding: 5px;
        z-index: 10;
        min-height: 200px;
        min-width: 200px;
        color: #336699;
    }
    #background{
        display: none;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: #000000;   
        z-index: 1;
    }
    </style>
    </head>
    <body>
    <?PHP
    $folder="slike";
        $akcija = opendir($folder);
        $prazno=0;
        while ($fajl = readdir($akcija)) {
            if ($fajl != '.' && $fajl != '..')
            {
                $prazno++;
                $fajlovi[$prazno]=$fajl;               
            }  
        }
        closedir($akcija);
    ?>
    <div align="center">
       <div id="thumbnail">
       <?php
        foreach ($fajlovi as $img) {
        ?>
            <a href="<? echo 'slike/'.$img ?>"><img class="slike" src="<? echo 'slike/'.$img ?>" height="160" width="240"/></a>       
            <?php
    }
    ?>
            <p id="large"></p>
       </div>
       <div id="large">
       </div>  
    <div id="background">
    </div>
    </div>
    </body>
    </html>