Diaporama basique adapté à mon code

Bonjour,
J'ai crée un site pour partager mes expériences de voyage. Pour l'instant on clique sur des miniatures pour afficher les images en grand. J'aimerais que les images défilent lorsqu'on clique sur les flèches qui apparaissent sur les côtés de l'image. Mais je ne sais pas comment faire.
Voici en gros comment mon code fonctionne:
Dans ma page principale, les images sont affichées ainsi:
<img class="miniature" src="image_mini/afrique_du_sud(5).JPG" alt="Lionnes" title="Lionnes" onclick="openbox('image/afrique_du_sud(5).JPG','Lionnes','portrait');"/>
ma fonction openbox permet d'afficher l'image en grand dans une fausse popup. Voici la structure de cette fausse popup:
<div id="box">
<div id="boxheader"></div>
<span id="boxclose" onclick="closebox()"> </span>
<div id="boxcontent" > </div>
</div>
Les images sont contenuer dans la div boxcontent.
Je ne demande pas forcément un code tout fait mais simplement des pistes pour démarrer: utiliser des arrays? en PHP? en JS?...
Voici un lien vers une page de mon site pour vous faire une idée : http://www.travel-obsession.fr/afrique_du_sud/afrique_du_sud.php?chemin=afrique_du_sud
Merci de votre aide.
Ninjokin