Alimenter une galerie avec une requete SQL par jado - page 1

Salut à tous,

J’ai quelque souci concernant ma galerie et je ne trouve pas vraiment comment m y prendre puis que je suis novice en JavaScript. Je viens à vous pour voir si je peux trouver une certaine orientation.

En effet, je désire faire une galerie qui sera un peut comme celui que vous voyez sur la page d'accueil de Yahoo. J’ai déjà le code JavaScript mais mon problème est que ce code fonctionne uniquement lorsque je mets une liste des photos et leurs miniatures entre <li> et </li> de ma page d'accueil pour qu'ils s'affichent à tour de rôle.

Ce que je voulais est que la galerie pouvait s'alimenter en utilisant une requête SQL quelque soit pour la grande photo ou sa miniature. Peut être je me trompe PHP ne fonctionne pas avec JavaScript, je ne sais pas.

Je vous mets ici-bas le code qui me cause problème pour que vous m'aidiez à trouver la solution. Pour les codes CSS et JavaScript je ne les ai pas envoyé mais je peux aussi vous les envoyer si nécessaire.

Voici mon code sur la page d'accueil:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title> Monsite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		
		<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
	
</head>
<body>
	<div id="container">
       
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT --> 
  <?php

//recuperation des miniatures	                          

								try
						{
							$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
							$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '', $pdo_options);												
							
							$reponse = $bdd->query('SELECT chemin FROM slides');
							while ($donnees = $reponse->fetch())
							{
							?>
						  <div class="lof-main-outer">
								<ul class="lof-main-wapper">
								
								
									<li>
											<img src="images/<?php echo $donnees['chemin'];?>" title="Newsflash 2" height="300" width="450"/>           
											 <div class="lof-main-item-desc">
												<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

												<p>abracadabra abracadabra abracadabra abracadabra </p>
											</div>
									</li> 						
									
								</ul>  	
						  </div>
						  
						  <!-- end big photos --> 
						  
							<!-- NAVIGATOR -->

						  <div class="lof-navigator-outer">
								<ul class="lof-navigator">
									<li>
										<div>
											<img src="images/lofthumbs/<?php echo $donnees['chemin'];?>"/> 
											<h3> NewsFlash 1 </h3>
											<span>20.01.2010</span> abracadabra abracadabra abracadabra abracadabra
										</div>    
									</li>								
								      		
								</ul>
						  </div>
						  <?php
							}
							
							$reponse->closeCursor();
							   
						}

						catch(Exception $e)
										
							{
								// En cas d'erreur précédemment, on affiche un message et on arrête tout
								die('Erreur : '.$e->getMessage());
							
							}
												
?>
					</div> <!---end lofslidecontent45--->
												
															
	</div>											<!---end sliding news--->
</body>												
</html>

Voici le code qui fonctionne bien(veuillez ne pas vous ennuiyer car il est un peu long):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<title>Monsite</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="iyimbere" href="iyimbere.css" />

		
		<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
 $(document).ready( function(){	
		$('#lofslidecontent45').lofJSidernews( {interval:4000,
											   direction:'opacity',
											   duration:1000,
											   easing:'easeInOutSine'} );						
	});

</script>	 
	</head>
	
		<body id="home">
	
	<div id="container">
    		<h1><strong>Lof JSliderNews 1.0</strong> -  Jquery 1.3 & Easing plugin</h1>
      
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>
 <!-- BIG PHOTO --> 
  <div class="lof-main-outer">
  	<ul class="lof-main-wapper">
  		<li>
        		<img src="images/328f1c4c1118fb1d4a03c3e98f959074.jpeg" title="Newsflash 2" height="300" width="900">           
                 <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

                <p>In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...</p>
             </div>
        </li> 
       
        <li>

        	<img src="images/f4a1af3500a516a40e7ee75cdd8fd9be.jpeg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..</p>
             </div>
        </li> 
		<li>

        	<img src="images/d2a1d0d0443f4e4f501be3d050363d89.jpeg" title="Newsflash 5" height="300" width="900">            <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
                <p>In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...</p>
             </div>
        </li> 
        
        
      </ul>  	
  </div>
  <!-- END BIG PHOTO --> 
    <!-- SMALL PHOTO -->

  <div class="lof-navigator-outer">
  		<ul class="lof-navigator">
            <li>
            	<div>
                	<img src="images/lofthumbs/328f1c4c1118fb1d4a03c3e98f959074.jpeg" />
                	<h3> NewsFlash 1 </h3>
                  	<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
                </div>    
            </li>
             
            
           <li>
           		<div>
                    <img src="images/lofthumbs/f4a1af3500a516a40e7ee75cdd8fd9be.jpeg" />
                    <h3> NewsFlash 4</h3>
                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>
            </li>    
			<li>
           		<div>
                    <img src="images/lofthumbs/d2a1d0d0443f4e4f501be3d050363d89.jpeg" />
                    <h3> NewsFlash 4</h3>
                    <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
                </div>
            </li>    
            	
        </ul>
  </div>
 </div> 
<script type="text/javascript">

</script>
			  
