boucle for - affichage image

**Delvauxo** · 04/10/2012, 18h28

Bonjour,

Mon problème est le suivant :

Je voudrais pouvoir croper manuellement mon illustration de "post" !

J'ai un script qui me permet de le faire... Jusque là pas de problème, si ce n'est que ce script affiche les images cropées l'une à la suite de l'autre à l'aide d'une boucle "for" en JS alors que je ne voudrais pas afficher plusieurs images cropées mais plutot qu'il écrase l'ancienne a chaque fois...

J'espère m'être fait comprendre xD !

Je ne connais pas du tout le JS ou très peu...

voici le code de la boucle for qui donne l'affichage de chaque image cropée...

Code :

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

1
2
3
4
5
6
7
8
 
'onComplete': function(imgs,data){ 
var $PhotoPrevs = $('#PhotoPrevs');
 
for(var i=0,l=imgs.length; i<l; i++){
$PhotoPrevs.append('<img src="uploads/'+ imgs[i].filename +'?d='+ (new Date()).getTime() +'" />');
}
}

et voici l'endroit où l'image s'affiche :

Code :

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

1
2
3
4
 
<div id="PhotoPrevs">
<!-- The cropped images will be populated here -->
</div>

Au cas où... Voici la page entière :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Uber Upload Cropper -v2</title>
 
		<link href="../css/default.css" rel="stylesheet" type="text/css" />
		<link href="../scripts/fileuploader/fileuploader.css" rel="stylesheet" type="text/css" />
		<link href="../scripts/Jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
 
		<script type="text/javascript" src="../scripts/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../scripts/jquery-impromptu.js"></script>
		<script type="text/javascript" src="../scripts/fileuploader/fileuploader.js"></script>
		<script type="text/javascript" src="../scripts/Jcrop/jquery.Jcrop.min.js"></script>
		<script type="text/javascript" src="../scripts/jquery-uberuploadcropper.js"></script>
 
		<script type="text/javascript">
			$(function() {
 
				$('#UploadImages').uberuploadcropper({
					//---------------------------------------------------
					// uploadify options..
					//---------------------------------------------------
					//'debug'		: true,
					'action'	: 'upload.php',
					'params'	: {},
					'allowedExtensions': ['jpg','jpeg','png','gif'],
					//'sizeLimit'	: 0,
					//'multiple'	: true,
					//---------------------------------------------------
					//now the cropper options..
					//---------------------------------------------------
					'aspectRatio': 1.6, 
					'allowSelect': false,			//can reselect
					'allowResize' : true,			//can resize selection
					'setSelect': [ 0, 0, 200, 200 ],	//these are the dimensions of the crop box x1,y1,x2,y2
					'minSize': [ 200, 200 ],			//if you want to be able to resize, use these
					'maxSize': [ 500, 500 ],
					//---------------------------------------------------
					//now the uber options..
					//---------------------------------------------------
					'folder': 'uploads/',			// only used in uber, not passed to server
					'cropAction': 'crop.php',		// server side request to crop image
					'onComplete': function(imgs,data){ 
						var $PhotoPrevs = $('#PhotoPrevs');
 
						for(var i=0,l=imgs.length; i<l; i++){
							$PhotoPrevs.append('<img src="uploads/'+ imgs[i].filename +'?d='+ (new Date()).getTime() +'" />');
						}
					}
				});
 
			});
		</script>
	</head>
 
	<body>
		<div id="wrapper">
			<h1>UberUploadCropper</h1>
			<p>Advanced Example which demonstrates the uploading a large image, scaling a smaller copy to fit the browser, crop, and resize the original full size image.  This method maintains better image quality.</p>
 
			<div id="UploadImages">
				<noscript>Please enable javascript to upload and crop images.</noscript>
			</div>
 
			<div id="PhotoPrevs">
				<!-- The cropped images will be populated here -->
 
			</div>
		</div>
	</body>
</html>

Ma question est : serait-ce possible de n'afficher qu'une seule image ? A chaque fois le meme nom... à savoir, "thumb.jpg" ?

En gros, j'aurais besoin de savoir si enlever la boucle for est possible ? par quoi la remplacer pour n'avoir qu'une seule image a chaque fois... ? :

Code :

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

$PhotoPrevs.append('<img src="uploads/thumbs.jpg" />');

Merci de bien vouloir m'aiguiller sur la méthode à suivre que je n'arrive pas à trouver...

**headmax** · 04/10/2012, 21h33

Salut si dans ton tableau d'images tu as besoin d'une seule image s'affiche, et peu importe laquel...
Dans ce cas fait juste un :

Code :

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

1
2
 
PhotoPrevs.append('<img src="uploads/'+ imgs[0].filename +'?d='+ (new Date()).getTime() +'" />');

Je sais pas si j'ai bien compris ton problème, mais en tout cas, tu n'a pas besoin de passer par une boucle si tu es censé afficher une image.
Bonne soirée A+

boucle for - affichage image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager