Problems with images (popup) and monitor resolution

Store Builder Questions
1

Hi,

I’ve a problem with popup images by using low monitor resolution, as for ex. netbook resolution, (with a width of 1024px and a low height…). In detail product page, when I click thumbnail product, the image in popup container doesn’t appears well… :confused:

The popup container has to scroll entirely down the page… like in other websites…

You can see my attached file (screenshot) here below…

How can I solve this problem?

Does someone can help me?



Marco.

bug.jpg

2

same problem here. I also post some threads but with no reply

I believe a good solution is to put thumbnails in vertical posotion on the right

so the space on the bottom will disappear and the image will be full

3

[quote name=‘elk’]same problem here. I also post some threads but with no reply

I believe a good solution is to put thumbnails in vertical posotion on the right

so the space on the bottom will disappear and the image will be full[/QUOTE]



Thank you!

But what is JS file of CS-cart that I’ve to edit? Or Have I to edit only CSS class file for solving this problem?

4

[quote name=‘webmarker1973’]Thank you!

But what is JS file of CS-cart that I’ve to edit? Or Have I to edit only CSS class file for solving this problem?[/QUOTE]



Can someone help me?

Which file Have I to edit for solving this problem?

Marco.

5

[quote name=‘webmarker1973’]Can someone help me?

Which file Have I to edit for solving this problem?

Marco.[/QUOTE]



skins/###/customer/common_templates/image.tpl

6

[quote name=‘elk’]skins/###/customer/common_templates/image.tpl[/QUOTE]



Hi Elk,

How can I do for deleting gallery below in popup image?

I think that It is the problem…



In this file (image.tpl) below I don’t know how to do…:




[QUOTE]{* $Id: image.tpl 11903 2011-02-24 09:18:16Z aelita $ *}

{strip}



{if $capture_image}

{capture name=“image”}

{/if}



{assign var=“flash” value=false}



{if $show_thumbnail != “Y”}

{if !$image_width}

{if $images.icon.image_x}

{assign var=“image_width” value=$images.icon.image_x}

{/if}

{if $images.icon.image_y}

{assign var=“image_height” value=$images.icon.image_y}

{/if}

{if !$image_width || !$image_height}

{if $images.detailed.image_x}

{assign var=“image_width” value=$images.detailed.image_x}

{/if}

{if $images.detailed.image_y}

{assign var=“image_height” value=$images.detailed.image_y}

{/if}

{/if}

{else}

{if $images.icon.image_x && $images.icon.image_y}

{math equation=“new_x * y / x” new_x=$image_width x=$images.icon.image_x y=$images.icon.image_y format=“%d” assign=“image_height”}

{/if}

{if !$image_height && $images.detailed.image_x && $images.detailed.image_y}

{math equation=“new_x * y / x” new_x=$image_width x=$images.detailed.image_x y=$images.detailed.image_y format=“%d” assign=“image_height”}

{/if}

{/if}

{/if}



{if $max_width && !$image_width}

{if $images.icon.image_x}

{assign var=“image_width” value=$images.icon.image_x}

{elseif $images.detailed.image_x}

{assign var=“image_width” value=$images.detailed.image_x}

{/if}

{/if}



{if $max_height && !$image_height}

{if $images.icon.image_y}

{assign var=“image_height” value=$images.icon.image_y}

{elseif $images.detailed.image_y}

{assign var=“image_height” value=$images.detailed.image_y}

{/if}

{/if}



{if $max_width && $image_width && $image_width > $max_width}

{assign var=“image_width” value=$max_width}

{math equation=“new_x * y / x” new_x=$image_width x=$images.icon.image_x|default:$images.detailed.image_x y=$images.icon.image_y|default:$images.detailed.image_y format=“%d” assign=“image_height”}

{/if}



{if $max_height && $image_height && $image_height > $max_height}

{assign var=“image_height” value=$max_height}

{math equation=“new_y * x / y” new_y=$image_height y=$images.icon.image_y|default:$images.detailed.image_y x=$images.icon.image_x|default:$images.detailed.image_x format=“%d” assign=“image_width”}

{/if}



{if $images.icon}

{assign var=“image_id” value=$images.image_id}

{elseif $images.detailed}

{assign var=“image_id” value=$images.detailed_id}

{/if}



{if !$images.icon.is_flash && !$images.detailed.is_flash}

{if $show_thumbnail == “Y” && ($image_width || $image_height) && $image_id}

{if $image_width && $image_height}

{assign var=“make_box” value=true}

{assign var=“proportional” value=true}

{/if}

{assign var=“object_type” value=$object_type|default:“product”}

{if $images.icon.image_path}

{assign var=“image_path” value=$images.icon.image_path}

{else}

{assign var=“image_path” value=$images.detailed.image_path}

{/if}



{assign var=“icon_image_path” value=$image_path|fn_generate_thumbnail:$image_width:$image_height:$make_box}



{if $absolute_image_path}

{assign var=“icon_image_path” value=$icon_image_path|fn_convert_relative_to_absolute_image_url}

{/if}



{if $make_box && !$proportional}

{assign var=“image_height” value=$image_width}

{/if}

{else}

{assign var=“icon_image_path” value=$images.icon.image_path}

{if !$icon_image_path}

{if $object_type == “detailed_product” && $images.detailed.image_x}

{if $settings.Thumbnails.product_details_thumbnail_width}

