bytesmith
Novice
Sep 18, 2006, 5:24 PM
Post #9 of 9
(7341 views)
Shortcut
|
|
Re: [Si] New Image Manager! WHOOT!
[In reply to]
|
Can't Post
|
|
I started with what dedbob created and made a few layout changes. Then I found out that the customer is using FireFox and that the code isn't cross-browser compatible. So, I rewrote the code and it worked great except for the selected images not loading when the page loaded (the onLoad command in the <body> didn't work - and I don't know enough to make it work). My first solution was to force them to load by using an onMouseOver command inserted into the main <table> of the page. It was cheating, but it worked... Until I noticed that the images flickering in IE. They were reloading over and over again as the mouse moved around. So, the solution was to not have them pre-load and to place a button at the top of the list of images for the purpose of loading them. It's actually nice doing it this was because it saves bandwidth if the customer is making a change to a price or description while on dial-up (yes, it happens).
Anyway - I'm not sure if anyone is interested in seeing how this was done, but I thought that since I needed it then someone else might also.
The script at the top of the _listing_add and _listing_edit pages look like this (I'll show two, so you see what changes from script to script. Just keep increasing numbers until you have 10 copies)
<script type="text/javascript">
function chooseImage1(el){
sel = el.options[el.selectedIndex];
if(!sel.value){
img = '<img border="0" alt="" width="150"
src="/images/spacer2.gif"/>';
}
else{
img = '<img border="0" alt="" width="150"
src="$listing_url$/images/'+ sel.value + '"/>';
}
document.getElementById('myImage1').innerHTML = img
}
</script>
<script type="text/javascript">
function chooseImage2(el){
sel = el.options[el.selectedIndex];
if(!sel.value){
img = '<img border="0" alt="" width="150"
src="/images/spacer2.gif"/>';
}
else{
img = '<img border="0" alt="" width="150"
src="$listing_url$/images/'+ sel.value + '"/>';
}
document.getElementById('myImage2').innerHTML = img
}
</script>
Then, in the body of the page you'll refer to the script as follows:
<tr>
<td valign="top">
<font style="font-size:13px" face="arial">
Image #1</font>
<font style="font-size:9px" face="arial">
& Preview Image</font>
</td>
<td>
<select name="limage0" id="hmc1" size="7" onchange="chooseImage1(hmc1)">
<option value="">None $ilist0$
</select>
</td>
<td>
<div align="center" id="myImage1">
<img border="0" src="/images/spacer2.gif" width="150">
</div>
</td>
</tr>
<tr>
<td valign="top">
<font style="font-size:13px" face="arial">
Image #2</font>
</td>
<td>
<select name="limage1" id="hmc2" size="7" onchange="chooseImage2(hmc2)">
<option value="">None $ilist1$
</select>
</td>
<td>
<div align="center" id="myImage2">
<img border="0" src="/images/spacer2.gif" width="150">
</div>
</td>
</tr>
You'll notice I added a little text on the Image #1, this is to help remind my customer that he doesn't need to upload two resolutions of the same image like his old software required. You can remove it if you like.
The code for the button that loads the selected images looks like this:
<td colspan=3 align="center">
<BUTTON
TYPE=BUTTON
onClick="chooseImage1(hmc1), chooseImage2(hmc2),
chooseImage3(hmc3), chooseImage4(hmc4),
chooseImage5(hmc5), chooseImage6(hmc6),
chooseImage7(hmc7), chooseImage8(hmc8),
chooseImage9(hmc9), chooseImage10(hmc10)">
<I>View Selected Images</I>
</BUTTON>
</td>
I just placed it right over the top of the images as this seemed the most logical place.
I'm sure someone could make the code a little less bloated. I don't normally write JavaScript and had to do about 4 days worth of googling and trying and googling and retrying in order to get it to work. If anyone wants to clean the code up at all, feel free. I just ask that you share with the rest of the people here too.
I'll try to answer questions if you have them. Thanks to dedbob for getting me started on this change - it's a great addition that my customer is excited about having.
|
new-image-manager.zip
.