Image Gallery

Hello Rose: I am working on a website for a customer and need your guidance. The specific piece of the site is an image gallery. There are 4 main images on the page and I would like to create a group of images within each image window. As it stands all of the images from each group pull from the same location. How do I separate each one?

I added the coding below.

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.hoverIntent.minified.js"></script>
<script src="js/jquery.ui.totop.js"></script>  
<script src="js/jquery.prettyPhoto.js"></script>
<script>
$(window).load(function(){
$().UItoTop({ easingType: 'easeOutQuart' });
});
$(function(){
$('.lightbox-image').prettyPhoto({theme:'facebook',autoplay_slideshow:false,social_tools:false,animation_speed:'normal'}).append('<span></span>').hover(function(){$(this).find('>img').stop().animate({opacity:.5})},function(){$(this).find('>img').stop().animate({opacity:1})})
}) 
</script>

<section id="content">         
<div class="container_16">
    <div class="wrapper">
      <div class="grid_16">
            <h2 class="padd-2">our GALLERY </h2>
      </div>
        <div class="grid_5">
            <a href="images/nereida cake.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/ncake.png" alt="" width="280" height="262"></a>

    <a href="BIG PHOTO LINK" rel="prettyPhoto[gallery1]" title="cape town tourism"></a>
...
<a href="BIG PHOTO LINK" rel="prettyPhoto[gallery1]" title="cape town tourism"></a>                                                                     
            <a href="#" class="bold color-1 hov-1">Wedding Cakes  </a>
            <p class="bot-3"> </p>
      </div>
        <div class="grid_5"><a href="images/cal tech room setup.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/weve.png" alt="" width="280" height="261"></a>
            <a href="#" class="bold color-1 hov-1">Corporate Events </a>
            <p class="bot-3"> </p>
      </div>
        <div class="grid_5"><a href="images/appetizers art gallery.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/app.png" alt="" width="280" height="262"></a><a href="#" class="bold color-1 hov-1">Parties</a>
            <p class="bot-3"> </p>
      </div>
        <div class="clear"></div>

        <div class="grid_5">
            <a href="images/mikes wedding 1.jpg" class="lightbox-image bot" data-gal="prettyPhoto[1]"><img src="images/wedng.png" alt="" width="280" height="262"></a>
            <a href="#" class="bold color-1 hov-1">Weddings</a>
            <p class="bot-3"> </p>
      </div>
        <div class="clear"></div>

        <div class="clear"></div>

    </div>
    <p>
      <!--the end of wrapper-->
    </p>
    <p>                     </p>
</div>

Thank you.......