Rank: Advanced Member
Groups: Member
Joined: 3/18/2009(UTC)
Posts: 46
Thanks: 3 times
Was thanked: 1 time(s) in 1 post(s)
|
We are trying to make an photo uploader and are using the photo order app. i can use the normal photo order with all the fields (format,paper and amount). But we want an add. field called resize. I changed all the required fields, but here the problem occurs that when i clicked a thumbnail and want to change the fields, this field is being used for the next thumb as well. Also the info is not stored beneath the thumbnail. Also the thumbnail on the right isn't previewed when i switch between the thumbs. Please help. here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aurigma Image Uploader Demos — Photo Order Demo</title>
<link href="../common.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../Scripts/iuembed.js"></script>
<script type="text/javascript" src="../Scripts/iuembed.InstallationProgress.js"></script>
<style type="text/css">
.ScreenStyle
{
background-color: #ffffff;
font-family: verdana;
font-size: 11px;
padding: 10px;
text-align: center;
}
#InputAmount1, #InputAmount2, #InputAmount3 {width: 45px;}
#SelectPaper1, #SelectPaper2, #SelectPaper3 {width: 67px;}
#SelectFormat1, #SelectFormat2, #SelectFormat3 {width: 65px;}
#SelectResize1, #SelectResize2, #SelectResize3 {width: 65px;}
</style>
<script type="text/javascript">
//<![CDATA[
//Separator for ordered formats in description field of an item.
var separator = "...\n\r";
var maxFormatCount = 4;
var imageUploader1 = null;
//This class represents an information about ordered print format.
function Format(name, paper, amount, resize) {
this.name = name; //Print format name
this.paper = paper; //Paper type.
this.amount = amount; //Number of copies of this format.
this.resize = resize; //fillin, fittin.
}
//This function parses a string displayed as a description of Image Uploader item
//and returns an array of ordered formats.
function parseDescription(description) {
var formats = new Array();
if (description != "") {
var arrDescription = description.split(separator);
for (var z = 0; z < arrDescription.length; z++) {
arrFormat = arrDescription[z].split(" ");
formats.push(new Format(arrFormat[0], arrFormat[1], arrFormat[3]));
}
}
return formats;
}
function ImageUploader1_FullPageLoad() {
imageUploader1 = getImageUploader('ImageUploader1');
document.getElementById("ImageUploader1").style.width = "100%";
document.getElementById("ImageUploader1").parentNode.style.width = "100%";
//Installation Progress for Java version of IU add 2 parent controls around ImageUploader object
if (iu.getControlType() == "Java")
document.getElementById("ImageUploader1").parentNode.parentNode.style.width = "100%";
}
//In this SelectionChange event handler we display information about the order for selected
//items if available (print format, amount, paper type).
function ImageUploader1_SelectionChange() {
if (imageUploader1) {
var selectedFileIndex = null;
//This array stores all ordered formats for selected items.
var formats = new Array();
for (var i = 0; i < maxFormatCount; i++) {
formats.push(new Format("", "", ""));
}
//Iterate all upload list items and get common format information for all of them (i.e.
//format information which equals for all items).
for (var i = 1; i <= imageUploader1.getUploadFileCount(); i++) {
if (imageUploader1.getUploadFileSelected(i)) {
var currentFormats = parseDescription(new String(imageUploader1.getUploadFileDescription(i)));
//For the first selected item just copy the current format...
if (selectedFileIndex == null) {
selectedFileIndex = i;
for (var j = 0; j < currentFormats.length; j++) {
formats[j] = currentFormats[j];
}
}
//...and for all further selected items verify whether the current format is the same as
//for previous items. If yes, use it, otherwise the empty string is used.
else {
selectedFileIndex = "multiple"
for (var j = 0; j < currentFormats.length; j++) {
if (currentFormats[j].name != formats[j].name) {
formats[j].name = "";
}
if (currentFormats[j].paper != formats[j].paper) {
formats[j].paper = "";
}
if (currentFormats[j].amount != formats[j].amount) {
formats[j].amount = "";
}
if (currentFormats[j].resize != formats[j].resize) {
formats[j].resize = "";
}
}
for (var j = currentFormats.length; j < maxFormatCount; j++) {
formats[j].name = "";
formats[j].paper = "";
formats[j].amount = "";
formats[j].resize = "";
}
}
}
}
//If none files selected (i.e. selectedFileIndex is null), disable HTML form fields
//which edit print formats.
var disabled = selectedFileIndex == null;
var aSelectFormat = new Array();
var aSelectPaper = new Array();
var aInputAmount = new Array();
var aSelectResize = new Array();
for (var i = 1; i <= maxFormatCount; i++) {
aSelectFormat[i] = document.getElementById("SelectFormat" + i);
aSelectFormat[i].disabled = disabled;
aSelectPaper[i] = document.getElementById("SelectPaper" + i);
aSelectPaper[i].disabled = disabled;
aInputAmount[i] = document.getElementById("InputAmount" + i);
aInputAmount[i].disabled = disabled;
aSelectResize[i] = document.getElementById("SelectResize" + i);
aSelectResize[i].disabled = disabled;
}
var thumbnail1 = getImageUploader("Thumbnail1");
if (selectedFileIndex) {
//Display format data in those fields which edit the same format settings.
for (var i = 1; i <= maxFormatCount; i++) {
for (var j = 0; j < aSelectFormat[i].options.length; j++) {
if (aSelectFormat[i].options[j].value == formats[i - 1].name) {
aSelectFormat[i].selectedIndex = j;
}
}
for (var j = 0; j < aSelectPaper[i].options.length; j++) {
if (aSelectPaper[i].options[j].value == formats[i - 1].paper) {
aSelectPaper[i].selectedIndex = j;
}
}
for (var j = 0; j < aSelectResize[i].options.length; j++) {
if (aSelectResize[i].options[j].value == formats[i - 1].resize) {
aSelectResize[i].selectedIndex = j;
}
}
aInputAmount[i].value = formats[i - 1].amount;
}
//Display selected image preview using <img> tag when only one item is selected. For multiple items blank area is displayed.
if (typeof (selectedFileIndex) == "number") {
thumbnail1.setGuid(imageUploader1.getUploadFileGuid(selectedFileIndex));
}
else {
thumbnail1.setGuid("");
}
}
else {
thumbnail1.setGuid("");
}
}
}
//This function is called when the user changes some order settings (like format name, paper type, or amount of items).
//Ordered format information is stored in the description field of Image Uploader items.
//If 'applyToAll' parameter is true, then ordered format information applies to all images in upload pane.
function itemChange(applyToAll) {
if (imageUploader1) {
//Compile the string with ordered formats.
var description = "";
for (var i = 1; i <= maxFormatCount; i++) {
var SelectFormatN = document.getElementById("SelectFormat" + i);
var SelectPaperN = document.getElementById("SelectPaper" + i);
var InputAmountN = document.getElementById("InputAmount" + i);
var SelectResizeN = document.getElementById("SelectResize" + i);
var amount = parseInt(InputAmountN.value);
if (SelectFormatN.selectedIndex != 0 && SelectPaperN.selectedIndex != 0 && InputAmountN.value != "" && SelectResizeN.selectedIndex != 0 && amount) {
var format = SelectFormatN.options[SelectFormatN.selectedIndex].value;
var paper = SelectPaperN.options[SelectPaperN.selectedIndex].value;
var resize = SelectResizeN.options[SelectResizeN.selectedIndex].value;
if (description != "") {
description = description + separator;
}
description = description + format + " " + paper + " x " + amount;
}
}
//Update desriptions of selected items and write ordered formats information into it.
for (var i = 1; i <= imageUploader1.getUploadFileCount(); i++) {
if (applyToAll === true || imageUploader1.getUploadFileSelected(i)) {
imageUploader1.setUploadFileDescription(i, description);
}
}
}
}
//This function is called when the user clicks prev or next links.
//It moves selection to the previous or next image in upload pane.
function changeThumbnail(offset) {
var thumbnail1 = getImageUploader("Thumbnail1"), uploader = getImageUploader("ImageUploader1");
var selectedIndex = null, newSelectedIndex;
var fileCount = uploader.getUploadFileCount();
//find current file in thumbnail control
var guid = "" + thumbnail1.getGuid();
if (guid) {
for (var i = 1; i <= fileCount; i++) {
if (("" + uploader.getUploadFileGuid(i)) == guid) {
selectedIndex = i;
break;
}
}
}
if (selectedIndex) {
// move selection
newSelectedIndex = selectedIndex + offset;
if (newSelectedIndex > 0 && newSelectedIndex <= fileCount) {
uploader.setUploadFileSelected(selectedIndex, false);
uploader.setUploadFileSelected(newSelectedIndex, true);
}
} else if (fileCount > 0) {
// if there isn't selected files
if (offset < 0) {
// if click 'prev' then select last file
newSelectedIndex = fileCount;
uploader.setUploadFileSelected(newSelectedIndex, true);
} else {
// if click 'next' then select first file
newSelectedIndex = 1;
uploader.setUploadFileSelected(newSelectedIndex, true);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<h1>
<a href="../index.php">Aurigma Image Uploader Demos</a> → Photo Order Demo</h1>
<p>
This demo is a photo print ordering application which allows users to select photos,
choose print format, paper type, and a number of copies, and upload these photos
with order information to the server. In this demo you will see how to:
</p>
<ul>
<li>Upload source file without thumbnails to the server.</li>
<li>Send information about order using description fields.</li>
<li>Use quality meter.</li>
<li>Create custom HTML buttons for Image Uploader.</li>
<li>Filter files by extension and size.</li>
<li>Work with upload list items through JavaScript.</li>
</ul>
<div class="note">
<h4>
Note</h4>
<p>
This demo application <strong>deletes all previously uploaded files</strong>. Keep
in mind that it is a feature of this demo, not of Image Uploader itself. If you
<strong>do not want to delete uploaded files</strong>, you should modify the upload
processing page specified by the <strong>Action</strong> parameter.
</p>
</div>
<div class="Ab">
<div class="Ab-b">
<table align="center" style="margin: 0 auto;">
<tr>
<td colspan="5">
<h2>
Order Details</h2>
</td>
</tr>
<tr>
<td colspan="5">
<script type="text/javascript">
//<![CDATA[
//Create JavaScript object that will embed Image Uploader to the page.
var t = new ThumbnailWriter("Thumbnail1", 210, 200);
//For ActiveX control full path to CAB file (including file name) should be specified.
t.activeXControlCodeBase = "../Scripts/ImageUploader6.cab";
t.activeXControlVersion = "6,1,4,0";
t.activeXControlEnabled = true;
//For Java applet only path to directory with JAR files should be specified (without file name).
t.javaAppletJarFileName = "ImageUploader6.jar";
t.javaAppletCodeBase = "../Scripts/";
t.javaAppletCached = true;
t.javaAppletVersion = "6.1.4.0";
t.addParam("ParentControlName", "ImageUploader1");
t.writeHtml();
</script>
<br />
</td>
</tr>
<tr>
<td>
Formaat:
</td>
<td>
</td>
<td>
Papier:
</td>
<td>
</td>
<td>
Aantal:
</td>
<td>
Aanpassen:
</td>
</tr>
<tr>
<td>
<select id="SelectFormat1" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="9x13">9x13</option>
<option value="10x15">10x15</option> <option value="11x15">11x15</option>
<option value="13x18">13x18</option>
<option value="15x21">15x21</option>
<option value="20x30">20x30</option>
</select>
</td>
<td>
</td>
<td>
<select id="SelectPaper1" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="Glans">Glans</option>
<option value="Mat">Mat</option>
</select>
</td>
<td>
x
</td>
<td>
<input id="InputAmount1" type="text" size="3" value="1" onchange="itemChange()" onkeyup="itemChange()"
disabled="disabled" />
</td>
<td>
<select id="SelectResize1" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="fillin">fillin</option> <option value="fittin">fittin</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="SelectFormat2" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="9x13;">9x13</option>
<option value="10x15">10x15</option> <option value="11x15">11x15</option>
<option value="13x18">13x18</option>
<option value="15x21">15x21</option>
<option value="20x30">20x30</option>
</select>
</td>
<td>
</td>
<td>
<select id="SelectPaper2" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="Glans" selected="Glans">Glans</option>
<option value="Mat">Mat</option>
</select>
</td>
<td>
x
</td>
<td>
<input id="InputAmount2" type="text" size="3" value="1" onchange="itemChange()" onkeyup="itemChange()"
disabled="disabled" />
</td>
<td>
<select id="SelectResize2" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="fillin">fillin</option> <option value="fittin">fittin</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="SelectFormat3" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="9x13;">9x13</option>
<option value="10x15">10x15</option> <option value="11x15">11x15</option>
<option value="13x18">13x18</option>
<option value="15x21">15x21</option>
<option value="20x30">20x30</option>
</select>
</td>
<td>
</td>
<td>
<select id="SelectPaper3" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="Glans" selected="Glans">Glans</option>
<option value="Mat">Mat</option>
</select>
</td>
<td>
x
</td>
<td>
<input id="InputAmount3" type="text" size="3" value="1" onchange="itemChange()" onkeyup="itemChange()"
disabled="disabled" />
</td>
<td>
<select id="SelectResize3" onchange="itemChange()" disabled="disabled">
<option value="" selected="selected"></option>
<option value="fillin">fillin</option> <option value="fittin">fittin</option>
</select>
</td>
</tr>
<tr>
<td colspan="5" style="text-align: right;">
<a class="btn" href="#" onclick="itemChange(true);return false;">Toepassen op alle foto's!</a>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2">
<a class="btn" href="#" onclick="changeThumbnail(-1);return false;">< vorige</a>
</td>
<td>
</td>
<td colspan="2" style="text-align: right;">
<a class="btn" href="#" onclick="changeThumbnail(1);return false;">volgende ></a>
</td>
</tr>
</table>
</div>
<div class="Ab-A">
<ul class="Toolbar">
<li><a class="selectAll" href="#" onclick="imageUploader1.SelectAll();return false;">
Alles selecteren</a></li>
<li><a class="selectNone" href="#" onclick="imageUploader1.DeselectAll();return false;">
Alles deselecteren</a></li>
<li><a class="send" href="#" onclick="imageUploader1.Send();return false;">Verzenden</a></li>
<li><a class="refresh" href="#" onclick="imageUploader1.Refresh();return false;">Vernieuwen</a></li>
</ul>
<script type="text/javascript">
//<![CDATA[
//Create JavaScript object that will embed Image Uploader to the page.
var iu = new ImageUploaderWriter("ImageUploader1", 650, 500);
//For ActiveX control full path to CAB file (including file name) should be specified.
iu.activeXControlCodeBase = t.activeXControlCodeBase;
iu.activeXControlVersion = t.activeXControlVersion;
iu.activeXControlEnabled = t.activeXControlEnabled;
//For Java applet only path to directory with JAR files should be specified (without file name).
iu.javaAppletJarFileName = t.javaAppletJarFileName;
iu.javaAppletCodeBase = t.javaAppletCodeBase;
iu.javaAppletCached = t.javaAppletCached;
iu.javaAppletVersion = t.javaAppletVersion;
iu.showNonemptyResponse = "off";
//Configure License Keys
iu.addParam("LicenseKey", "71060-4E18C-00000-08457-AA2C0;72060-4E18C-00000-029DC-0571A ");
//Configure appearance and behavior.
iu.addParam("PaneLayout", "ThreePanes");
iu.addParam("FolderView", "Thumbnails");
iu.addParam("TreePaneWidth", "250");
iu.addParam("FolderPaneHeight", "250");
iu.addParam("FolderPaneShowDescriptions", "false");
iu.addParam("DescriptionsReadOnly", "true");
iu.addParam("ShowButtons", "false");
iu.addParam("ShowDebugWindow", "true");
iu.addParam("AllowRotate", "false");
iu.addParam("AllowMultipleRemove", "true");
iu.addParam("BackgroundColor", "#f5f5f5");
//Configure file mask to upload JPEG images only.
iu.addParam("FileMask", "*.jpeg;*.jpg;*.jpe");
//Disallow to upload too small images.
iu.addParam("MinImageWidth", "800");
iu.addParam("MinImageHeight", "800");
//Configure quality meter.
iu.addParam("QualityMeterFormats", "9x13,1051,1500,1.5;10x15,1205,1795,1.5;13x18 ,1500,2102,1.5;15x21,1795,2551,2;20x30,2398,3602,2");
//Configure thumbnail settings.
iu.addParam("UploadThumbnail1FitMode", "Fit");
iu.addParam("UploadThumbnail1Width", "120");
iu.addParam("UploadThumbnail1Height", "120");
iu.addParam("UploadThumbnail1JpegQuality", "60");
//Configure upload settings.
iu.addParam("FilesPerOnePackageCount", "1");
iu.addParam("AutoRecoverMaxTriesCount", "3");
iu.addParam("AutoRecoverTimeOut", "1");
iu.addParam("Action", "upload.php");
//Configure URL where to redirect after upload.
iu.addParam("RedirectUrl", "gallery.php");
//Add event handlers.
iu.addEventListener("SelectionChange", "ImageUploader1_SelectionChange");
iu.addEventListener("FullPageLoad", "ImageUploader1_FullPageLoad");
//Create installation progress.
var ip = new InstallationProgressExtender(iu);
ip.setProgressImageUrl("../Scripts/InstallationProgress.gif");
ip.setProgressCssClass("ScreenStyle");
ip.setInstructionsCssClass("ScreenStyle");
//Tell Image Uploader writer object to generate all necessary HTML code to embed
//Image Uploader to the page.
iu.writeHtml();
//]]>
</script>
</div>
</div>
</form>
</body>
</html>
<!--END-->
Edited by user Thursday, January 28, 2010 6:35:27 PM(UTC)
| Reason: Not specified
|