how to make my image-selector code usefull for more textfields on one page?

[Alkimuz]

Hi guys, got a real puzzle here, did break my head about it for hours, but cant figure it out, hope you can help me.. (and hope this is the right spot as it is not only php, but a lot of javascript and css involved..)

 

I did place bits of code together to make an imageselector: above a textfield is a picture, a jQuery-popup appears after clicking, showing all the uploaded pictures as thumbnails, you click on one of them and the link withing bb-codes is placed within. It works really beautiful, but now the problem: i want to have several textareas on my page, all with imageselectors above them... But: the queries work with id's, and we all know, you cant have more of the same id's on one page i you are calling them..

 

here my codes: (in fact it is more code and also spread out over more pages, but i show it as simple as possible)

 

mainpage:

<form>
<p>Tekst:<br>
<div ID="edittextbox">
<script>edToolbar(\'edittekst\');</script>
<textarea ID="edittekst" class="width" style="height:200px;" name="tekst"></textarea>';
</div>';	
</form>

<?php imageselector('edittekst') ?>

 

The php with the imageselectorbox, now hidden, but shown after hitting the picture, (central issue: because the css of the id's here are changed with the javascripts)

function imageselector($textbox)
{
?>
<div id="popupContact">
	<a id="popupContactClose">x</a>
	<b>Choose picture:</b>
	<br />	
		<div ID="imageselectorbox">
<?php
$plaatjesresult = mysql_query("SELECT * FROM plaatje ORDER BY ID DESC") or die ("could not execute plaatjesresult");	
while ($plaatjesrow = mysql_fetch_array($plaatjesresult))
  {
$plaatjeklein = 'plaatjes/klein/'.$plaatjesrow['plaatje'];
$plaatjegroot = 'plaatjes/groot/'.$plaatjesrow['plaatje'];
  if(file_exists($plaatjeklein) && file_exists($plaatjegroot))
{ 
echo '<div style="width:73px; height: 73px; vertical-align: middle; float:left;"><center>';
echo '<a href="javascript: doImage(\''.$textbox.'\', \''.$plaatjegroot.'\')"><img src="'.$plaatjeklein.'"></a>';
echo '</center></div>';
        }
  }	

?>			
		</div>
</div>
<div id="backgroundPopup"></div>
<?php	
}	

 

The javascript that let the box show and popup:

function imageselector(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
	"position": "absolute",
	"top": windowHeight/2-popupHeight/2,
	"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
	"height": windowHeight
});

	//loads popup only if it is disabled
if(popupStatus==0){
	$("#backgroundPopup").css({
		"opacity": "0.7"
	});
	$("#backgroundPopup").fadeIn("slow");
	$("#popupContact").fadeIn("slow");
	popupStatus = 1;
}
}

 

The javascript that shows the picture with the onclick-image (in fact this has a lot more buttons besides the picture)

function edToolbar(obj) {
document.write("<img class=\"button\" ID=\"imageselector\" src=\"images/picture.png\" name=\"btnPicture\" onClick=\"imageselector()\">");
}

 

The javascript that places the image in the textbox:

function doImage(obj, url)
{
textarea = document.getElementById(obj);
//var url = prompt('Enter the Image URL:','http://');
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

if (document.selection) 
		{
			textarea.focus();
			var sel = document.selection.createRange();
			sel.text = '[img=' + url + ']';
		}
   else 
    {
	var len = textarea.value.length;
    var start = textarea.selectionStart;
	var end = textarea.selectionEnd;

        var sel = textarea.value.substring(start, end);
    //alert(sel);
	var rep = '[img=' + url + ']';
        textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);

	textarea.scrollTop = scrollTop;
	textarea.scrollLeft = scrollLeft;
	disablePopup();
}
}

 

My css

#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}

#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

#imageselectorbox{
height:300px;
width:390px;
overflow: auto;
}

 

Of course i have also code that closes the popup, but i guessed, that is not really essential.

 

the point is: adding more textboxes on one page, how to handle that?  of course for 2 boxes i can double all the codes, naming every id in the imageselector-php different, but that will be a lot of code for doing the exact same thing.. how to make every imageselector popup unique for every textfield in an elegant way? i dont mind if the code is changed a lot, as long as it works..

 

thanks so much for looking at this and hope my english is good enaugh, sorry for any spellingmistakes

[WebStyles]

why not just add a new variable to the function with the correct ID and just send it over whenever the function is called?