ayuda con fotos

os pongo aqui mi codigo de la galeria de imagenes. aparece una foto en el centro y alrededor muchas en pequeño, al pulsar una de fuera pasa a verse en el centro en tamaño mas grande.
Lo que quiero es que aparezca una en el centro desde el principio; es decir, ahora mismo asta que no pulsa una el medio esta en blanco y eso queda un poco feo, me imagino que tendre que definir una foto pero como lo hago?
El codigo html:
<ul id="gallery">

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>
<li class="rgt"><a href="#nogo">
[contenido no disponible]</a>

<li class="lft"><a href="#nogo">
[contenido no disponible]</a>
<li class="rgt"><a href="#nogo">
[contenido no disponible]</a>
<li class="lft"><a href="#nogo">
[contenido no disponible]</a>
<li class="rgt"><a href="#nogo">
[contenido no disponible]</a>
<li class="lft"><a href="#nogo">
[contenido no disponible]</a>
<li class="rgt"><a href="#nogo">
[contenido no disponible]</a>
<li class="lft"><a href="#nogo">
[contenido no disponible]</a>
<li class="rgt"><a href="#nogo">
[contenido no disponible]</a>
<li class="lft"><a href="#nogo">
[contenido no disponible]</a>
<li class="rgt"><a href="#nogo">
[contenido no disponible]</a>

<li class="pad">

<li class="lft"><a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>

<a href="#nogo">
[contenido no disponible]</a>
<li class="rgt"><a href="#nogo">
[contenido no disponible]</a>


codigo css:

ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background:#888 url(graff/g26.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}
}