Mini galerie CSS

Bonjour à tous,

J'ai créé un cadre avec une seule photo, et je souhaite insérer plusieurs petites images a coté et lorsqu'on click sur les petites images de les agrandir à l'intèrieur à la place de la photo.

Mon css :

#clear ul{
overflow: hidden;
width: 90%;
margin: 0; padding: 10px;
list-style: none;
background: #FFF;
}
#clear ul li{
float: left;
width: 250px; height: 60px;
margin: 0px;
padding-right:15px;
font-size:10px;
	/* Correction du Doubled Margin Bug */	
	display: inline;
}
#clear ul li p{
margin:0px;
padding:0px;
}
#clear ul li.retour {
clear: left;
margin:0px;
}
#clear ul li.retour p{
text-align:center;
}
.cadre{
width:530px; height:240px;
margin-bottom:10px;
padding:0px;
border: solid 1px #705206;
}

et le html

<div id="clear">
	<ul>
	<div class="cadre">
		<li class="retour" style="height: 150px;">
		<img src="http://localhost/chemin_image.jpg" title="image1"/>
		<p>contenu titre</p>
		</li>
		<li style="height:auto; width: 235px;">
		<p>contenu1</p>
  		<p>contenu2</p>
  		<p>contenu3</p>
  		<p>contenu4</p>
		</li>
	</div>
	</ul>

Merci de vos aides.

Bonjour,

Je pense que le plus simple serait de se tourner vers le javascript. Il y a un très bon tuto sur alsacréations (voir ici).

Merci je vais essayer de l'adapter avec ce que j'ai.

J'ai assez réussi ma galerie mais je n'arrive pas à mettre le texte à coté de l'image. (car la grande photo est en clear:both, si je met float:left, ca s'affiche pas bien)

L'adresse du site pour que vous visualiser : http://www.euro-sud.fr/?page_id=15

Voici le css que j'ai modifié :

div#galerie{
	width: 650px ;
	height:auto;
	background: #eed ;
	border: 1px solid #dcb ;
	padding: 15px ;
	margin: 15px 15px ;
	font: 0.8em Georgia, serif ;
}
ul#galerie_mini{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}
ul#galerie_mini li{
	float: left ;
}
ul#galerie_mini li a img{
	margin: 2px 1px ;
	border: 1px solid #dcb ;
}
dl#photo{
	clear:both;
	margin: 0 auto ;
}
dl#photo dt{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #dcb ;
}
dl#photo dd{
	margin: 0 ;
}
dl#photo img{
	border: 1px solid #dcb ;
}
dl#texte{
font-size:11px;
margin:10px;
}

Merci.
Modifié par jpp13 (03 Jul 2007 - 14:02)

Aidez moi SVP je galere vraiment, si j'enleve le clear:both, et que je met un float:left, ca marche lorsqu'il a pas mal de petites photos, mais pas quand il n'y en a que 3 par exemple.

Je vous montre le html aussi si vous voulez :

<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="chemin1.jpg" title="titre 1"><img src="chemin1.jpg" alt="Les Sévillanes" height="48" width="80" /></a></li>
		<li><a href="chemin2.jpg" title="titre 2"><img src="chemin2.jpg" alt="Les Sévillanes 2" height="48" width="80" /></a></li>
		<li><a href="chemin3.jpg" title="titre 3"><img src="chemin3.jpg" alt="Les Sévillanes 3" height="48" width="80" /></a></li>		
	</ul>

	<dl id="photo">
		<dt>Les Sévillanes</dt>
		<dd><img id="big_pict" src="chemin.jpg" alt="titre" /></dd>
	</dl>
	
	<div id="texte">
		<p>Adresse</p>
		<p>Page en cours de construction ...</p>
	</div>
	
</div>
</div>

Pour faire simple, j'aimerais que mon bloc #texte (qui contient le texte) se mette à coté de la photo (comme en float:left)

Merci de votre aide...
Modifié par jpp13 (24 Jul 2007 - 12:18)