Pas de retour à la ligne entre deux images ?

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Pas de retour à la ligne entre deux images ?

Re: Pas de retour à la ligne entre deux images ?

par Doubrovski » 18 mars 2011, 09:44

En théorie j'aurais simplement besoin d'afficher des images de même taille d'un répertoire en 72 dpi.
J'aimerais peut être que l'image "télécharger" n'apparaisse que sous certaines conditions.
Et les fichiers rar contiennent l'image en 200 ou 300 dpi.

Je ne comprenais pas le lien d'édition car je n'ai jamais fait de système très complexe en php, je n'image pas à quoi ça peut servir pour une image par exemple. (un texte ok)

Merci pour le conseil du <li> !

Re: Pas de retour à la ligne entre deux images ?

par jojolapine » 18 mars 2011, 09:34

Bonjour,
Pour enlever les puces sur la liste :

Code : Tout sélectionner

ul { list-style-type:none; }
Pour le lien d'édition, c'est un exemple, je ne sais pas à quoi ressemble ton appli, je ne sais pas à quoi elle sert, tu pourrais très bien l'enlever, où le remplacer par le lien vers le fichier compressé en .zip ou .tar.gz où ce que tu veux ;)

Re: Pas de retour à la ligne entre deux images ?

par Doubrovski » 18 mars 2011, 02:59

Le code fonctionne très bien. (juste deux trois minis oublis)
C'est plus propre que le mien, les petites images télécharger ou edit s'affichent en dessous et je préfère largement.

Il y a juste un problème, les balises <li> génèrent des points sur la page devant chaque image. Je ne sais pas si c'est possible de les enlever, ou de leur attribuer la couleur du fond. Je testerai ça demain.

Sinon juste une petite question, les liens "d'édition" servent en théorie à... quoi ? ^^'
J'avoue que ça m'a l'air intéressant mais...

Merci pour le temps que tu as passé à résoudre ce problème, c'est très utile !

Re: Pas de retour à la ligne entre deux images ?

par jojolapine » 18 mars 2011, 00:13

Bonsoir,

Pour le coup de liste, c'est à toi de voir, des divs feront aussi l'affaire ;)
Et pour le positionnement, c'est effectivement un display: inline qui pourrait fonctionner
Mais un float:left fera aussi l'affaire ;)

Pour adapter ton code php, c'est pas très compliquer, il faut partir du html souhaité, et ensuite ça donnera ceci (j'ai adapté à ma façon d'indenter ;) ):
// Affichage miniatures
<?php

$urlphoto = "url complète du dossier";

$nomRepertoire = "nom du dossier";

if (is_dir($nomRepertoire)) {
	
	echo '<ul class="list_photos">';
	
	$dossier = opendir($nomRepertoire);
	while ($Fichier = readdir($dossier)){
		
		if (
				$Fichier != "." AND 
				$Fichier != ".." AND 
				(
					stristr($Fichier,'.gif') OR 
					stristr($Fichier,'.jpg') OR 
					stristr($Fichier,'.png') OR 
					stristr($Fichier,'.bmp')
				)
		){
			// Hauteur des miniatures
			$h_vign = "75";
			$taille = getimagesize($nomRepertoire."/".$Fichier);
			$reduc  = floor(($h_vign*100)/($taille[1]));
			$l_vign = floor(($taille[0]*$reduc)/100);

			// Nom du fichier sans extension
			$test = $Fichier;
			$extension_upload = substr(strrchr($test,'.'),0);
			$fichiersansex = rtrim($test,$extension_upload);

			// affichage
			?>
			<li>
				<!-- Vignette -->
				<a rel="groupe" href="<?php echo $urlphoto, '/',$Fichier;?>" alt="<?php echo $fichiersansex;?>" title="<?php echo $fichiersansex;?>">
					<img src="<?php echo $urlphoto, '/',$Fichier;?>" width="<?php echo $l_vign;?>" height="<?php echo $h_vign;?>" />
				</a>
				<br />
				<!-- lien fichier .rar -->
				<a href="<?php echo $urlphoto, '/',$Fichier;?>.rar" title="Haute qualité">
					<img src="rar.png" width="15" height="15" />
				</a>
				<!-- lien d'édition (par exemple) -->
				<a href="edit.php?file=<?php echo $urlphoto, '/',$Fichier;?>" title="Edition">
					<img src="edit.png" width="15" height="15" />
				</a>
			</li> 
			<?php   
		}
	}
	
	echo '</ul>';  
	  
	closedir($dossier);
}
else {
	
	echo' Le répertoire spécifié n\'existe pas';
}
     
Ensuite pour le Css, ceci devrait suffire:

Code : Tout sélectionner

ul.list_photos { margin:0; padding:0; } ul.list_photos li { float:left; with: ...; height:...; padding:0; margin:5px; }
Voilà rien n'est testé, tout est fait de tête, mais l'idée est là ;)
Bon courage!

Re: Pas de retour à la ligne entre deux images ?

par Doubrovski » 17 mars 2011, 22:01

Salut, merci !
Ce qui me trouble c'est que cette fois je dois inclure des conteneurs dans un code PHP qui automatise l'affichage des images.
Quand tu dis type:inline, tu veux dire display:inline ?
D'après mes tests le display:inline seul ne suffit pas. Il faut également un nowrap :

li {
display:inline;
white-space: nowrap;
}