</div>
</body> <!--- end body--->
</html>

et voici le code qui ne fonctionne pas. ce code je l'ai pris à partir de mon serveur car je travaille en local:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<title>monsite</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="iyimbere" href="iyimbere.css" />

		
		<link rel="stylesheet" type="text/css" href="css/layout.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
		<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
		<script language="javascript" type="text/javascript" src="js/script.js"></script>
		<script type="text/javascript">
		 $(document).ready( function(){	
				$('#lofslidecontent45').lofJSidernews( {interval:4000,
													   direction:'opacity',
													   duration:1000,
													   easing:'easeInOutSine'} );						
			});

		</script>	 
	</head>
	
	<body id="home">
	
	<div id="container">

    	
        
		<!------------------------------------- THE CONTENT ------------------------------------------------->
		<div id="lofslidecontent45" class="lof-slidecontent">
		<div class="preload"><div></div></div>
		 <!-- MAIN CONTENT --> 
		  <div class="lof-main-outer">
													  <div class="lof-main-outer">
										<ul class="lof-main-wapper">
										
										
											<li>
													<img src="images/328f1c4c1118fb1d4a03c3e98f959074.jpeg" title="Newsflash 2" height="300" width="450"/>           
													 <div class="lof-main-item-desc">

														<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

														<p>In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...</p>
													</div>
											</li> 
											
										</ul>  	
								  </div>
								  
								  <!-- end big photos --> 
								  
									<!-- NAVIGATOR -->

								  <div class="lof-navigator-outer">
										<ul class="lof-navigator">
											<li>
												<div>
													<img src="images/lofthumbs/328f1c4c1118fb1d4a03c3e98f959074.jpeg"/> 
													<h3> NewsFlash 1 </h3>
													<span>20.01.2010</span> In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...
												</div>    
											</li>

											
													
										</ul>
								  </div>
								  								  <div class="lof-main-outer">
										<ul class="lof-main-wapper">
										
										
											<li>
													<img src="images/f4a1af3500a516a40e7ee75cdd8fd9be.jpeg" title="Newsflash 2" height="300" width="450"/>           
													 <div class="lof-main-item-desc">
														<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

														<p>In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...</p>
													</div>
											</li> 
											
										</ul>  	
								  </div>
								  
								  <!-- end big photos --> 
								  
									<!-- NAVIGATOR -->

								  <div class="lof-navigator-outer">
										<ul class="lof-navigator">

											<li>
												<div>
													<img src="images/lofthumbs/f4a1af3500a516a40e7ee75cdd8fd9be.jpeg"/> 
													<h3> NewsFlash 1 </h3>
													<span>20.01.2010</span> In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...
												</div>    
											</li>
											
													
										</ul>

								  </div>
								  								  <div class="lof-main-outer">
										<ul class="lof-main-wapper">
										
										
											<li>
													<img src="images/d2a1d0d0443f4e4f501be3d050363d89.jpeg" title="Newsflash 2" height="300" width="450"/>           
													 <div class="lof-main-item-desc">
														<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>

														<p>In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...</p>

													</div>
											</li> 
											
										</ul>  	
								  </div>
								  
								  <!-- end big photos --> 
								  
									<!-- NAVIGATOR -->

								  <div class="lof-navigator-outer">
										<ul class="lof-navigator">
											<li>
												<div>

													<img src="images/lofthumbs/d2a1d0d0443f4e4f501be3d050363d89.jpeg"/> 
													<h3> NewsFlash 1 </h3>
													<span>20.01.2010</span> In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ...
												</div>    
											</li>
											
													
										</ul>
								  </div>
								  		</div>

		</div>
	</div>
</body> <!--- end body--->
</html>

excusez encore parce que le code n'est pas bien arrangé.

Mais comme vous puvez le remarquer le code du haut est presque le meme que le code d'en bas, particulierement le code qui affiche les photos, c'est le meme si je ne me trompe pas, pour le haut et le bas. mais au moment d'afficher les photos, le code de haut (celui avec tous les photos listées manuellement), les photos sont affichées sans probleme. mais pour l'autre code il affiche uniquement la premiere photo, en suite une sorte d'animation mais qui affiche du blanc au lieu d'une photo, jusq'à ce que la première photo arrive et après on affiche du blanc encore, ainsi de suite.

jado

29 novembre 2011 à 17:09:24

Golmote

29 novembre 2011 à 18:35:33

Montre le code HTML qui fonctionne.

Et montre le code HTML généré actuel qui ne fonctionne pas (clic droit -> afficher la source).

30 novembre 2011 à 18:39:57

30 novembre 2011 à 20:27:40

Pourquoi tu as autant de "navigator" dans ton deuxième code ? Un seul ne suffit pas ?
Tu n'es pas censé avoir autant de <li> dans le "main" que dans le "navigator" ?

Aussi, tu as deux "lof-main-outer"... Et je ne suis pas sûr que tu les refermes tous ?

Alimenter une galerie avec une requete SQL

Alimenter une galerie avec une requete SQL

Supprimer

Modérer

Signaler le message aux modérateurs