attribute pop up images

Hello,

I have searched long and hard for attribute image pop up, but the only links I have found don't seem to be working. I have read and re-read the instructions, but have come to the conclusion that they don't work with 1.3.7.
I have also read many threads where users wanted such a feature.

So I have decided to reprogam it myself. I am not a programmer, so the code is not really pretty, but here is how it works.

If you added attribute images the program will now look for larger attribute images in the /images/medium/attributes folder. The image filename has to be in this format: imageName_MED.ext. imageName is whatever the attribute images name is. ext is whatever the attribute image file extension is.
If the MED image is found it will automatically create a link that when clicked opens a window displaying the larger image in a window that is automatically sized to the picture size. It also adds "Click to Enlarge" above the picture.

If it doesn't find a MED picture, no link is generated.

if you'd like to check it out, please go to my website, www.quillowmania.com.
The link will take you to the correct location to demo the attributes. Look towards the bottom of the page where it says "Select Bib Design"

The attachment only contains two files. Copy them to your webserver to the appropriate spots. I don't know if it works with any version other than zen-cart 1.3.7.

My hero! Hey, where do these two files go? I get that the javascript file goes here...

• YOUR_CATALOG > includes > templates > YOUR_TEMPLATE > jscript

...but the attributes.php looks like you have it going into...

• YOUR_CATALOG > modules > YOUR_TEMPLATE

...which doesn't seem right. Any ideas?

This is the most promising thread I have found thus far... attribute pop up images

You are correct.
I forgot to stick the modules folder into the includes folder.
The correct patch is
YOUR_CATALOG > includes > modules > YOUR_TEMPLATE > attributes.php

I re-created the zip file and the paths should be correct now.

Sorry for the delayed response.

BTW, I don't currently have this enabled at my store, so you won't see an example right now. Not because it wasn't working, I just didn't have time to create attribute pictures yet.

Hurray! It's works. At first I thought it wasn't, but I just had to change the layout of my attributes. Apparently it only works when the image style is set to "0= Images Below Option Names"

As of now, I have it up and working at the below link. I took out the text "click to enlarge" simply because I am going to have many options and I wanted to save space.

http://store.pinkpuppydesigns.com/index.php?main_page=product_info&cPath=1&products_id=2

**** EDITED *** Never ever post in a forum, email, newsletter etc. the zenid or zenAdminID or you will be doomed!!** :eek:

Great contribution.. might wish to add to downloads section here at zencart
:D

cheezylu:

Hurray! It's works. At first I thought it wasn't, but I just had to change the layout of my attributes. Apparently it only works when the image style is set to "0= Images Below Option Names"

As of now, I have it up and working at the below link. I took out the text "click to enlarge" simply because I am going to have many options and I wanted to save space.

http://store.pinkpuppydesigns.com/index.php?main_page=product_info&cPath=1&products_id=2

I'm not following you on this one. Where do I set that option?

In your administration under...

Catalog > Option Name Manager

Then click "Edit" on any of the attributes and type "0" in the text box titled "Attribute Style for Radio Buttons/Checkbox".

So, I'm making progress!

Here is what I have now: http://xmxbx.com/cart/index.php?main_page=product_info&products_id=211

Things I'm concerned about:

1: includes/modules/my_template/attributes.php

                                        //find med size attribute images. location must be in /images/medium/attributes and image name must be image_MED.ext


                                        $array_filename = split("[/\\.]", $products_options->fields['attributes_image']) ;
                                        $filename = $array_filename[count($array_filename)-2];
                                        $extension = '.'.$array_filename[count($array_filename)-1];
                                        $filename = $filename.'_MED';
                                        $path = DIR_WS_IMAGES . 'medium/attributes/';
                                        $attribute_image_med = $path . $filename. $extension;
```I had to remove the / before "medium/attributes" because it was changing the javascript to:

javascript:popImage('images//medium/attributes/crownheartskull-ts-grey_MED.jpg', 'Large View')

So, the links are created on the images, but when you click them, nothing happens.  You can load the images if you type in the path manually, so file permissions are good.

I was looking over your code, and I see that you use popWindow, as opposed to popImage.  Yours also seems to use a full image path, where mine uses relative paths... No idea if that relevant, though.


Any ideas?

Oops - I got confused. I was looking at the baby clothing, not the puppy stuff :p

Cheez - your stuff uses the double //'s and works, so I put mine back to the default.

I have to be missing something simple here.

Ok, I think I narrowed it down. I'm getting this error:

Error: popImage is not defined
Source File: javascript:popImage('images//medium/attributes/crownheartskull-ts-grey_MED.jpg', 'Large View')
Line: 1

I don't see popImage defined in either of our page sources. Where should popImage be defined?

Oh, SNAP! Let's take it back to the basics :p

-rw-------  1 xmxbx pg509405 2390 Mar 15 08:19 jscript_dynamic_window_popup.js
```The javascript file thinger didn't have read permissions.  It works now!

I'm glad you got it working!

Thank you so much, that truly is a great addition and very well explained!

I am wondering... my pop up window is about 1 inch by 2 inches and I can only see the corner of my enlarged picture. I am unable to make the pop up window any bigger either by pressing the button in the right corner or the resize option. I am not sure if this is a setting in the zen cart or if it is a setting in my browser. I tried to open and resize it on 2 different computers. Anyone had this problem before?

etal2000:

I am wondering... my pop up window is about 1 inch by 2 inches and I can only see the corner of my enlarged picture. I am unable to make the pop up window any bigger either by pressing the button in the right corner or the resize option. I am not sure if this is a setting in the zen cart or if it is a setting in my browser. I tried to open and resize it on 2 different computers. Anyone had this problem before?

Probably has to do with how the window is generated:

from: /includes/templates/my_template/jscript/jscript_dynamic_window_popup.js

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();

Thank you so much. You are right, the script set the pop up window at 100x150. It works great now!:smile:

Lucky guess!

Would this work on my attributes?
What I'm trying to do is have a small popup box popup next to the attributes.

My Link
http://www.anythingframed.co.uk/index.php?main_page=product_info&cPath=69&products_id=184

quillowmania:

Hello,
if you'd like to check it out, please go to my website, www.quillowmania.com.
The link will take you to the correct location to demo the attributes. Look towards the bottom of the page where it says "Select Bib Design"

Above the image it says "Click to enlarge" and below the image you have it set up to say the product name/option value (for example "Spit Happens") instead of "Please choose". I'd like to do the same, either that or get rid of "Please choose" completely. How did you change yours?!

I modified the script so that it now works using the corresponding images in the /images/large/ subdirectory rather than images/attributes/medium

I did this because the 'large' directory already exists in the default zen cart set-up (I believe) AND I have already uploaded a significant number of the attributes 'large' images there!

In this mod of the mod, the required large image 'suffix' follows the Zen cart convention i.e. image_name_LRG*.xxx

*I hope that it may be of use to someone.