Product Thumbnails Overlapping

Store Builder Questions
1

http://www.jayhawkoptics.com/vortex-crossfire-3.5-10x50mm-riflescope.html



The thumbnails are overlapping text in IE and Chrome.



Any thoughts as to why this started with the only change is the upgrade of the latest cart version.

2

Hello Jayhawk,



It seems to be a minor bug in standard CS-Cart. We have posted the problem description to our Bug Tracker. Our engineers will consider it at the first opportunity. You can subscribe to updates here: http://forum.cs-cart.com/tracker/issue-2613-mini-thumbnails-are-not-displayed-properly/.



—

Pavel Zyukin

CS-Cart Support team

3

Hi



I am also having this problem - screen shot attached. I see that the bug report status is now fixed - could you please let me know what the fix is (I am using the MV edition).



Thank you



Emma

4

Hello Emma,



In order to fix this bug, please take these steps:


  1. Open the “product_image_gallery.js” file located in the “js” directory of your CS-Cart installation.
  2. Replace this part of the code:


// Check elm clicking
var in_elm = jelm.parents('li');
if (in_elm.length == 0) {


with this one:


// Check elm clicking
var in_elm = jelm.parents('li');
if (in_elm.length == 0 && !jelm.is('img')) {


3) Save the file.

4) Open the “styles.base.css” file located in the “skins/[CUSTOMER_ACTIVE_SKIN]/customer” directory of your CS-Cart installation, where [CUSTOMER_ACTIVE_SKIN] is an active skin of your storefront.

5) Replace this part of the code:


#product_thumbnails {
white-space: nowrap;
text-align: center;
}


with this one:


#product_thumbnails {
text-align: center;
}


6) Save the file.



Please make these changes and let us know the result.



Thank you.





—

Anastasiya Kozlova

CS-Cart Support Team.

5

Dear Anastasiya



Thank you for your quick response. I tried going into the product_image_gallery.js file but could not locate the quoted code. Below is a copy of the file - do I need to add in this line of code? If so please advise where I should add it.


// $Id: product_image_gallery.js 12707 2011-06-20 09:05:39Z alexions $

(function($) {
$.ceProductImageGallery = function() {
var VISIBLE_THUMBNAILS = 3;
var pth = $('#product_thumbnails');
var th_len = $('li', pth).length;

if (th_len > VISIBLE_THUMBNAILS) {
var i_width = $('.cm-thumbnails-mini', pth).outerWidth(true);
var c_width = i_width * VISIBLE_THUMBNAILS;
var i_height = $('.cm-thumbnails-mini', pth).outerHeight(true);

pth.jcarousel({
scroll: 1,
wrap: 'circular',
animation: 'fast',
initCallback: $.ceScrollerMethods.fn_scroller_init_callback,
// Obsolete code for new jCaroucel
/*itemVisibleOutCallback: {
onAfterAnimation: $.ceScrollerMethods.fn_scroller_next_callback,
onBeforeAnimation: $.ceScrollerMethods.fn_scroller_prev_callback
},*/
itemFallbackDimension: i_width,
item_width: i_width,
item_height: i_height,
clip_width: c_width,
clip_height: i_height,
buttonNextHTML: '

',
buttonPrevHTML: '
',
buttonNextEvent: 'click',
buttonPrevEvent: 'click',
size: th_len
});
$('.jcarousel-skin').css({
'width': c_width + $('.jcarousel-prev-horizontal').outerWidth(true) * 2 + 'px'
});
}

pth.click(function(e) {
var jelm = $(e.target);
var pjelm;

if (jelm.hasClass('cm-thumbnails-mini') || (pjelm = jelm.parents('a:first.cm-thumbnails-mini'))) {
jelm = (pjelm && pjelm.length) ? pjelm : jelm;

$('a[rev="preview[product_images]"]').each(function() {
var id = $(this).attr('id');
var c_id = jelm.attr('id').str_replace('_mini', '');

if (id == c_id) {
$('.cm-thumbnails-mini', pth).removeClass('cm-cur-item');
jelm.addClass('cm-cur-item');
$(this).show();
$('#box_' + id).show();
} else {
$(this).hide();
$('#box_' + id).hide();
}
});
}
});

pth.show();
}
})(jQuery)



I have made the amendment the styles.base.css file.



Kind regards



Emma

6

Dear Emma,



Please add the following part of the code:


// Check elm clicking
var in_elm = jelm.parents('li');
if (in_elm.length == 0 && !jelm.is('img')) {
return false;
}




below this part of the code:



pth.click(function(e) {
var jelm = $(e.target);
var pjelm;




to the “product_image_gallery.js” file located in the “js” directory of your CS-Cart installation.



—

Anastasiya Kozlova

CS-Cart Support Team

7

Hi again



I added in the code (as below) but unfortunately the problem is still there, even with clearing the cache.


// $Id: product_image_gallery.js 12707 2011-06-20 09:05:39Z alexions $

(function($) {
$.ceProductImageGallery = function() {
var VISIBLE_THUMBNAILS = 3;
var pth = $('#product_thumbnails');
var th_len = $('li', pth).length;

if (th_len > VISIBLE_THUMBNAILS) {
var i_width = $('.cm-thumbnails-mini', pth).outerWidth(true);
var c_width = i_width * VISIBLE_THUMBNAILS;
var i_height = $('.cm-thumbnails-mini', pth).outerHeight(true);

pth.jcarousel({
scroll: 1,
wrap: 'circular',
animation: 'fast',
initCallback: $.ceScrollerMethods.fn_scroller_init_callback,
// Obsolete code for new jCaroucel
/*itemVisibleOutCallback: {
onAfterAnimation: $.ceScrollerMethods.fn_scroller_next_callback,
onBeforeAnimation: $.ceScrollerMethods.fn_scroller_prev_callback
},*/
itemFallbackDimension: i_width,
item_width: i_width,
item_height: i_height,
clip_width: c_width,
clip_height: i_height,
buttonNextHTML: '

',
buttonPrevHTML: '
',
buttonNextEvent: 'click',
buttonPrevEvent: 'click',
size: th_len
});
$('.jcarousel-skin').css({
'width': c_width + $('.jcarousel-prev-horizontal').outerWidth(true) * 2 + 'px'
});
}

pth.click(function(e) {
var jelm = $(e.target);
var pjelm;
// Check elm clicking
var in_elm = jelm.parents('li');
if (in_elm.length == 0 && !jelm.is('img')) {
return false;
}


if (jelm.hasClass('cm-thumbnails-mini') || (pjelm = jelm.parents('a:first.cm-thumbnails-mini'))) {
jelm = (pjelm && pjelm.length) ? pjelm : jelm;

$('a[rev="preview[product_images]"]').each(function() {
var id = $(this).attr('id');
var c_id = jelm.attr('id').str_replace('_mini', '');

if (id == c_id) {
$('.cm-thumbnails-mini', pth).removeClass('cm-cur-item');
jelm.addClass('cm-cur-item');
$(this).show();
$('#box_' + id).show();
} else {
$(this).hide();
$('#box_' + id).hide();
}
});
}
});

pth.show();
}
})(jQuery)



Is there anything else I can try?



Thanks



Emma