Attribute Rollovers - By Nineve

My new mod is ready for download.
Simple 3 step procedure to add a rollover effect for Attributes (in this case to enlarge the thumbnail sized images). Very little altered in the native file of attributes.php and a bit of CSS to add to your stylesheet.

Hope people find it as useful as I have. Enjoy. :smile:

I love your module!!

But is it possible so that when you hover a different image comes up?

I really really need that option!

Hi,
Glad you like it. Unfortunately, no, it can not (as configured) open another image. Due to how it was coded (those images are being preloaded) I did not want to further burden the page load time.

You could use an image of your product and just have that enlarge or...

There is another mod you may want to look at given the circumstances of your web site. "Swap Images via MouseOver or Click" will allow you to customize your additional images. That might be a good option for you.
:smile:

Yes but I like the color options and how its placed under the attributes section.

How does this work? Any examples to show? I have the mod and installed it on 1.3.9f. I thought that if I a product attribute that has images say "choose color" then radio button choices showing the different color swatches (for example) that this mod would if I roll over one of the images pop up a larger version of the image. However it doesn't seem to be working at all is there something I am missing here?

There is another mod that changes the main image to an attribute image when you select either a radio button option or a pull down menu. This does not work like that. This is just to enlarge the attribute image when you hover over the thumbnail. :smile:

Yes that is my understanding if I have an attribute image that with this mod if someone rolls over the attribute image a larger version of the image will pop up. However I have installed the mod and when I roll over an attribute image on a product listing nothing happens.

I was trying to use this module as well, but it most of the templates come with several css pages. The main, the tm, the stylesheet.css and buttons.css So which one is the css code in the readme file supposed to be inserted into? Additionally, it talks about adjusting the size to 200 px on lines 482-483, but can't seem to find that either. Thanks.

I need this mod too. After installation on 1.3.9h nothing changes.
I have two attributes colour and size. I want to hover over the colour images then get a large image. Did somebody get this to work or can help me with this?.

I installed this mod, uploaded my images, and then edited the CSS file to reflect my image sizes.

Issue 1: In Internet Explorer 8, only two of the three attribute thumbnails are displayed, and of those, each is shown twice (side by side as if one image) and is enlarged and fuzzy.

Issue 2: In Firefox 3.6, only two of the three attribute thumbnails are displayed. The third one is represented by text, but no image.

Example

I believe the issue is with the CSS, particularly this section:

/*currently hidden attribute image*/

a.attribRoll i 
   {
      display:block; 
      position:absolute; 
      left:-9999px; opacity:0;
      -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
      -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
      box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
      -moz-border-radius: 10px;
    
      -webkit-border-radius: 10px;
      border-radius: 10px;
   }
```Can you advise on a fix?

Waij:

I need this mod too. After installation on 1.3.9h nothing changes.
I have two attributes colour and size. I want to hover over the colour images then get a large image. Did somebody get this to work or can help me with this?.

It works on 1.3.9.h You have to install this mode and then create totaly new attribute. It doesn't work on previously created attributes. Or could someone fix this so it work on the attributes that are already uploaded?

I found out that this mod works only if you set Attribute Style for Radio Buttons/Checkbox to 0

Here is how to make it work if you're using radio buttons with style 3:

find line 237, it starts with case '3' (this means the rollover effect will work when using style 3)

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

replace this . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) .

with this . '<a class="attribRoll" href="" onclick="return false;">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '<i>' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '</i>' . '</a>' .

In a similar way you can make it work with other styles.

Is there a working demo?

Thanks, this works great now.

The same change works with radio buttons style 4 under "case 4" as well.

line 237 of what file? Please provide the file name and file path so that the community may benefit from your fix.

dee_d_lady:

I found out that this mod works only if you set Attribute Style for Radio Buttons/Checkbox to 0

Here is how to make it work if you're using radio buttons with style 3:

find line 237, it starts with case '3' (this means the rollover effect will work when using style 3)

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

replace this . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) .

with this . '<a class="attribRoll" href="" onclick="return false;">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '<i>' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '</i>' . '</a>' .

In a similar way you can make it work with other styles.

there's only one file included with the mod. attributes.php which should be in your CUSTOM folder

I am very new at zencart and the questions might sound dumb; but where do I download your rollover mod????
Thanks
Mayte

mayte:

I am very new at zencart and the questions might sound dumb; but where do I download your rollover mod????
Thanks
Mayte

Scroll to the top of this page. Look for "Free Software Addons". Click it to go to the downloads section.

Search for this mod by name "Attribute Rollovers"

Most likely a list of mods with either of those words in the description will come up. Scroll the list until you find this mod. Click it for more information and to access the download link.

Thanks I find it!
Mayte