Jump to content

Need help resizing more images popup window


Guest prorc

Recommended Posts

Hi all,

I am fairly new to Cubecart. I have uploaded product images to my site via ftp. The full size images are too big for the popup window that opens when clicking on the "more images" link from the product page. I would like to resize the popup window rather than the images, but have not been able to sucessfully do this.

I have tried to modify the divMainImage code in the jslibrary.js file, but that doesn't seem to work so I am not sure if I am doing something incorrectly or if that is the wrong place to be making changes. Any help you can give me would be greatly appreciated.

Link to comment
Share on other sites

first off we need to know how big your primary images are in width and height and in DPI

are these straight off your digital camera? if so you are going to need to resize them to proper web sizes first using photoshop or paint shop pro or any other image editor.

the div you are modifying is the right one if I remember correctly but you also have to modify the size of the popup window to accomodate it

which is in the URL that activates the popup this URL is in the viewProd.tpl

look for


<!-- BEGIN: more_images -->

find the a href and look for 'images' the next two number encapsulated by single quotes is the width and height of the popup window

so you would need to modify this accordingly to make your popup bigger

IMPORTANT!!!!

DO not rely on html scaling to size your photos!!!!!

they will still be huge and carry their large file size with them and html scaling can make them look bad Size them properly in you favorite image editor

72DPI is what we use for the web

I reccomend for main product phot no larger than 480pixels wide

for popup image no larger than 600 pixels wide

final note....

I see that you are using CubeCart3 you should definetly consider upgrading to CubeCart 4

and making use of the lilghtbiox gallery in CCv4 so much nicer than the popup gallery

any questions feel free to post them here or PM me

Kinetic

Link to comment
Share on other sites

In the file /skins/YOUR_SKIN/styleTemplates/content/viewProd.tpl, find the line that says: <!-- BEGIN: more_images -->

Adjust the values you see in the openPopup() function call.

Thank you for your quick reply. I am using the free skin ArwenBlue for CC3. The options in the styleTemplates/content folder are account.tpl, cart.tpl, changePass.tpl, confirmed.tpl, dnExpire.tpl, forgotPass.tpl, and gateway.tpl.

There is a styleTemplates/popup/prodImages.tpl option. However, when I look to edit this file it seems to me as if it pulling the popup window dimensions from the divMainImg ID in the /js/jslibrary.js file.

Thoughts?

Link to comment
Share on other sites

Not using a stock skin is information that was important to know. Should have mentioned that to start. I don't have a copy of ArwenBlue - I'll see if I can get it and get back to you.

OK, there are 17 more files in skins/ArwenBlue/styleTemplates/content folder in addition to the ones you listed, specifically a viewProd.tpl with the line you need to find (as mentioned earlier).

Link to comment
Share on other sites

first off we need to know how big your primary images are in width and height and in DPI

are these straight off your digital camera? if so you are going to need to resize them to proper web sizes first using photoshop or paint shop pro or any other image editor.

the div you are modifying is the right one if I remember correctly but you also have to modify the size of the popup window to accomodate it

which is in the URL that activates the popup this URL is in the viewProd.tpl

look for


<!-- BEGIN: more_images -->

find the a href and look for 'images' the next two number encapsulated by single quotes is the width and height of the popup window

so you would need to modify this accordingly to make your popup bigger

IMPORTANT!!!!

DO not rely on html scaling to size your photos!!!!!

they will still be huge and carry their large file size with them and html scaling can make them look bad Size them properly in you favorite image editor

72DPI is what we use for the web

I reccomend for main product phot no larger than 480pixels wide

for popup image no larger than 600 pixels wide

final note....

I see that you are using CubeCart3 you should definetly consider upgrading to CubeCart 4

and making use of the lilghtbiox gallery in CCv4 so much nicer than the popup gallery

any questions feel free to post them here or PM me

Kinetic

My images were taken directly from my manufacturer's website so they are all sized for the internet. The skin I am using (see my earlier response to the first post) does not have the viewProd.tpl file.

As far as I can tell the popup box is being limited to 400 x 400. I would like for it to be more like 600 x 600.

Not using a stock skin is information that was important to know. Should have mentioned that to start. I don't have a copy of ArwenBlue - I'll see if I can get it and get back to you.

Thank you. This skin is a free skin I downloaded from cubecartforums.org.

Link to comment
Share on other sites

Don't know if you caught my edit above. In the ArwenBlue I just downloaded...

OK, there are 17 more files in skins/ArwenBlue/styleTemplates/content folder in addition to the ones you listed, specifically a viewProd.tpl with the line you need to find (as mentioned earlier).
Link to comment
Share on other sites

A little more info. The skin has a stylesheet called popup.css. The following is listed in this css file.

#divMainImg {

float: left;

width: 400px;

height: 400px;

text-align: center;

overflow: auto;

margin-bottom: 5px;

}

I have changed this to various alternative sizes. The overall window remains the same size, but the size of the full size image frame in the popup window changes. When I change the width to 600px the scroll bars disappear and the full size image drops down below the thumbnails.

Don't know if you caught my edit above. In the ArwenBlue I just downloaded...

OK, there are 17 more files in skins/ArwenBlue/styleTemplates/content folder in addition to the ones you listed, specifically a viewProd.tpl with the line you need to find (as mentioned earlier).

Thank you. I did miss your edit. I also missed the fact that my cpanel file manager had multiple pages for the file listings.

Link to comment
Share on other sites

the div you are modifying is the right one if I remember correctly but you also have to modify the size of the popup window to accomodate it

which is in the URL that activates the popup this URL is in the viewProd.tpl

look for


<!-- BEGIN: more_images -->

find the a href and look for 'images' the next two number encapsulated by single quotes is the width and height of the popup window

so you would need to modify this accordingly to make your popup bigger

That worked to resize the popup window. It took a bit of playing to get the size correct. I think I am going to have to resize my images as the window ended up having to be 1150 x 600. Thanks for your help.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...