attribute pop up images

Checked a few things out - changing the "small" image size (Configuration -> Images -> Small Image width/height) from 80 px to 40 got me the effect I wanted. I don't know where else the "small" image size is used, but all my images seem to be ok!

sorry to be such a pain - but now that I've got the clickable images working, I'd like one of two things with these images..

1. a hover image popup like the far right sidebar here - I know how to do it in html, but not how to get that into the attributes.php format...

or
2. be able to display the appropriate alt tag like is shown in these images .

Clickable images are working on the test site HERE

Thanks in advance!:clap:

drhiii:

Kewl... to see activity in the thread.

Anyone try to take the plunge and advance the Images Styles to work for more than just the "0" selection?

Image Styles:
0= Images Below Option Names
1= Element, Image and Option Value
2= Element, Image and Option Name Below
3= Option Name Below Element and Image
4= Element Below Image and Option Name
5= Element Above Image and Option Name

I have the same problem, Have someone find a solution for this?

see my site http://www.abccheckprinting.com/index.php?main_page=product_info&cPath=9&products_id=13
The image style is now set to 4; When I set it to 0 then it works perfect

Has anyone found a solution for a setting rather than 0? I want to display the radio button under the image but when using that setting, you can't enlarge the images.

Thanks.

inklingsolutions:

Has anyone found a solution for a setting rather than 0? I want to display the radio button under the image but when using that setting, you can't enlarge the images.

Thanks.

I'm afraid you have to live with this limitation although I would also love to use other settings and still be able to enlarge the images.

Kim

Here is my code to get radio buttons to pop up large. Works great for me...
/includes/modules/CUSTOM/attributes

just replace the radio button code with this:

I haven't done checkboxes yet but will, I will post code when I finish it.

