Attribute Image Swap (Show Attribute Image Next to Radio Button)

I installed the addon Attribute image replaces main product image on sel and it works great. My only issue is that it doesn't show the Attribute Image next to the radio button; it just shows the text for the option.

The store I am developing sells pants and the attribute are different color swatches that the user can choose to accent the back pockets so for example the main image is a pair of white pants and when the user clicks the different swatch options from the radio buttons, I need to show what the pants will look like with that color swatch on the back pockets. I need to add a small 75px by 75px image of the swatch next to the radio button and then when it swaps, show the pants at the top with the swatch on the back pockets. I can use css to only show a portion of the image when viewed next to the radio button and then show the entire image when it swaps to the top so I'm not concerned about how I will get that to work. I just need to get the image to show next to the radio buttons like they do when you originally add attribute images.

I am assuming that I need to add some code to attributes.php so that it pulls in the image as well to this block of code:

case '6':
$tmp_checkbox .= zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"'.' '.$parameters) . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br />' . "\n";
break;

I tried using the code from another "case" that adds the image next to the radio button from the other attribute image layouts but that caused the image swap to break and still no image showed.

Any help with this is greatly appreciated and thank you in advance for helping me with this!

You can see the image swap here: http://fsquaredclothing.com/index.ph...&products_id=1

If anyone else is looking to achieve the same thing, I found the solution. To show the attribute image next to the radio button and have it swap to be the main image when the radio button is clicked make the following changes to /includes/modules/YOUR_TEMPLATE/attributes.php.

On or around line 105

Change:

// this to make arribute images off form admiin.
if($products_options_names->fields['products_options_images_style']==6 || $products_options_names->fields['products_options_images_style']==7){
$products_options->fields['attributes_image']='';
}

To this:

// this to make arribute images off form admiin.
if($products_options_names->fields['products_options_images_style']==7){
$products_options->fields['attributes_image']='';
}

On or around line 296

Change:

case '6':
$tmp_radio .= zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"'.' '.$parameters) . '<label class="attribsRadioButton zero" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br />' . "\n";
break;

To this:

case '6':
$tmp_radio .= zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"'.' '.$parameters) . '<label class="attribsRadioButton two" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . ($products_options->fields['attributes_image'] != '' ? '<br />' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) : '') . '</label><br />' . "\n";
break;

Thanks for posting your solution. I was thinking about updating the plugin for 1.51 and include this case as an additional case (so there would be 8 choices instead of 6) but i have not figured that out yet (i started another thread about that.)

thanks!

Quote:

---

Originally Posted by meijei

I was thinking about updating the plugin for 1.51 and include this case as an additional case (so there would be 8 choices instead of 6) but i have not figured that out yet (i started another thread about that.)

---

What is the link?