[Solved] Problem with product views,thumbnails, on product page

[Paulito]

Good morning all,

 

Using ps 1.5.1.4 default theme

 

I seem to have caused a problem with product image thumbnails on the product pages, they now do not show as a row of three with an arrow to the right but as a block

 

please see here to understand more

 

Below is part of the product .tpl file

 

 

<!-- thumbnails -->

<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">

{if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}

<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>

{if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}

</div>

{/if}

{if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}

<!-- usefull links-->

<ul id="usefull_link_block">

{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}

<li class="print"><a href="javascript:print();">{l s='Print'}</a></li>

{if $have_image && !$jqZoomEnabled}

{/if}

</ul>

</div>

 

The links on the thumbnails work but not correctly, the link on the larger image does not work at all

 

I am not sure what I have done as this was working perfectly before

 

Hope you can help

 

Paul

Edited August 25, 2013 by Paulito (see edit history)

[vekia]

it's probably because script can't load functions well, you've got two errors in:

[Paulito]

Thank you, I noticed that to.

 

Any idea why or how to fix

 

Paul

[vekia]

I were you, I will try to reupload the /js/product.js file (just upload original file) - it looks like problem is there

 

you changed some js scripts in product.tpl file too?

[Paulito]

Good morning,

 

Thank you vekia, uploading new product.js file solved the problem (see attached)

 

I am still not sure, how I managed to mess up the file

 

Paul

Edited August 25, 2013 by Paulito (see edit history)

[vekia]

own experience tells me that files are damaged while uploading (especially with FileZilla) very often. So maybe there was problem in this case.

 

anyway, glad that it works now

[Vilas]

I am also facing same issue.

 

Please have a look on below url

 

 

 

Changed js files as suggested above, But no success.

 

Thanks

Edited August 26, 2013 by Vilas (see edit history)

[vekia]

but you haven't got enough pictures to display the scroll there

[Vilas]

Ya right. But if you check there is no space in between 2. I only want to gave a space between 2 thumbnails.

 

Thanks

[vekia]

remove width: 67.8px;

from: (product.css)

 

#thumbs_list li {
float: left;
height: 82px;
width: 67.8px;
cursor: pointer;
}

 

and define: display: block; width: 100%!important; for:

 

#thumbs_list ul#thumbs_list_frame {
list-style-type: none;
padding-left: 0;
display: block;
width: 100%!important;
}

[Vilas]

Thank you Vekia. Issue resolved.

[Vilas]

Thank you Vekia. Issue resolved.

 

Sorry its not yet resolved. Please have a look on below url.

 

http://www.letsbuyproducts.com/non-calling-tablets/115-asus-memo-pad.html

 

Image list in now appearing in one line.

 

Thanks

[vekia]

there is not enough space for additional picture. you need to increase width of parent element.

[Vilas]

How to do that but??? Sorry for troubling u.

[vekia]

change width param (increase its value) in:

#thumbs_list {
float: left;
overflow: hidden;
margin-left: 10px;
width: 1000px;
}

i used above width:1000px;

 

effect:

[Vilas]

Good morning,

 

Thank you vekia, uploading new product.js file solved the problem (see attached)

 

I am still not sure, how I managed to mess up the file

 

Paul

 

 

Dear Vekia,

 

What changes should be done to look like the Paulito query. Means his thumbnail type. Images with Left right arrow. in one line

Edited August 28, 2013 by Vilas (see edit history)

[vekia]

i don't know what you expect now, can you explain it a bit more?

thanks in advance

[Vilas]

Sorry for trouble. Please check #5 post of this thread. The attached image. I wish to do same like that.

[vekia]

no i'm totally lost, in other thread you wanted different view now you want also a bit different

you want scrollbar, or not?

[Vilas]

Dear Vekia,

 

I am extremely sorry for it. Please find image for your reference. Wish to do like this. No matter size of images in thumnail list. Only thing is that if 3-4 images are there then customer will get option to scroll images.

 

Thanks

 

[vekia]

you've got exactly the same problem as Paulito had.

can you try to reupload the product.js file?

 

btw. you removed some js scripts?

[Vilas]

Replaced product.js file which is located under js folder under theme.

 

But no sucess.

 

Thanks

Edited August 28, 2013 by Vilas (see edit history)

[renzogr]

Hello 

 

Can I ask you again about thumb images in line in products page ??

 

Please look page:  

http://lebrecho.com/vestidos-de-festa/2288-vestido-de-noiva-2870640076004.html..

 

Thanks

 

 

Edited June 18, 2016 by renzogr (see edit history)

[sonu9119]

if your problem doesn't solve here is the tag

width: 70px !important;

 

it will solve ur problem. 

 

70px is the width of the thumbnail

u can adjust the width and mark it important.. vola done..  u can ask me questions too.. I had done a good research in Presta n OC.