KCFinder image upload - php

Question

I'm using the 'Choose an Image' option of KCFinder (seen here) and would like to know how/if I can have multiple image areas rather than just one?
Here is my html/php code with 3 instances of the image/upload area (wrapped in a 'form' and saved to the database on submit):
<label>Logo: </label><div class="image" onclick="openKCFinder(this)"><img src="'.$_POST['logo'].'" alt="" id="img" /></div>
<input type="hidden" name="logo" value="'.$_POST['logo'].'" id="image" /> <br />
<label>Header Image: </label><div class="image" onclick="openKCFinder(this)"><img src="'.$_POST['h_image'].'" alt="" id="img" /></div>
<input type="hidden" name="h_image" value="'.$_POST['h_image'].'" id="image" /> <br />
<label>Side Advert Image: </label><div class="image" onclick="openKCFinder(this)"><img src="'.$_POST['side_advert'].'" alt="" id="img" /></div>
<input type="hidden" name="side_advert" value="'.$_POST['side_advert'].'" id="image" /> <br />
Here is my code for opening the image uploader:
function openKCFinder(div) {
window.KCFinder = {
callBack: function(url) {
window.KCFinder = null;
div.innerHTML = '<div style="margin:5px">Loading...</div>';
var img = new Image();
img.src = url;
img.onload = function() {
div.innerHTML = '<img id="img" src="' + url + '" />';
$('#image').attr('value', url);
var img = document.getElementById('img');
var o_w = img.offsetWidth;
var o_h = img.offsetHeight;
var f_w = div.offsetWidth;
var f_h = div.offsetHeight;
if ((o_w > f_w) || (o_h > f_h)) {
if ((f_w / f_h) > (o_w / o_h))
f_w = parseInt((o_w * f_h) / o_h);
else if ((f_w / f_h) < (o_w / o_h))
f_h = parseInt((o_h * f_w) / o_w);
img.style.width = f_w + "px";
img.style.height = f_h + "px";
} else {
f_w = o_w;
f_h = o_h;
}
img.style.marginLeft = parseInt((div.offsetWidth - f_w) / 2) + 'px';
img.style.marginTop = parseInt((div.offsetHeight - f_h) / 2) + 'px';
img.style.visibility = "visible";
}
}
};
window.open('http://www.websitename/admin/ckeditor/kcfinder/browse.php?type=images&dir=images/public',
'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
'directories=0, resizable=1, scrollbars=0, width=800, height=600'
);
}
How would you get it so that the image uploader works independantly for each image area? At the moment it will only add an image to the first image area as they are all using the same id's.
Not sure if I've explained this correctly but here goes... many thanks in advance, s.

Answer 1

I guess this will do (using jquery traversing to find img element):
function openKCFinder(div) {
window.KCFinder = {
callBack: function(url) {
div.innerHTML = '<div style="margin:5px">Loading...</div>';
var img = new Image();
img.src = url;
img.onload = function() {
var img = $(div).html('<img class="img" src="' + url + '" />').children('img').attr('value', url).get(0); // using jquery you can get the desirent img element:)
var o_w = img.offsetWidth;
var o_h = img.offsetHeight;
var f_w = div.offsetWidth;
var f_h = div.offsetHeight;
if ((o_w > f_w) || (o_h > f_h)) {
if ((f_w / f_h) > (o_w / o_h))
f_w = parseInt((o_w * f_h) / o_h);
else if ((f_w / f_h) < (o_w / o_h))
f_h = parseInt((o_h * f_w) / o_w);
img.style.width = f_w + "px";
img.style.height = f_h + "px";
} else {
f_w = o_w;
f_h = o_h;
}
img.style.marginLeft = parseInt((div.offsetWidth - f_w) / 2) + 'px';
img.style.marginTop = parseInt((div.offsetHeight - f_h) / 2) + 'px';
img.style.visibility = "visible";
}
}
};
window.open('http://www.websitename/admin/ckeditor/kcfinder/browse.php?type=images&dir=images/public',
'kcfinder_image', 'status=0, toolbar=0, location=0, menubar=0, ' +
'directories=0, resizable=1, scrollbars=0, width=800, height=600'
);
}