-Si j'enlève le display:inline, j'ai une liste de miniatures avec un bouton télécharger à côté (groupe des 2 images / MAis retour à la ligne entre chaque groupe).
-Si j'enlève le nowrap ça ne marche pas, les groupes de deux images peuvent être sectionnées par un retour à la ligne selon la résolution.
L'association des deux semble fonctionner à condition que je ferme mon conteneur avant la fermeture du deuxième lien de la deuxième image : </li></a>.
Si je ferme le conteneur après la fermeture de ce deuxième lien, j'ai toutes les images sur la même ligne (dépassement à droite).

Quelle est l'avantage d'avoir un conteneur <li> plutôt que <div> ? J'utilise plutôt les <li> pour les listes à puces.
Merci pour les conseils ! Bonne soirée.

Re: Pas de retour à la ligne entre deux images ?

par jojolapine » 17 mars 2011, 20:37

Bonsoir,

Il suffit d'englober chaque groupe de deux images dans un conteneur (<li> par exemple) et tu le passes en type: inline.
Comme ça tu pourras aussi rajouter le bouton "éditer" plus tard sans trop te casser la tête ;)

Re: Pas de retour à la ligne entre deux images ?

par zeus » 17 mars 2011, 16:55

Modération :
Afin d'obtenir plus de réponses, le sujet a été déplacé dans un forum plus approprié.

Merci de prendre le temps de lire les règlements
ainsi que l'intitulé de chaque forum avant de poster un nouveau sujet.

Re: Pas de retour à la ligne entre deux images ?

par Doubrovski » 17 mars 2011, 16:37

Pas d'idées ?

Bon, mais je pense avoir trouvé la solution. (à confirmer)
Dans ma feuille CSS j'ai ajouté :

Code : Tout sélectionner

#noligne { white-space: nowrap; display: inline; }
(Je ne sais pas si c'est habituel de rajouter des <div></div> dans le code PHP. Je ne le faisais jamais habituellement).
Par contre le echo '</div>'; à la fin doit être placé avant la fermeture du lien de l'image télécharger. (avant <a/>) sinon toutes les images sont alignées sur la même ligne.

Pas de retour à la ligne entre deux images ?

par Doubrovski » 16 mars 2011, 22:41

Bonsoir ! J'aurais besoin de conseils ou d'idées pour un petit problème.

J'ai mis en place un petit système qui permet :
-d'afficher toutes les images d'un répertoire
-créer des miniatures qui ont la même hauteur

Ensuite j'ai adapté le code PHP au script de Fancybox (lightview gratuit) qui permet d'afficher des images facilement avec un assombrissement de l'écran en javascript. Le script Fancybox est donc automatisé, on peut cliquer sur chaque miniature pour afficher l'image originale, chaque image est reliée à la suivante comme dans une galerie, les champs "alt" et "title" des images sont générés automatiquement par le PHP.

Puis j'ai ajouté une petite image qui s'affiche à côté de chaque miniature, qui permet de télécharger un fichier .rar qui porte le même nom que l'image.
Je voudrais être sûr que cette petite image pour télécharger le .rar reste collée à la miniature, même en cas de changement de ligne selon la résolution des écrans.
Le truc c'est que je voudrais que le changement de ligne se fasse uniquement entre chaque groupe de deux images. (1 photo+1 image "télécharger").
Je veux bien mettre un espace insécable, mais ça semble ne pas fonctionner, et en plus j'aimerais qu'il n'y ait pas d'espace entre ces deux images.
J'ai aussi testé white-space: nowrap; avec ma feuille CSS, autour du code PHP. Ça a comme conséquence de mettre toutes les miniatures sur une ligne et ça dépasse sur le Menu du site. Il faudrait que le nowrap ait un effet sur une partie du code php seulement (et encore je doute que ça marche).

Je peux toujours changer ma feuille CSS pour que la page soit calculée en pixels et non en pourcentages, je serais donc quasiment sûr qu'il n'y a pas de différences d'affichage avec les résolutions d'écran. Mais je préfère en pourcentages.

Edit (je mets le code PHP) :
<?php

$urlphoto = "url complète du dossier";

$nomRepertoire = "nom du dossier";
if (is_dir($nomRepertoire))
   {
   $dossier = opendir($nomRepertoire);
   while ($Fichier = readdir($dossier))
       {
      if ($Fichier != "." AND $Fichier != ".." AND (stristr($Fichier,'.gif') OR stristr($Fichier,'.jpg') OR stristr($Fichier,'.png') OR stristr($Fichier,'.bmp')))
        {
        // Hauteur des miniatures
        $h_vign = "75";
        $taille = getimagesize($nomRepertoire."/".$Fichier);
        $reduc  = floor(($h_vign*100)/($taille[1]));
        $l_vign = floor(($taille[0]*$reduc)/100);

        // Nom du fichier sans extension
	$test = "$Fichier";
	$extension_upload = substr(strrchr($test,'.'),0);
	$fichiersansex = rtrim($test,$extension_upload);

        // Affichage miniatures
        echo '<a rel="groupe" href="', $urlphoto, '/',$Fichier, '" alt="',$fichiersansex, '" title="',$fichiersansex, '">'; 
        echo '<img src="', $urlphoto, '/',$Fichier, '" ';
        echo "width='$l_vign' height='$h_vign'>";
        echo "</a>&#xA0;"; 

        // Affichage image télécharger
        echo '<a href="', $urlphoto, '/', $fichiersansex, '.rar" title="Haute qualité">'; 
        echo '<img src="url image download" ';
        echo "width='15' height='15'>";
        echo "</a> ";      
          }
        }    
   closedir($dossier);
   }else{
   echo' Le répertoire spécifié n\'existe pas';
   }
?>

Merci beaucoup si vous pouvez me conseiller !