Dynamic DropDown with Image

[welchyboy]

That would be GREAT I just got word the site needs to be up and running by September 8th so any help I can get is AWESOME! I did Everything discussed in CREEPUR post that contained all the code. I added the files needed and modified the other files. I am just very unsure about the javascript file. How to edit this so that I can get the pictures to show up when an attribute is selected in a drop down box. The site that CREEPUR posted which is this;

http://www.istitchdesigns.com/cart/i...roducts_id=496

is exactly what I am looking for as far as picture changing on attributes. Please any info could help. Thanks again.

The site in question is located here;

http://www.wpc-consulting.com/~stxmi...&products_id=6

[welchyboy]

Anyone have any ideas on how to get this working correctly?

[Starlyn]

Ah! Welchyboy, my computer is going to be unavailable to me for about a week or so. To make a long story short, it's being used on the sales floor of the jewelry store I work at. I have to wait to get it back until the new one we ordered comes in. I am using a co-worker's computer to check e-mail and other simple things, but without my files and everything else I need, I won't be able to work on anything until the new computer arrives. I'm so sorry, and I hope I can help you soon.

[welchyboy]

I understand I know CREEPUR is supposed to help me out as well but he must be busy at the moment as well. I can just wait and research until i can get some more help. Thanks

[shwag]

this is a freakin awsome option.. im having a problem tho.
i think im getting the code and where to put it. im iv put alot of different stuff on here as far a mods and stuff mainly testing it all out.
my ? is i got the everthing working as far as adding to cart and such but my images are red x boxes. what im i missing??? any help would be great.

note once i figure this out i will be cleaning out the mods that im not using .

and thanks for posting all the code so far. having fun figuring it out

[shwag]

man i love this stuff.. ive been reading this code for about 2 days now and i finally got it.. you guys are the bomb!!!!! i guess the images were saved as jpg and gif reason i got the red x..

so for people that might not get save images without an extension
this means .. test.jpg should be test as you see there is no jpg at the end. this worked for me at least ..

again you guys ROCK

[shwag]

CREEPUR i got a ? for you. i was wonder the images that pop up is there a way of having a view larger image popup for these.
ive messed around alitte but not able to figure anything out. any suggestions would be great. thanks
shwag

http://yourpagetest.com/index.php?ma...&products_id=9

[skustes]

This thread was a big help to me in getting this working for me. I thought I'd contribute some additions that I made that eliminate the need for hard-coding your dropdown boxes.

First, I put the showimage() function in a file called jscript_showimage.js. It is in the includes/modules/pages/product_info/ directory. I modified the function to grab the value from the dropdown, split it on "-", then set values as appropriate. Hopefully the comments in the code explain what's going on.

function showimage()
{
  if (!document.images)
  return;

  // Pull the currently selected value from the visible dropdown and split it on hyphen
  var imagevalueunsplit = document.getElementById("colorselection").value;
  var imagevaluearray = imagevalueunsplit.split("-");

  // Set the array values to variables. First array value is the identifying value for the dropdown, second is the image name
  var imagevalue = imagevaluearray[0];
  var imagename = imagevaluearray[1];

  // Set the Zen Cart box (the hidden one) to the proper value so that the attribute is passed to the Shopping Cart
  document.getElementById("attrib-1").value = imagevalue;
  
  // Set the display image to the proper file
  document.images.colorimage.src="images/" + imagename + ".gif";
  
}

I then pulled a query from the database of the attributes with the 3 fields that I need to build my SELECT. I'm sticking both the numeric value that is used to set the Zen Cart attribute selection (the one we hide with that STYLE there at the top) and the image I want to call. They are separated with a hyphen so the Javascript can split them.

<style type="text/css">
#attrib-1 {display: none;};
</style>

<!-- this is the table that is used you may need to change size based on your needs -->
<table border="0" cellspacing="0" cellpadding="0" width="234">
<tr>
<td width="134">

<?php
$colorsquery = mysql_query("SELECT options_values_id,attributes_image,products_options_values_name FROM ztest_products_options_values,ztest_products_attributes WHERE ztest_products_options_values.products_options_values_id = ztest_products_attributes.options_values_id AND options_id = 1 ORDER BY `products_options_values_sort_order`,`products_options_values_name`")
or die(mysql_error());  
?>

<!--this calls the picture change function-->
<select name="colorselection" onChange="showimage()">
<?php
while ($currentcolor = mysql_fetch_array($colorsquery)) {
  echo "<option value='$currentcolor[0]-$currentcolor[1]'>$currentcolor[2]</option>";
}
?>
</select>

</td>
<td width="100" align="center">
  <align="center"><img src="images/attributes/black.gif" name="colorimage" style="border-width:1px; border-color:#000000; border-style:solid;">
</td>
</tr>
</table>

I also modified my tpl_module_attributes.php file to not output attribute images under the SELECT. To do this, remove the following code

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />

What all of this allows me to do is use the built-in Attributes Images function in the Admin tool and not have to hardcode anything. When I add a new color to the attributes, I upload the image to the color_samples/ folder and it's automatically there.

You can see it at work here. Login is guest/guest (may have to enter it a few times the first time). Only Black, Blue, Orange, and Red currently have images associated with them, so the others will show either a Red X or nothing depending on if you use IE or Firefox.

Thanks to all for their help and hopefully this addition helps someone.

[welchyboy]

man i love this stuff.. ive been reading this code for about 2 days now and i finally got it.. you guys are the bomb!!!!! i guess the images were saved as jpg and gif reason i got the red x..

so for people that might not get save images without an extension
this means .. test.jpg should be test as you see there is no jpg at the end. this worked for me at least ..

again you guys ROCK

Hey when you are talking about jpg and gif with the red x I am just curious if you are talking about the issue i might be having. I have the drop down menu with attributes and when I chose an attribute the correct image loads but right under that a broken linked image which has a red x with a box around it shows up briefly then goes away. You will have to clear the cache in order to see it again after it loads. You can check out the problem here

http://www.wpc-consulting.com/~stxmi...products_id=43

I am also wondering if you or anyone else was able to figure out how i can fix the site so when someone clicks on the drop down menu for the attributes and chooses one the image pops up and replaces the main image which mine does now. But then I am using lightbox I would like to click the main image (which is now the attribute image) and bring it up in lightbox. For some reason it is using the original popup window. Anyone know how to fix any of these problems please I could use some help.

[shwag]

Q1: the best i can quess is do a search for bigger_picture.jpg
and delete it. that is the property of that red X and box.
it seems that when you click on the main pic itself it opens a popup as well. so
deleting the bigger_picture.jpg should work i would think.

Q2: i not sure about the light box because i dont use that.
make note when you delete the bigger_picture.jpg this might be in the lightbox module thus may change things in future, if you figure that part out.

hope this helps.

i dig the menu changing main pic. this might be something i would use. are you going to post how you achieve this?