Attribute Image Popup via CSS

[webomat]

Ok, after 700 pots of coffee and an entire day (yes, I'm ashamed to admit it took that long to explore all the options), I finally have a semi-solution that I can live with re the much-sought-after Attribute Image Popup.

First, read this page and get the CSS (you'll need it):
http://www.dynamicdrive.com/style/cs...-image-viewer/

Next, you will have to ~ahem~ modify the modules/YOUR_TEMPLATE/attributes.php file for images as desired. I say 'as desired' because I only wanted it to work on images under certain conditions... for my purposes here's what I did:

In attributes.php find this section:

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="clearBoth" />' . "\n";
  $tmp_attributes_image_row = 1;
 }

if ($products_options->fields['attributes_image'] != '') {
  $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";
  } 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;

I changed the lines above in red by adding the necessary pcs of HTML noted in green below:

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="clearBoth" />' . "\n";
  $tmp_attributes_image_row = 1;
 }

if ($products_options->fields['attributes_image'] != '') {
  $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="" class="thumbnail">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<span><img src="rimages/' . $products_options->fields['attributes_image'] . '" alt="" /></span></a><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 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;

Ok, first thing I should say is I did not want the popup label in the original CSS example (link above) so you won't see the span tag include that in the attribute.php coding in green.

As I said, I only wanted this to happen to images under certain conditions so I only had to make this change once... you may have to change other sections of attributes.php for your purposes.

Next, I (being a slacker) found it easiest to fudge the directory of the images to be swapped by creating a directory called "rimages\attributes" at the same level as "images\attributes" ... the point being to exactly mirror the attributes image location and name, with a twist. "-) So in the code above the swap images are located in <img src="rimages/' (the ZC function adds the 'attributes' directory). Then I created larger versions of my attribute images, using exactly the same name as the original but placed in the "rimage" directory structure.

For images I didn't intend to have a swap image but that get caught in the creation, I created a 10x10 clear gif for each of those images (again, in the 'rimages' directory structure).

To hide things better, I made some changes to the CSS styling (which you need to get from the above link and put into your CSS stylesheet). For instance:

-- I moved the hidden large image to -2000 so it wouldn't show in higher res displays;

-- I removed all borders and text-decoration for the images/links

Actually I'll just display that section here and let you dig... be advised there may be a bit of overkill, I was getting frustrated with browser compatibility:

.thumbnail{
position: relative;
z-index: 0;
text-decoration: none;
border: 0px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
text-decoration: none;
border: 0px;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
/* background-color: lightyellow; */
padding: 5px;
left: -2000px;
/* border: 1px dashed gray; */
visibility: hidden;
color: black;
text-decoration: none;
border: 0px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
text-decoration: none;
border: 0px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
text-decoration: none;
border: 0px;
}

Speaking of cross-browser compatibility, here is what I found:

-- Opera 9 is a bit jumpy and weird with this, at least in my final product listing. The images don't pop where I'd always expect and seem to be dependent on how I've scrolled the screen. It may work ok for you, I've hacked mine up quite a bit to get the layout I wanted;

-- Opera 9 and IE 6 both let you left arrow over if the image pop on the far right of the screen slides that direction, but FF is really touchy... you have to keep adjusting where the cursor is or it won't let you arrow over;

-- I really wanted to put the thumb class on the div and drop the anchor, but IE won't let you hover without it, meaning it won't work in IE 6 (don't have 7 installed yet). Which creates the problem that if the user clicks on the image it sends them to the Index page (at least for my store). There's probably a solution for this but I don't have time to figure it out right now.

Bottom line, all this is just an idea of something that works for me... for now. I'd like to fine tune it ~someday~. If anyone reading this has any ideas of how to improve things, I'd love to hear it!

If anyone has any questions on what I did, I will be in and out for a few days... once my store launches on Tuesday I'll have more free time.

Cheers,

Becky

[patski]

This is great - but unfortunately I can't get it to work at all! Have made sure my attribute name is set to the correct style type so uses case 4 but no joy. Images directory is there and has identically named images in it but zilch.

Probably something simple but not sure I know what!

[patski]

It was something simple - had my attribute set as a dropdown. Works when changed to a radio button.

[webomat]

It was something simple - had my attribute set as a dropdown. Works when changed to a radio button.

Glad to hear it! Sorry I didn't get back here sooner... always running behind. Just going live today, so maybe now I can play with this some more.

What do you think of it? It's sort of a pain to set up, but it has a nice feel to it.

Cheers,

Becky

[Danielle]

There is a great mod for popup attribute images in the downloads section here: http://www.zen-cart.com/index.php?ma...roducts_id=388

I just installed it and it works great. I am using it as well as Image Handler and Lightbox, and they work fine together.