Sujet Précédent Sujet Suivant

Probleme insertion variable php

Résolu/Fermé
mont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024 - 20 nov. 2021 à 09:30
mont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024 - 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
A voir également:

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655
20 nov. 2021 à 09:40
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
20 nov. 2021 à 10:43
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
20 nov. 2021 à 16:41
Je crois avoir résolu mon problème en utilisant Lightbox
0
Réponse 4 / 7
mont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
Modifié le 20 nov. 2021 à 17:54
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 samedi 20 novembre 2021 Statut Membre Dernière intervention 20 novembre 2021
Modifié le 20 nov. 2021 à 20:03
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
21 nov. 2021 à 09:41
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
21 nov. 2021 à 12:53
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

programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
ALERT en php
snoopy -
appkech -

14 réponses
VBA : Range avec références variables..
Antoine -
MIKE59 -

7 réponses
balise de retour à la ligne en php
2I++ -
Naguez Abderraouf -

5 réponses