// radio buttons
                  if ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_RADIO) {
                    if ($_SESSION['cart']->in_cart($prod_id)) {
                      if ($_SESSION['cart']->contents[$prod_id]['attributes'][$products_options_names->fields['products_options_id']] == $products_options->fields['products_options_values_id']) {
                        $selected_attribute = $_SESSION['cart']->contents[$prod_id]['attributes'][$products_options_names->fields['products_options_id']];
                      } else {
                        $selected_attribute = false;
                      }
                    } else {
                      //              $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : false);
                      // if an error, set to customer setting
                      if ($_POST['id'] !='') {
                        $selected_attribute= false;
                        reset($_POST['id']);
                        foreach ($_POST['id'] as $key => $value) {
                          if (($key == $products_options_names->fields['products_options_id'] and $value == $products_options->fields['products_options_values_id'])) {
                            // zen_get_products_name($_POST['products_id']) .
                            $selected_attribute = true;
                            break;
                          }
                        }
                      } else {
                        // select default but do NOT auto select single radio buttons
//                        $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : false);
                        // select default radio button or auto select single radio buttons
                        $selected_attribute = ($products_options->fields['attributes_default']=='1' ? true : ($products_options->RecordCount() == 1 ? true : false));
                      }
                    }
										// BOF POPUP ATTRIBUTE IMAGES
											//find large size attribute images. Location must be in /images/large and image name must be image_LRG.ext Mike Scott 070606				
											$array_filename = split("[/\\.]", $products_options->fields['attributes_image']) ;
											$filename = $array_filename[count($array_filename)-2];
											$extension = '.'.$array_filename[count($array_filename)-1];
											$filename = $filename.'_LRG';
											$path = DIR_WS_IMAGES . 'large/attributes/';
											$attribute_image_lrg = $path . $filename. $extension;
											$selected_attrname = $products_options_names->fields['products_options_name'] . ': '.$products_options->fields['products_options_values_name'];
										// EOF POPUP ATTRIBUTE IMAGES
										
                    switch ($products_options_names->fields['products_options_images_style']) {
                      case '0':
                      $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 . '"') . '<label class="attribsRadioButton zero" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br />' . "\n";
                      break;
                      
											case '1':
                      // BOF POPUP ATTRIBUTE IMAGES
											if (file_exists($attribute_image_lrg)) {
											$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 . '"') . '<label class="attribsRadioButton one" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . ($products_options->fields['attributes_image'] != '' ? '<a href="javascript:popImage(\''. $attribute_image_lrg.'\', \'Large View\',\''. $selected_attrname.'\')">'. zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], 'Click to Enlarge', '', '' ) . '  ' : '') . '</a>' . $products_options_details . '</label><br />' . "\n";
											} else {
										 $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 . '"') . '<label class="attribsRadioButton one" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . ($products_options->fields['attributes_image'] != '' ? zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) . '  ' : '') . $products_options_details . '</label><br />' . "\n";								 
										 } 
										 // EOF POPUP ATTRIBUTE IMAGES
											break;
											
                      case '2':
											// BOF POPUP ATTRIBUTE IMAGES
											if (file_exists($attribute_image_lrg)) {
											$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 . '"') . '<br />' . '<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'] != '' ? '<a href="javascript:popImage(\''. $attribute_image_lrg.'\', \'Large View\',\''. $selected_attrname.'\')">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], 'Click to Enlarge', '', '' ) : '') . '</a>' . '</label><br />' . "\n";
											} else {
                      $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 . '"') . '<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";
											} 
										 // EOF POPUP ATTRIBUTE IMAGES                      
											break;
                      
											case '3':
                      $tmp_attributes_image_row++;
                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth2" />' . "\n";
                        $tmp_attributes_image_row = 1;
                      }

                      if ($products_options->fields['attributes_image'] != '') {
												// BOF POPUP ATTRIBUTE IMAGES
												if (file_exists($attribute_image_lrg)) {	
													$tmp_attributes_image .= '<div class="attribImg">' . 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 . '"') . '<label class="attribsRadioButton three" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . '<a href="javascript:popImage(\''. $attribute_image_lrg.'\', \'Large View\',\''. $selected_attrname.'\')">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], 'Click to Enlarge', '', '' ) . '</a>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . $products_options_details_noname . '</label></div>' . "\n";
												} else {
													$tmp_attributes_image .= '<div class="attribImg">' . 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 . '"') . '<label class="attribsRadioButton three" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . $products_options_details_noname . '</label></div>' . "\n";	
												} 
											 // EOF POPUP ATTRIBUTE IMAGES	
											} else {
                        $tmp_attributes_image .= '<div class="attribImg">' . 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 . '"') . '<br />' . '<label class="attribsRadioButton threeA" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . $products_options_details_noname . '</label></div>' . "\n";
                      }
                      break;

                      case '4':
                      $tmp_attributes_image_row++;

                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth2" />' . "\n";
                        $tmp_attributes_image_row = 1;
                      }

                      if ($products_options->fields['attributes_image'] != '') {
												// BOF POPUP ATTRIBUTE IMAGES
												if (file_exists($attribute_image_lrg)) {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsRadioButton four" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . '<a href="javascript:popImage(\''. $attribute_image_lrg.'\', \'Large View\',\''. $selected_attrname.'\')">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], 'Click to Enlarge', '', '' ) . '</a>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . 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 . '"') . '</div>' . "\n";
												} else {
												$tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsRadioButton four" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . 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 . '"') . '</div>' . "\n";
												} 
											 // EOF POPUP ATTRIBUTE IMAGES
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsRadioButton fourA" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . 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 . '"') . '</div>' . "\n";
                      }
                      break;

                      case '5':
                      $tmp_attributes_image_row++;

                      //                  if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth2" />' . "\n";
                        $tmp_attributes_image_row = 1;
                      }

                      if ($products_options->fields['attributes_image'] != '') {
												// BOF POPUP ATTRIBUTE IMAGES
												if (file_exists($attribute_image_lrg)) {
												$tmp_attributes_image .= '<div class="attribImg">' . 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 . '"') . '<br />' . '<label class="attribsRadioButton five" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . '<a href="javascript:popImage(\''. $attribute_image_lrg.'\', \'Large View\',\''. $selected_attrname.'\')">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], 'Click to Enlarge', '', '' ) . '</a>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label></div>';
												} else {
                        $tmp_attributes_image .= '<div class="attribImg">' . 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 . '"') . '<br />' . '<label class="attribsRadioButton five" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label></div>';
												} 
											 // EOF POPUP ATTRIBUTE IMAGES
											} else {
                        $tmp_attributes_image .= '<div class="attribImg">' . 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 . '"') . '<br />' . '<label class="attribsRadioButton fiveA" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label></div>';
                      }
                      break;
                    }
                  }

                  // checkboxes

