Manipuler des images

**Yepazix** · 04/01/2012, 04h58

Bonjour,
Je suis toujours occupé à jouer avec PHP...
J'ai réussi à faire une page qui ouvre un dossier spécifique et affiche des miniatures de 180X180 des images qu'il contient.
C'est déjà bien mais plusieurs questions en découle !

1/ Mes images apparaissent déformées, je voudrais savoir s'il est possible qu'elle se "réduisent" à la taille définie 180X180 mais en gardant leur proportions ?

2/ J'ai un souci d'affichage, les miniatures se mettent l'une sous l'autre.
Ce que je voudrais faire est un peut complexe (pour moi). Je voudrais avoir 4 images dans le dessus de mon écran et a leur gauche une fleche vers la gauche, et à leur droite une fleche vers la droite, ainsi je pourrais faire "défiler" les miniatures par 4.

3/ Finalement je voudrais sous ces 4 images créer une zone ou quand on click sur l'image elle s'affiche en grand.

Quelqu'un a de suggestions ?

**Gats** · 04/01/2012, 11h27

Salut,

1) Cela va dépendre de la taille d'origine de tes images. Il me semble que si le ratio original n'est pas compatible avec le ratio voulu en miniature tu ne pourras pas forcer les deux dimensions sans déformer les images. (corriger moi si je me trompe ?) Ou bien peut être qu'il faudra jouer sur des paramètres tel que le cropping
2) & 3) Ce que tu demandes pourrait être fait en php, mais jete un coup d'oeil sur ce plugin jquery qui est la parfaite illustration de ce que tu veux.

http://flowplayer.org/tools/demos/sc...e/gallery.html

**Yepazix** · 05/01/2012, 01h58

C'est en effet absolument superbe et c'est exactement ce que je cherche.
Malheureusement quand j'ai tenté de comprendre ne fusse que le début de la base du commencement de la description du machin mon cerveau à fait une bonne vieille Guru Méditation (pour les connaisseurs oldies).

Ca dépasse largement ce que je suis capable de comprendre... pour le moment (et oui l'espoire fait vivre).

En fait ce que j'espère trouver c'est un truc comme ça tout fait (même payant) a inclure dans mon site en précisant juste un dossier que je remplirais avec des images...

mais bon la je rêve peut être...

Petite précision de dernière minute : j'ai exploré la rubrique SCRIPT PHP de ce site. Il y a des trucs pas mal mais le souci c'est qu'il faut une base SQL et ça, ça me gonfle. Moi je cherche juste un truc tout simple... Oui je sais il y en a un mais l'affichage est vraiment immonde !

**Gats** · 05/01/2012, 11h46

Utilisation du plugin jquery :

l'entête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
	<title>jQuery Tools standalone demo</title>
 
	<!-- appel de la librairy jquery + le plugin tools -->
	<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
        <!-- styles du plugin -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-horizontal.css" />
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />
 
	<style>
	/* styles pour la grande image  */
	#image_wrap {
		/* dimensions */
		width:677px;
		margin:15px 0 15px 40px;
		padding:15px 0;
 
		/* centered */
		text-align:center;
 
		/* some "skinning" */
		background-color:#efefef;
		border:2px solid #fff;
		outline:1px solid #ddd;
		-moz-ouline-radius:4px;
	}
	</style>
</head>

Le corps :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<body>
<!-- le conteneur de la grande image -->
<div id="image_wrap">
	<!-- On commence avec une une simple image GIF 1x1 pixel transparente -->
	<img src="http://static.flowplayer.org/tools/img/blank.gif" width="500" height="375" />
 
</div>
 
<!-- HTML structures -->
<!-- "bouton précédent" action -->
<a class="prev browse left"></a>
 
<!-- le conteneur pour charger le plugin scrollable -->
<div class="scrollable">   
   <!-- le conteneur des images (5 par 5) -->
   <div class="items">
      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
         <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
         <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
         <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
      </div>    
      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
         <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
         <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
         <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      </div>
      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
         <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
         <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
         <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
         <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
      </div>
 
   </div>
</div>
<!-- "le bonton suivant" action -->
<a class="next browse right"></a>

le javascript (+ fermeture balise) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
$(function() {
// chargement du plugin
$(".scrollable").scrollable();
 
$(".items img").click(function() {
 
	// On vérifie si c'est l'image déjà affiché en grand qui a été cliqué, si c'est le cas on ne fait rien.
	if ($(this).hasClass("active")) { return; }
 
	// Dans cette démo pour récupèrer l'url de la grande photo en renomme l'url de la petite en enleveant "_t"
	var url = $(this).attr("src").replace("_t", "");
 
	// get handle to element that wraps the image and make it semi-transparent
	var wrap = $("#image_wrap").fadeTo("medium", 0.5);
 
	// the large image from www.flickr.com
	var img = new Image();
 
	// call this function after it's loaded
	img.onload = function() {
 
		// make wrapper fully visible
		wrap.fadeTo("fast", 1);
 
		// change the image
		wrap.find("img").attr("src", url);
 
	};
 
	// On charge la grande image
	img.src = url;
 
	// activate item
	$(".items img").removeClass("active");
	$(this).addClass("active");
 
// Au chargement de la page simuler un "clique" sur la première image
}).filter(":first").click();
});
</script>
 
 
</body>
 
