Probleme insertion variable php

Résolu
mont_dani Messages postés 232 Date d'inscription   Statut Membre Dernière intervention   -  
mont_dani Messages postés 232 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 232 Date d'inscription   Statut Membre Dernière intervention  
 
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 232 Date d'inscription   Statut Membre Dernière intervention  
 
Je crois avoir résolu mon problème en utilisant Lightbox
0
Réponse 4 / 7
mont_dani Messages postés 232 Date d'inscription   Statut Membre Dernière intervention  
 
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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Noah_SABOURET Messages postés 1 Date d'inscription   Statut Membre Dernière intervention  
 
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 232 Date d'inscription   Statut Membre Dernière intervention  
 
Super et désolé pour cette erreur parfaitement visible qui m'a échappé.

Merci à vous tous pour votre aide.
0
Réponse 7 / 7
mont_dani Messages postés 232 Date d'inscription   Statut Membre Dernière intervention  
 
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.
0

Discussions similaires

vérifiez la variable d'environnement TEMP
erwan38 -
F4 -

72 réponses