Probleme insertion variable php

Résolu

mont_dani Messages postés 249 Statut Membre -
mont_dani Messages postés 249 Statut Membre - 21 nov. 2021 à 12:53

Bonjour

J'ai récuperé un script pour affichage de photo en gran en cliquant sur une miniature qui fonctionne trés bien.

Mais quand je veux inserer une variable php dans le JS, cela ne fonctionne plus:

Voici le script:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<style >

.body {
  background: black;
}

#fermer {
   position: relative;
   top: 10px;
   margin-left: 10px;
}

.modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.8)
}

.modal-content{
margin: auto;
display: block;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}


.close {
text-decoration:none;
float:right;
font-size:24px;
font-weight:bold;
color:white
}

.container1 {
width:200px;
display:inline-block;
}

.modal-content, #caption {   
  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

</style>

</head>
<body>
 
	 <div class="container1">
	 <!-- la photo en miniature  -->
    <img src="../../image/galeria/mini/42111a (5).jpg" style="max-width:100%;cursor:pointer"
	onclick="onClick(this)" class="modal-hover-opacity">
  </div>
  <!-- la variable pour la photo plus grande  -->
 <?php
 $photo = "../../image/galeria/42111a (5).jpg";
 ?>


<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">X     </span>
  <div class="modal-content">
  <!-- la photo plus grande 
  code d'origine  <img id="img01" style="max-width:100%">
  </div>   -->
    <img id="<?php echo $photo; ?>" style="max-width:100%">
  </div>
</div>
 