Wow, fantastic, many, many thanks christinapupo. Your code works beautifully on my website as well. Easy to add in the attributes.php.
Good work. I'm very grateful for your efforts.
Thanks.

Kim

I have finished adding the code for radio and checkboxes to pop up large. I have also added code so that if you have zen lightbox enabled it will use that instead. If you want the zen lightbox gallery effect on attributes there is a small code change involved which I have documented in the new code. See the new file attached:
/includes/modules/CUSTOM/attributes.php

Hope this helps anyone out there looking for the same features I was...

Christina

Oops, I made a personal change on the above file which may not work for some of you. You may need to change all instances of "<br class="clearBoth2" />" back to "<br class="clearBoth" />" or just download the correct file here:

I deleted the other two files. Here is the corrected file:

Make sure to rename the file attributes_corrected.php to attributes.php... (from the zip file)

Hi again christinapupo,

Your attributes_corrected file doesn't work on my website even I have Zen Lightbox installed and this add-on works on my other photos.

Furthermore, your first attempt only works with the "Attribute Style for Radio Buttons/Checkbox" set to "0" on my website.

It could have something to do with my template or that I previously have changed other files in my search to make attributes.php work as I wanted it.

I'll keep your attributes-corrected.php and will give it another try when I upgrade my Zen-cart version.

Once again many thanks for your efforts and for sharing it with us.

Kim

Hi PUREchocolatetruffle, yes, I didn't think about this before but I have probably also made changes to this file. I know there were changes made for ImageHandler2 and ZenLightbox. I will post the code cleaned up on the original attributes.php file for 1.3.9h as soon as I can. If I don't get to it and anyone wants it just PM me.

I have installed this and it works great in Firefox 12.0 but in IE8 the enlarged window cuts off the right hand side of the image and in IE9 the enlarged window is so small that none of the image can be seen at all - please see:

http://www.matequehairproducts.co.uk/pm1952/index.php?main_page=product_info&cPath=2_7&products_id=40

Does anyone have any ideas on how to correct this?

Hi gcopping,

Nope, your enlarged window shows exactly the same in Firefox 12 and IE8 on my PC.

Kim

Kim,

Thanks for that but now I am really confused. I was on someone else's PC yesterday who used IE9 and that was when I discovered this issue and then checked on both versions of IE on my machines. Does anyone have any idea why this is happening?

Kim,

Just a though did you check the images at the foot of this page as they use the Attribute Popup plugin whereas the one at the top doesn't. It is the attribute image enlargements at the foot of this page which I am having problems with.

http://www.matequehairproducts.co.uk/pm1952/index.php?main_page=product_info&cPath=2_7&products_id=40

Hi gcopping,

You're right but you are yourself to blame. All the images at the foot of the page have the _MED name. You should change that to _LRG and the popup window will show correctly in both browsers.
Give it a try.

Kim

Kim,

Thanks for the help but when I change to LRG then the ability to enlarge disappears completely in both browsers. As per the instructions with this add on I have created a folder called attributes in images/medium. If you are suggesting that that the image should end in LRG should the image be in a folder images/large/attributes?

Gary

Hi gary,

I only use normal and large for my purpose. For instance with an image called "12_box_lille4.jpg", I put the larger version of this image in the folder images/large and give it the name "12_box_lille4_LRG.jpg". It might work if you do the same but with MED instead of LRG and locate your MED images in images/medium. But it's important that the correspondent images share the same file name apart from LRG/MED.

Hope this helps you. I'm a beginner myself but this works for me.

Kim