[solved] Images "jump" out from product page thumblist

[Bill8g]

Take a look at the pic please. The images jump out of line. We have this problem for some time now but even if I looked for help I found nothing. Do you have any ideas?

Edited February 10, 2013 by Bill8g (see edit history)

[vekia]

i cant find any url in your topic, did you forget about it?

[Bill8g]

i cant find any url in your topic, did you forget about it?

 

I am really sorry. I thought you'd take it for spam. Here it is: http://www.tstudio.g...hp?id_product=1

 

This is the same URL for my other problem I posted some time ago.

Edited February 3, 2013 by Bill8g (see edit history)

[vekia]

I am really sorry. I thought you'd take it for spam. Here it is: http://www.tstudio.g...hp?id_product=1

 

This is the same URL for my other problem I posted some time ago.

 

I checked it - the problem is with width param here:

 

<ul id="thumbs_list_frame" style="width: 2343px;">

 

are you able to change it value? replace it by 5000 or sth - with this modification it works:

 

[Bill8g]

Is this in product.tpl file?

[vekia]

Is this in product.tpl file?

yes, for default template it looks like:

 

 <div id="thumbs_list">
  <ul id="thumbs_list_frame">
   {if isset($images)}
 {foreach from=$images item=image name=thumbnails}
 {assign var=imageIds value="`$product->id`-`$image.id_image`"}
 <li id="thumbnail_{$image.id_image}">
  <a href="{$link->getImageLink($product->link_rewrite, $imageIds, thickbox_default)}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
   <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
  </a>
 </li>
 {/foreach}
   {/if}
  </ul>
 </div>

[Bill8g]

I did find the line

<ul id="thumbs_list_frame" style="width: 2343px;">

using Firebug and changed it to 5000 and yes it works that way. But only with firebug.

 

I looked into the product.tpl file of my template and the global.css file just to be sure and it seems that something is missing. Don't you think so? Am I wrong?

 

What I am doing now, is I am downloading the foul directory and I am going to ask "Sublime Text" editor to search all the directory and find that same line. I wish it will work that way.

[Bill8g]

Update: After hours and hours of trying still nothing! As far as I can see the line I need to change (of what you have said) is:

 

<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />

 

...but there is really nothing I can change here to fix the problem. The sollution isn't really changing the width to "5000" or something because some other products have various width (smaller and bigger) and still they "jump out".

 

There must be another way to fix this. please some. Helping is for free for god's sake! It's an official forum I can't understand why people keep posting questions and only a few get what they need.

 

Sorry if I'm beeing rude but I can't stand it! I am so tired I am working on this for 16 hours.

[vekia]

it's hard to say what's exactly wrong, moreover - you use non-default theme so we don't exactly know how desginer created it (we haven't got access to tpl files).

 

When you're trying to debug it with firebug - the way to fix it is to change width param of

<ul id="thumbs_list_frame">

 

did you add width param to it? if so, why it doesnt work? Do you checked source with firebug after adding width param?

[Bill8g]

Of course I am not using a default template. A very few people do. I purchased this template from templatemonster. From templatemonster's support told me that it might be a versioning issue. The template is designed for versions 1.4.4 but I am using 1.4.9. I am attaching the "product.tpl" file of the template. There is really nothing you can do with it.

 

If I am not wrong there already is a width param there. But no way to fix it.

 

It does not allow me to attach it. Pasting the code from thumbnails and down:

 