<script>
function onClick(element) {
	<!-- code d'origine  document.getElementById("img01").src = element.src; -->
  var photo = "<?php json_encode($photo); ?>";
  (document.getElementById(photo).src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>

</body>
</html>

Merci pour votre aide

Afficher la suite

7 réponses

Réponse 1 / 7
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour
Il va te falloir passer par de l'Ajax.

Tu trouveras de nombreux exemples /tutos sur le net à ce sujet.
Par exemple
https://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery
0
Réponse 2 / 7
mont_dani Messages postés 249 Statut Membre

Bonjour Jordane.

Ouf...

Je pesnais que cela pouvait se faire en JS sans passer par Ajax.

Je n'ai jamais utiliser Ajax et cela me semble un peu compliquer pour l'utiliser dans une seule fonction de ma web.

Pourrais-tu me donner un coup de main.

Il y aurait-il un autre moyen d'afficher en grand une photo en cliquant sur une photo mini?

Merci
0
Réponse 3 / 7
mont_dani Messages postés 249 Statut Membre

Je crois avoir résolu mon problème en utilisant Lightbox
0

mont_dani Messages postés 249 Statut Membre

J'ai en effet obtenu ce que je voulais avec lightbox.

Il me reste un problème: A l'affichage de la galerie, la première photo de chaque colonnes n'a pas de lien.

Si tu veux voir sur mon site http://lenergie-vive.com/lacansera/es/galeria/page_galeria.php en sélectionnant dans la liste déroulante "flechas amarillas 1"

Peut-être dois-je le poster sur un autre forum?

Merci pour ton attention.

Voici le script

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../../lightbox/dist/css/lightbox.min.css">
  <script type="text/javascript" src="jquery.mlens-1.2.min.js"></script>
        <link rel="stylesheet" href="../../css/menu.css">
		<link rel="stylesheet" href="../../css/general.css">
		<link rel="stylesheet" href="../../css/libro.css">
		<link rel="stylesheet" href="../../lightbox/dist/css/lightbox.css">
</head>
<body>

 
  
		<br>
		<form class="center" action="" method="post">
		<select class="galeria" name="pais" >
			<option value="">Elige una categoria</option>
			<option value="11111">La trapa</option>
			<option value="11112">Ruta del rio Loio</option>
			<option value="11121">Catedral del mar</option>
			<option value="11131">Catarata de Fonsagrada</option>
			<option value="13121a">Costa da Morte</option>
			<option value="42111a">Flechas amarillas (1)</option>
			<option value="42111b">Flechas amarillas (2)</option>
			<option value="42111c">Flechas amarillas (3)</option>
			</select><br>
			<input class="galeria" type="submit" name= "valider " value="Valider" />
		</form>
		<br>
		<?php 
		
		

		
		if (!empty($_POST['pais'])){
						
			if(isset($_POST))
			{
			   $categoria = $_POST["pais"];
				
				$repertoire ="../../image/galeria";
				$fichier = $repertoire."/".$categoria;
				$files = glob($fichier.'*'); // toute les photo qui commence par
				
				$repertoire_mini="../../image/galeria/mini";
				$fichier_mini = $repertoire_mini."/".$categoria;
				$files_mini = glob($fichier_mini.'*'); // toute les photo qui commence par
				
				
				$lines = count($files_mini); // nombre de photo
				$nb_colonne = 3; // nombre de colonnes a l'affichage
				$nb_imgCel = ceil($lines/$nb_colonne); // Nombre d'images par cellule

				//variable utilisées pour recréer un array organisé comme tu le souhaites
				$arrG = [];
				$arrF = [];
				$row = 0;
				$col = 0;
				$K = 0;
				
				

				//on boucle sur chaque fichier :
				foreach($files_mini as $F){
				 if($col>0 && $col % ($nb_colonne-1) == 0 && $K>=$nb_imgCel){
				   $col=0;
				   $K=0;
				   $row++;   
				 }
				  if($K>0 && $K % $nb_imgCel == 0){
				   $col++;
				   $K=0;
				 }
				 
				 $arrF[$row][$col][] = $F;
				 $K++;
				}

				//pour voir à quoi ressemble l'array
				
				echo "<table width='60%'  align='center'>";
				foreach($arrF as $Row ){
				  echo "<tr>";
				   foreach($Row as $Col){
					 echo "<td width='30%' style='vertical-align: top;>";
					
							foreach($Col as $img )	
							
							{
							$tabUrl = parse_url($img);
							$fichero =basename ($tabUrl["path"]);
							
							echo "
							<section>
							<div>
							<a  href='../../image/galeria/$fichero' data-lightbox='example-set' ><img class='catimage' src='../../image/galeria/mini/$fichero' alt=''/></a>
      						</div>
							</section>";
						}
				  echo "</td>";
				   }
				  echo "</tr>";
				}
				
					
			}  
		}

 ?>

  <script src="../../lightbox/dist/js/lightbox-plus-jquery.min.js"></script>

</body>
</html>

Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 7
Noah_SABOURET Messages postés 1 Statut Membre
Il y a un problème à la ligne 87 au niveau du style de la balise <td>

elle devrait être comme ça :
```
<td width='30%' style='vertical-align: top;'>
```
0
Réponse 6 / 7
mont_dani Messages postés 249 Statut Membre

Super et désolé pour cette erreur parfaitement visible qui m'a échappé.

Merci à vous tous pour votre aide.
0

mont_dani Messages postés 249 Statut Membre

Bonjour

J'ai utiliser le script précèdent et j'ai inclus un autre pour faire un affichage aléatoire de photo lors de l'ouverrture de la page.

Tout va bien sauf que je n'arrive pas à réduire l'affichage des photo à une seule ligne. Quand il affiche le nombre de photo déterminée par ligne il ajoute une autre ligne et je veux me limiter a une seule ligne.
Voici e script:

<?php
				// extensiones a mostrar
				$extensions = array('jpg','jpeg','gif','png','bmp');

				// nombre del directorio
				if (!empty($_POST['pais']))
					{
					$folder_image_name = "/lacansera/image/vide/";
					}
					else
					{
					$folder_image_name = "/lacansera/image/galeria/mini/";	
					}
				// ruta del directorio
				$images_folder_path = $_SERVER['DOCUMENT_ROOT'].$folder_image_name;

				// url del directorio
				$url_to_folder = 'http://'.$_SERVER["SERVER_NAME"].$folder_image_name;

				// array de imagenes
				$images = array();
				$nb_cola = 3;
				$nb_imageCel = 4; // Nombre d'images par cellule

				//variable utilisées pour recréer un array organisé comme tu le souhaites
				$arrN = [];
				$arrM = [];
				$rowa = 0;
				$cola = 0;
				$J = 0;

				// abrimos directorio y mostramos imagenes
				if ($handle = opendir($images_folder_path))
					{
					while (false !== ($file = readdir($handle))) 
						{
						if ($file != "." && $file != "..") 
							{

								  // obtener extension del archivo
								  $ext = strtolower(substr(strrchr($file, "."), 1));
									
									  // almacenamos en el array
								  if(in_array($ext, $extensions))
								{
									$images[] = $url_to_folder.$file;
								}
							}
						}
					closedir($handle);
					}
					
			if (empty($_POST['pais']))
				{
				if(!empty($images))
					{ // si tenemos algo que mostrar...
						//on boucle sur chaque fichier :
						foreach($images as $M)
						{
							if($cola>0 && $cola % ($nb_cola-1) == 0 && $J>=$nb_imageCel)
							{
							$cola=0;
							$J=0;
							$rowa++;   
							}
							if($J>0 && $J % $nb_imageCel == 0)
							{
							$cola++;
							$J=0;
							}
						 
						$arrM[$rowa][$cola][] = $M;
						$J++;
						}
					echo "<table width='60%'  align='center'>";
						foreach($arrM as $Rowa )
							{
							 if($rowa == 1)
							 {echo "<tr>";
							break;
							 $rowa++;}
							
							foreach($Rowa as $Cola)
							{
								echo "<td width='30%' style='vertical-align: top;'>";
								foreach($Cola as $src )	
								{ 
									
									
									{	
										$rand_key = array_rand($images, 1);
										$src = $images[$rand_key];
										$tabUrl = parse_url($src);
										$fichero =basename ($tabUrl["path"]);
													
										echo " 
										<section>
											<div>
											<a  href='../../image/galeria/".$fichero."' data-lightbox='example-set'><img class='catimage' src='".$src."' align='absmiddle' /></a>
											</div>
										</section>";
									
										
									}
								}
								echo "</td>";
							   }
							 echo "</tr>";
							}
					
					}
					else
					{
						// nada que mostrar
						echo 'No se encontraron imagenes en <strong>'.$images_folder_path.'</strong>';
					}
					
		
				
					
					<BR>
					<BR>
					<BR>';
				}
					?>
  <script src="../../lightbox/dist/js/lightbox-plus-jquery.min.js"></script>

J'ai tentè un if($row == 1) break; mais sans succès.

Comment dois-je faire?

Merci pour votre aide.

Probleme insertion variable php

7 réponses

Discussions similaires

Newsletters