(SOLVED)Signature preview

[RogerB]

Instead of just showing a drop down for Signature banners, I would like to also show a preview of the sig ban. Anyone ever done this?

[RogerB]

Really I never understood the point of making a selection for a signature banner you can't preview........

[SouthwestVA]

yeah edit the tpl, ill post mine, give me an hour

[SouthwestVA]

<h3>Edit Profile</h3>
<form action="<?php echo url('/profile');?>" method="post" enctype="multipart/form-data">
<dl>
<dt>Name</dt>
<dd><?php echo $userinfo->firstname . ' ' . $userinfo->lastname;?></dd>

<dt>Airline</dt>
<dd><?php echo $userinfo->code?>
<p>To request a change, contact your admin</p>
</dd>

<dt>Email Address</dt>
<dd><input type="text" name="email" value="<?php echo $userinfo->email;?>" />
<?php
if(isset($email_error) && $email_error == true)
echo '<p class="error">Please enter your email address</p>';
?>
</dd>

<dt>Location</dt>
<dd><select name="location">
<?php
foreach($countries as $countryCode=>$countryName)
{
if($userinfo->location == $countryCode)
$sel = 'selected="selected"';
else
$sel = '';

echo '<option value="'.$countryCode.'" '.$sel.'>'.$countryName.'</option>';
}
?>
</select>
<?php
if(isset($location_error) && $location_error == true)
echo '<p class="error">Please enter your location</p>';
?>
</dd>

<dt>Signature Background</dt>
<dd><select name="bgimage">
<?php
foreach($bgimages as $image)
{
if($userinfo->bgimage == $image)
$sel = 'selected="selected"';
else
$sel = '';

echo '<option value="'.$image.'" '.$sel.'>'.$image.'</option>';
}
?>
</select>
</dd>

<?php
if($customfields)
{
foreach($customfields as $field)
{
echo '<dt>'.$field->title.'</dt>
 <dd>';

if($field->type == 'dropdown')
{
$field_values = SettingsData::GetField($field->fieldid);
$values = explode(',', $field_values->value);


echo "<select name=\"{$field->fieldname}\">";

if(is_array($values))
{	
 foreach($values as $val)
 {
 $val = trim($val);

 if($val == $field->value)
 $sel = " selected ";
 else
 $sel = '';

 echo "<option value=\"{$val}\" {$sel}>{$val}</option>";
 }
}

echo '</select>';
}
elseif($field->type == 'textarea')
{
echo '<textarea class="customfield_textarea"></textarea>';
}
else
{
echo '<input type="text" name="'.$field->fieldname.'" value="'.$field->value.'" />';
}

echo '</dd>';
}
}
?>

<dt>Avatar:</dt>
<dd><input type="hidden" name="MAX_FILE_SIZE" value="<?php echo Config::Get('AVATAR_FILE_SIZE');?>" />
<input type="file" name="avatar" size="40">
<p>Your image will be resized to <?php echo Config::Get('AVATAR_MAX_HEIGHT').'x'.Config::Get('AVATAR_MAX_WIDTH');?>px</p>
</dd>
<dt>Current Avatar:</dt>
<dd><?php
if(!file_exists(SITE_ROOT.AVATAR_PATH.'/'.$pilotcode.'.png'))
{
echo 'None selected';
}
else
{
?>
<img src="<?php echo SITE_URL.AVATAR_PATH.'/'.$pilotcode.'.png';?>" /></dd>
<?php
}
?>
<dt></dt>
<dd><input type="hidden" name="action" value="saveprofile" />
<input type="submit" name="submit" value="Save Changes" /></dd>
</dl>
</form>
<h3>Sig Background Previews</h3>
<img src="blah" /><br />

add a img tag with your options, thats what i did.

<h3>Sig Background Previews</h3>
<img src="blah" /><br />

[RogerB]

I want a preview of the drop down menu, so you can see what you're selecting before you save it.

[RogerB]

That doesn't work, and the avatar doesn't show.

[RogerB]

This is what I want, when a user pics a banner from the drop down they get a preview under it. See picture below.

[Nabeel]

To this <select name="bgimage"> make it:

<select name="bgimage" id="bgimage">

Then at the matching </select>, after it add:

<div id="preview_image"></div>

Then at the bottom of the template:

<script type="text/javascript">
$("#bgimage").bind('change', function() {
   var image = $(this).val();
   $("#preview_image").html("<img src='/lib/signatures/" + image + "' />");
});
</script>

The /lib/signatures path is probably wrong. But it's something like that, more than enough to start with... I just wrote it out and haven't tested it so...

Basically it's using jQuery to bind to a change event on the select box, then when it changes, it adds the img tag into the div that was added to show the preview.

[RogerB]

Works great!! for all that use it all that was wrong is the path here is the correct code.

<script type="text/javascript">
$("#bgimage").bind('change', function() {
    var image = $(this).val();
    $("#preview_image").html("<img src='/lib/signatures/background/" + image + "' />");
});
</script>

[Remington Box]

Maybe I am a blithering idiot... but I cannot get anything to show up in the select box...

Here is my code and I have the <script> that Nabeel and RogerB edited posted at the bottom of the template

<select name="bgimage" id="bgimage">
<?php
foreach($bgimages as $image)
{
if($userinfo->bgimage == $image)
$sel = 'selected="selected"';
else
$sel = '';
echo '<option value="'.$image.'" '.$sel.'>'.$image.'</option>';
}
?>
</select>
<div id="preview_image"></div>

[freshJet]

What is in your lib/signatures/background folder?