[Résolu]Galerie photos

Question

cubitus

20 Sep 2006 à 13:55

Bonjour !

j'ai essayé avec tutoriel de la galerie exposée mais je ne sais pas où mettre le dernier bloc de code ?? Smiley bawling

Pour l'instant cela donne cela ma page ! est ce que quelq'un peut me donner un tuyau pour que cela fonc Smiley langue

tionne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
}
#Layer1 {	position:absolute;
	left:326px;
	top:36px;
	width:177px;
	height:88px;
	z-index:1;
}
#Layer2 {
	position:absolute;
	left:104px;
	top:72px;
	width:128px;
	height:69px;
	z-index:2;
}
.Style15 {font-family: "Century Gothic"}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.Style17 {font-size: 9px}
.Style18 {font-family: "Century Gothic"; color: #FFFFFF;}
.Style10 {color: #FFFFFF}
.Style16 {
	font-size: 10px;
	font-family: "Century Gothic";
}
.Style19 {font-size: 10px}
.Style21 {
	font-family: "Century Gothic";
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
}
#Layer3 {
	position:absolute;
	left:221px;
	top:212px;
	width:350px;
	height:200px;
	z-index:3;
}
#Layer4 {
	position:absolute;
	left:608px;
	top:187px;
	width:190px;
	height:400px;
	z-index:4;
}
div#galerie
{
	width: 200px ;
	background: #eed ;
	border: 1px solid #dcb ;
	padding: 15px ;
	margin: 15px 30px ;
	text-align: center ;
	font: 0.9em 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 ;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div id="Layer2">
  <p class="Style17"><span class="Style18">37 rue Bouret<br />
    75019 Paris<br />
    Tel : 01 40 40 94 10<br />
    Fax : 01 40 40 90 54</span><span class="Style15"><br />
    <a href="mailto:contact@aepaysage.com">contact@aepaysage.com</a></span>
</div>
<div id="Layer3"><!-- TemplateBeginEditable name="Text" -->Text<!-- TemplateEndEditable --></div>
<table width=800 border=0 align=center cellpadding=0 cellspacing=0 bordercolor=#000000 bgcolor="#FE9903">
  <!--DWLayoutTable-->
<tr>
<td height=130 colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="796" height="128"><div align="center"><img src="../images/logo-vert.gif" alt="logovert" width="188" height="74"></div></td>
  </tr>
</table></td>
</tr>
<tr>
  <td height=27 colspan="5" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
      <td width="796" height="25" background="../images/barre.jpg">&nbsp;</td>
    </tr>
  </table>  </td>
</tr>
<tr>
  <td width="1" height=3></td>
  <td width="4"></td>
  <td width="129"></td>
  <td width="457"></td>
  <td width="209"></td>
</tr>
<tr>
  <td height=150></td>
  <td></td>
  <td colspan="2" valign="top"><table width="133" height="250" border="0">
      <tr>
        <td height="30" class="Style21"><a href="../acceuil.html">Accueil</a></td>
      </tr>
      <tr>
        <td height="30" class="Style21">L'agence</td>
      </tr>
      <tr>
        <td height="30"class="Style21">Les projets </td>
      </tr>
      <tr>
        <td height="30"class="Style21">La scenographie urbaine </td>
      </tr>
      <tr>
        <td height="30"  class="Style21">Contact</td>
      </tr>
  </table></td>
  <td rowspan="2" valign="top"><div id="galerie">
	<ul id="galerie_mini">
		<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>

		<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
		<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
		<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>

		<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
		<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
		<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>

		<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
		<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
	</ul>

	
	<dl id="photo">
		<dt>Titre de la photo 1</dt>
		<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
	</dl>

</div>

		<!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>

<tr>
  <td height=571></td>
  <td colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
  <td>&nbsp;</td>
</tr>



<tr>
  <td height=40></td>
  <td></td>
  <td colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
      <td width="793" height="20"><div align="center"><span class="Style2 Style16"><span class="Style53 Style10">Copyright &copy; 2006</span><strong> <a href="http://www.alyzes.com">A&amp;P-Design</a> </strong><span class="Style54 Style10">Tous droits   reserv&eacute;</span></span><span class="Style54 Style16 Style15 Style19"><br />
          <span class="Style10">Graphisme, Web design, conception et cr&eacute;ation de site Web -   A&amp;P-Design.France</span></span></div></td>
    </tr>
  </table>  </td>
</tr>
</table>


	 
	    
	  
    </table></td>
</tr>
</table>

</body>
</html>

Au secours c'est pour un site que je dois présenter lundi et je ne trouve pas ma solution Smiley bawling

Y a t-il un pilote dans l'ordinateur qui pourrait m'aider@+pluche
Modifié par cubitus (18 Oct 2006 - 10:44)

Deny

20 Sep 2006 à 15:50

Bonjour,

Et tu en as beaucoup comme ça ?
Parce que la taille te permet d'en mettre plus ou moins en largeur.
Après pour les faire défiler, il y a le fait que les images sont numérotées suivant l'ordre de déclaration ( à partir de 0).
Donc, au lieu de les faire bouger, tu pourrais 'seulement' changer l'affichage.
Tu les déclare en Array.
Tu en affiches entre 5 et 10 (?)
Et avec un setTimeout, tu change tes array d'affichage.
Modifié par Deny (20 Sep 2006 - 15:53)

cubitus

20 Sep 2006 à 16:58

merci de me répondre : je souhaiterais en mettre de 1 à 8/10 pour le début mais en petites vignettes et sur lesquelles ont pourrait s'arrêter ? surtout c'est la position qui m'interpelle elle doit être verticale et à droite de ma page Smiley decu

alors je ne sais pas par quoi commencer et où chercher Smiley murf

si vous pouvez m'aider ! @+c'est quoi les déclarer en Array

ghost

20 Sep 2006 à 19:16

Bonjour,

En css pur je ne sais pas pour un défilement automatique... à réfléchir par contre un code basé sur un background contenant un "ruban" de tes photos et des liens pour modifier le background-position c'est faisable mais tes images ne seront pas dans ton code html donc bonjour le référencement et l'accessibilité ... Alors t'en qu'à faire le javascript c'est pas mal ...

cubitus

21 Sep 2006 à 11:17

[#]Merci réponse Smiley cligne

en javascript ! d'accord mais où je peux trouver un code qui tienne la route sasn bug et surtout je veux pouvoir mettre mon défilement à la vertical et où je veux dans ma page j'en ai cherché tout l'été et à chaque fois c'était galère Smiley lol

si tu connais peux tu m'aider Smiley langue

?@+

cubitus

23 Sep 2006 à 00:38

Hello ??? ya quelqu'un qui peut m'aider Smiley bawling

?? j'ai essayé le tutoriels avec la galerie photos bon d'accord mais j'en cherche une verticale ? et comment je l'insère dans ma page dans un calque un tableau ? je ne sais pas le faire moi Smiley sweatdrop

est ce qu'on pourrait me donner plus amples renseignements = dans le genre tu mets ce code là dans un calque ou un tableau avec ce code là ? Smiley confused

je sais je suis un peu exigeante Smiley decu

mais j'essaye depuis un bon moment de chercher une solution et alsace création m'a pour l'instant toujours dépanné Bonne nuit et j'espère à bientôt @+

cubitus

23 Sep 2006 à 00:40

Merci de m'aider

ghost

24 Sep 2006 à 00:12

Bonjour,

Va jeter l'oeil là :
http://www.cssplay.co.uk/menu/scroll_gallery.html
même si c'est pas spécialement très orthodoxe, il y a pas mal de petits trucs sympas.

Bon courage

Sujet clos