...

View Full Version : Product preview help



Fire-Hazard
08-11-2011, 02:19 PM
Hey im trying to get a product preview for my site, the products are hoodies tshirts and polos
How can i change the image to a hoodie tshirt or polo using a drop down list and still change the colour using another?
I've seen other people do it in flash but I don't really want to use anything other then javascript jquery css and html.

This is the the code that i have at the moment



<script type="text/javascript">
$(document).ready(function(){
$("#canvas").addClass('default');
});



function update()
{
var color = $('#d_color').val();
var text = $('#d_text').val();
var image = $('#d_image').val();

if( color.length > 0 ){
$("#canvas").removeClass('default');
$("#canvas").addClass(color);
}

if( text.length > 0){
$("#text").append(text);
}

if( image.length > 0){
$("#image").append('<img class="image" src="images/uploads/' + image + '" />');
}

$('#update').hide();
}


The css


.default { background-image: url("images/white.jpg"); }
.item { width: 500px; height: 470px; border: 1px solid #000; float: left; margin: 20px; display: inline;}
.red { background-image: url("images/red.jpg");}
.blue { background-image: url("images/blue.jpg");}
.orange { background-image: url("images/orange.jpg");}
.white { background-image: url("images/white.jpg");}
.green { background-image: url("images/green.jpg");}
.pink { background-image: url("images/pink.jpg");}
.yellow { background-image: url("images/yellow.jpg");}
.image { max-width: 180px; margin:0 auto;display:block;margin-top:10px;}
#text {width:500px;height:20px;display:block;color:white;font-weight:bolder;text-align:center;margin-top:110px;}
.form {margin-top:10px;float:left;}



<div id="form" class="form">
<table border="0" cellspacing="5" cellpadding="5" >
<tr>
<td><label>Name</label></td>
<td><input type="text" id="d_name" name="d_name" /></td>
</tr>
<tr>
<td><label>E-Mail</label></td>
<td><input type="text" id="d_email" name="d_email" /></td>
</tr>
<tr>
<td><label>Contact</label></td>
<td><input type="text" id="d_phone" name="d_phone" /></td>
</tr>
<tr>
<td><label>Color</label></td>
<td>
<select id="d_color" name="d_color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="yellow">Yellow</option>
</select>
</td>
</tr>
<tr>
<td><label>Text</label></td>
<td><input type="text" id="d_text" name="d_text" /></td>
</tr>
<tr>
<td><label>Image</label></td>
<td>
<select id="d_image" name="d_image" style="max-width: 150px;">
<option value="">Please choose</option>
<?php
foreach( $files as $file )
{
if(!in_array( $file, $ignore ))
{
echo '<option value=' . $file . '>' . $file . '</option>';
}
}
?>
</select>
</td>
</tr>
<tr>
<form action="" method="post" enctype="multipart/form-data">
<td><label>Upload Image</label></td>
<td><input type="file" id="file" name="file" /><input type="submit" id="upload" name="upload" value="Upload" /></td>
</form>
</tr>
<tr>
<td><label>Quantity</label></td>
<td><input type="text" id="d_quantity" name="d_quantity" /></td>
</tr>
<tr>
<td style="vertical-align: top"><input type="checkbox" name="d_remarks" id="d_remarks"><label>Remarks</label></td>
<td><textarea cols="30" rows="5" id="d_remarks_value" name="d_remarks_value"></textarea></td>
</tr>
<tr>
<td>
</td>
<td><button id="reset" style="display: none;" onClick="reset()">Reset</button>&nbsp;<button id="update" onClick="update()">Update</button>&nbsp;<button onClick="send()">Send Design</button></td>
</tr>
</table>
</div>

<div id="canvas" class="item">
<div id="text"></div>
<div id="image"></div>
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum