effetto scorrimento orizzontale per galleria immagini?

lucaeffe

effetto scorrimento orizzontale per galleria immagini?

Nel mio sito ho un div che contiene 8thumbs di immagini disposti su due colonne orizzontali.
In totale pero vorrei caricare 16 immagini,l'effetto che voglio ottenere è quello di far scorrere le immagini in orizzontale a gruppi di 8..un effetto simile allo w.slide javascript.
ho gia usato il w.slide per un'altro gruppo e nn so come ottenere l'effetto per 2 gruppi evitando il conflitto.
alla galleria di immagini vi è applicato il lightbox con jquery.
spero d'esser sta comprensibile..
vi carico l'html....

<title>Lucaeffe.it</title>

<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>

<link rel="stylesheet" type="text/css"  href="JS/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />



<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>

<script src="JS/jquery-lightbox-0.5/jquery/jquery.wslide.js"type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

            $("#parent2").wslide({
                width: 750,
                height: 250,
                autolink:'welcome',
                fade: true,
                duration: 2000
               }); 
            }); 

</script>




<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery{
    margin:250px 0 0 0;
    width:100%;
    height:2000px;
} ul { 
list-style: none;
padding:100px 0 0 50px;
margin:0 0 50px 0
} ul li { display: inline; } ul img {
    margin:0 auto;
    border: 5px solid #3e3e3e;
    border-width:0;
} ul a:hover img {
    border: 1px solid none;
    border-width:0;
    color: #fff;
} ul a:hover { color:;
}

</style>

<style type="text/css" media="screen">

            }
#parent2-wrap{
        
            }
        li{
            padding:30px 0 0 75px;
            margin:0 auto;
            color:#666;
            font-family:Arial, Helvetica, sans-serif;
            font-size:10px;
            line-height:20px;
            word-spacing:5px;
        }

       -menu a{
            padding:0 3px;
            border: 10px solid gray;
            background: #eeeeee;
            width:100px;
        }
       -menu a:hover,-menu a.wactive{
            border: 1px dotted gray;
            background: black;
            color:;}
            </style>

</head>
<body>

[.............]

<div id="gallery">
<div id="illustraction"><img src="Nuova cartella/image/illustractio.png" width="915" height="150" /></div>
<ul>
<li>
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" />
</a>
</li>
<li>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
<img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" />
</a>
</li>

[............]