<!-- thumbnails -->
	<div id="views_block" {if isset($images) && count($images) < 2}class="hidden"{/if}>
	<div id="thumbs_list">
		<ul id="thumbs_list">
			{if isset($images)}
				{foreach from=$images item=image name=thumbnails}
				{assign var=imageIds value="`$product->id`-`$image.id_image`"}
				<li id="thumbnail_{$image.id_image}">
					<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
						<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
					</a>
				</li>
				{/foreach}
			{/if}
		</ul>
	</div>
	</div>
	{/if}
	<div class="clearblock"></div>
	{if isset($images) && count($images) > 1}<span id="wrapResetImages" style="display:none;"><div><a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></div></span>{/if}
	<!-- usefull links-->
	<ul id="usefull_link_block">
		{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
		<li><a href="javascript:print();">{l s='Print'}</a></li>
		{if $have_image && !$jqZoomEnabled}
		<li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>
		{/if}
	</ul>
</div>

 

Edited February 4, 2013 by Bill8g (see edit history)

[razaro]

I think that problem is in this line in js/product.js:

var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'));

It should calculate width of li element which is 65px plus width of margin which is 0 here but in css you have

margin:0 0 0 20px;

So if you change it to

var thumb_width = $('#thumbs_list_frame >li').width()+20;

Then ul size will be (65+20)*36 +3 in this case , total 3063px which is ok if you change it in Firebug/Chrome tools.

Edited February 4, 2013 by razaro (see edit history)

[vekia]

I think that problem is in this line in js/product.js:

var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'));

It should calculate width of li element which is 65px plus width of margin which is 0 here but in css you have

margin:0 0 0 20px;

So if you change it to

var thumb_width = $('#thumbs_list_frame >li').width()+20;

Then ul size will be (65+20)*36 +3 in this case , total 3063px which is ok if you change it in Firebug/Chrome tools.

I think that problem is in this line in js/product.js:

var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'));

It should calculate width of li element which is 65px plus width of margin which is 0 here but in css you have

margin:0 0 0 20px;

So if you change it to

var thumb_width = $('#thumbs_list_frame >li').width()+20;

Then ul size will be (65+20)*36 +3 in this case , total 3063px which is ok if you change it in Firebug/Chrome tools.

 

yup, that's correct

[Bill8g]

I think that problem is in this line in js/product.js:

var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'));

It should calculate width of li element which is 65px plus width of margin which is 0 here but in css you have

margin:0 0 0 20px;

So if you change it to

var thumb_width = $('#thumbs_list_frame >li').width()+20;

Then ul size will be (65+20)*36 +3 in this case , total 3063px which is ok if you change it in Firebug/Chrome tools.

 

Does the fact that I LOVE you right now make me gay or something?

 

OMG! YOU ARE AMAZING! HOW DID YOU DO THAT? HOW? That maths are like Greek to me. (Lol though I am)

 

I can't believe you find the problem! Is this because of me or because of an update? I didn't put a hand on the file before. It works very very fine now! Thank you again and again razaro.

 

@razaro Is there a way to calculate another issue I posted here? --> http://www.prestashop.com/forums/topic/221911-category-tree-is-gone/

[vekia]

i marked this topic as solved regards!

[razaro]

No problem, I had similar issue in past.

It is not because of you or update, it is small theme issue.

Note adding 20 there is not great solution but it works.

What you could try is to change in global.css line 838

#thumbs_list li + li {
margin: 0 0 0 20px;
}

 

to

#thumbs_list li {
margin-right: 20px;
}

 

Then in product.js old line

var thumb_width = $('#thumbs_list_frame >li').width()+parseInt($('#thumbs_list_frame >li').css('marginRight'));

should work, and if you choose for some reason to change value of that margin in css, change should be picked up by

code in product.js, without need of manually entering that margin value.

[Guest]

Hey razaro,

 

This solution almost works for me.

 

EDIT: I got the solution to work by commenting out the line in product.js!

 

Thanks for the point in the right direction. Now the div occupies 100% of the parent div as I told #thumbs_list_frame li to do!

 

Thanks again,

 

eggo

Edited June 5, 2013 by Guest (see edit history)

[Guest]

Hey guys,

 

That line for some reasons messes up with Attribute Wizard from tomerg3.

 

Can you guys see any other solutions?

 

Here is the problem on the site, and to access the site use the following:

 

Username: stack

Password: overflow

 

3 different examples, with the last one being the main problem.

 

http://anewall.com/m...harvesters.html

 

http://anewall.com/b...collection.html

 

http://anewall.com/g...collection.html

 

I would really appreciate it.

 

Best,

 

eggo

Edited June 6, 2013 by Guest (see edit history)

[vekia]

wow! you probably know that i love your website

for the first time when i access to your website it didn't work.

But i have to clear cache in browser - after that it works as you said

[Guest]

Thanks vekia! Appreciate it!

 

I have the same issue sometimes now that I have the cache turned on and force recompile off.

 

When I make changes to a live site is it a good practice to manually clear the cache or do a manual "force recompile" or something similar?

 

Thanks,

 

eggo