{assign var=“image_width” value=$settings.Thumbnails.product_details_thumbnail_width}

{if $make_box && !$proportional}

{assign var=“image_height” value=$image_width}

{else}

{math equation=“new_x * y / x” new_x=$image_width x=$images.detailed.image_x y=$images.detailed.image_y format=“%d” assign=“image_height”}

{/if}

{/if}

{/if}

{assign var=“icon_image_path” value=$images.detailed.image_path|fn_generate_thumbnail:$image_width:$image_height:$make_box}

{/if}

{/if}



{if $show_detailed_link && $images.detailed_id}

{if $object_type == “detailed_product” && ($settings.Thumbnails.product_detailed_image_width || $settings.Thumbnails.product_detailed_image_height)}

{assign var=“detailed_image_path” value=$images.detailed.image_path|fn_generate_thumbnail:$settings.Thumbnails.product_detailed_image_width:$settings.Thumbnails.product_detailed_image_height:$make_box}

{elseif $object_type == “detailed_category” && ($settings.Thumbnails.category_detailed_image_width || $settings.Thumbnails.category_detailed_image_height)}

{assign var=“detailed_image_path” value=$images.detailed.image_path|fn_generate_thumbnail:$settings.Thumbnails.category_detailed_image_width:$settings.Thumbnails.category_detailed_image_height:$make_box}

{else}

{assign var=“detailed_image_path” value=$images.detailed.image_path}

{/if}



{/if}



{if !(($object_type == “category” || $object_type == “detailed_category”) && !$icon_image_path)}

“{$images.icon.alt|default:$images.detailed.alt}”

{/if}



{if $show_detailed_link && $images.detailed_id}



{/if}

{else}

{assign var=“flash” value=true}

{if $images.icon.is_flash}

{assign var=“flash_path” value=$images.icon.image_path}

{else}

{assign var=“flash_path” value=$images.detailed.image_path}

{/if}



{assign var=“icon_image_path” value=$flash_path|default:$config.no_image_path}

{assign var=“detailed_image_path” value=$flash_path|default:$config.no_image_path}





http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0” {if $image_width}width=“{$image_width}”{/if} {if $image_height}height=“{$image_height}”{/if}>









{if $flash_vars}



{/if}

http://www.macromedia.com/go/getflashplayer” {if $flash_vars}FlashVars=“{$flash_vars}”{/if} />





{/if}



{if $show_detailed_link}


{$lang.view_larger_image}


{/if}

{if $capture_image}
{/capture}
{capture name="icon_image_path"}
{$icon_image_path|default:$config.no_image_path}
{/capture}
{capture name="detailed_image_path"}
{$detailed_image_path|default:$config.no_image_path}
{/capture}
{/if}

{/strip}
[/QUOTE]

Please, can you give me an hand for this problem? My customer doesn't like it...
Thank you...
7

if you want to remove the thumbnails in the bottom of image frame, then open file

/skins/###/customer/views/products/components/product_images.tpl and remove line 19 by adding :



[HTML][/HTML]

8

[quote name=‘elk’]if you want to remove the thumbnails in the bottom of image frame, then open file

/skins/###/customer/views/products/components/product_images.tpl and remove line 19 by adding :



[HTML][/HTML][/QUOTE]



Ok…, thanks…, but

I haven’t solved my problem…

If you see my attachment above, in the first thread, you can see that photo scroll inside frame when It is very big or when height of browser stage is too much small…

I need that photo scroll on the whole website without being cutted in the frame…

I hope that I explained more clearly…

This is a problem of css configuration, javascript or what else?

Marco.

9

[quote name=‘webmarker1973’]Ok…, thanks…, but

I haven’t solved my problem…

If you see my attachment above, in the first thread, you can see that photo scroll inside frame when It is very big or when height of browser stage is too much small…

I need that photo scroll on the whole website without being cutted in the frame…

I hope that I explained more clearly…

This is a problem of css configuration, javascript or what else?

Marco.[/QUOTE]



I found a thread on this problem:

[url]http://forum.cs-cart.com/showthread.php?t=18352&highlight=previewer.js[/url]



Is It possibile that There is no solution for this problem? :frowning:

Please, can you help me?

Marco.

10

i also have made another 2 post here in the forum and one to my cs-cart provider but noone have found a solution for this problem



The thing is to make the frame taller. Fit on all page (at least for height, not width)

another solution is to move the thumbnails to the right in vertical position, so we will earn about 70px (30px of thumbnails + 2 x 20px of space over and under it)



i use images of 400px height, and they are not appeared full in a laptop with 1366x768 resolution

Thats very annoying. Someone must fix this



i will try again to see what i can do.

11

The previewer kind of sucks to be honest with you. I have a lot of big images and it makes it a big pain in the butt.



There are some great solutions though, but they do cost money.



The first one is the Magic Thumb addon for CS-Cart from Magic Toolbox. They also have some other types of image things, but I like the Magic Thumb one the best. You can get it at [url]http://www.magictoolbox.com/magicthumb/modules/cscart/[/url] Just be sure to purchase the CS-Cart one.



Another great addon is the lightbox addon from Webgraphiq. You can get Webgraphiq’s addon at [url]Search results Thomas also has some other image things, but I personally like the Lightbox one the best.



I hope those help. Sorry there aren’t any free options out there.



Brandon

12

why cs-cart not including their jquery lightbox effect on popup images ?