</html>

J'ai mi quelque commentaire en français, j'espère que cela t'aidera.

**Yepazix** · 05/01/2012, 13h59

Merci de ton aide. Je comprends mieux.
Deux petites questions encore :

1/ Il y a cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

Si je la comprends bien, cette ligne "dit" d'allez à l'adresse http://cdn.jquerytools.org/1.2.6/full/ pour trouver un script qui s'appel jquery.tools.min.js
Du coup si le propriétaire du site décide de changer un truc, mon site ne marcherait plus ? Est ce que je peux télécharger "jquery.tools.min.js" et le mettre en local sur mon site de manière à être autonome ?

2/ Il y a ces lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 <div>
        <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
        <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
        <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
        <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
        <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      </div>

C'est un peu mon souci dans ce plug-in.
J'explique : J'ai chez dans mon espace web un dossier qui est synchronisé avec un dossier de mon PC à la maison. Le principe c'est que je copie/j'efface simplement dans mon dossier à la maison les images que je veux voir sur mon site.
Le plug in dans son fonctionnement actuel affichera toujours les mêmes images puisqu'il les trouve par leur nom. Moi ce que je voudrais faire c'est que la page "regarde" elle même le contenu du dossier et affiche toutes les images.
Est ce possible à ton avis ?

Merci.

PS : Vu la demande et tous les brols qu'on trouve sur le net, tu devrais proposer un tuto de ce plug in à developpez.com car il est top et tes explications claires !

**Gats** · 05/01/2012, 16h41

1)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

Cette url est en libre accès, normalement elle sera théoriquement tout le temps disponible à l'image des librairies que tu trouves via Google (exemple : http://code.google.com/intl/fr-FR/ap.../devguide.html, si tu regardes la rubrique jQuery tu y trouveras les urls vers les dernières versions disponible).
Mais bien entendu tu peux télécharger le fichier .JS et l'utiliser à ta guise sur ton serveur.

2) Effectivement pour le moment les images sont celle de la démo et elles ne sont donc pas dynamiques.

Et d'après ce que je comprends tu n'utilises pas de base de donnée.

Alors pour lire ce que tu as dans un dossier il va falloir utiliser des fonctions de lecture de fichier.

Récupération des images à partir d'un dossier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?php
// Chemin vers tes images sur le serveur
define('PATH_IMG', 'images');
$aIMG = array();
 
// Nombre d'images par scroll
$nb_img=5;
// Chemin vers les images
$d = dir(PATH_IMG);
while (false !== ($file = $d->read())) {
	if($file != '.' && $file != '..')
	{
		// Ne sélectionner que les images
		$extension = strrchr($file, '.');
		$pattern = '`^.(jpg|png|gif)$`i';
		if(preg_match($pattern, $extension))
		{
			// Tableau contenant les images à afficher
			$aIMG[] = $file;
		}
	}
}
$d->close();
?>

Affichage des images dynamiquement :
Tu remplaces tout le code html qui se trouve dans la DIV avec la class "items" par le code php suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div class="items">
   <?php 
	   // Affichage dynamique
	echo "<div>";
	foreach($aIMG as $i => $img)
	{
		if($i % $nb_img == 0 && $i>0) {
			echo "</div><div>";
		}
		echo '<img src="'.PATH_IMG.'/'.$img.'" />';	
	}
	echo "</div>";
 
 
   ?> 
   </div>

**Yepazix** · 06/01/2012, 00h18

Tu es vraiment une bête

Non seulement ça marche mais en plus j'ai presque tout compris.

MERCI.

Si tu veux voir le résultat : www.chantrie.eu ...

Grâce à tes explications j'ai fait la page Galerie et la page fiches techniques...

Encore Merci.

**Gats** · 06/01/2012, 10h13

Salut,

j'ai vu la page galerie, ça semble bien intégré, bravo.

Juste une petite remarque (esthétique) , le fond blanc de la zone d'affichage des grandes images me parait en fort contraste avec tout le reste du site qui est noir, non ?

**Yepazix** · 09/01/2012, 12h05

Moi j'amais bien mais c'est vrai que je pourrais mettre un truc un peu plus soft...
Je dois encore mettre un ou deux trucs à jours, je verrai ça en même temps.

Encore merci pour ton aide...

Manipuler des images

Langage PHP

Discussions similaires

Partager

Partager