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.
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
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
Hello Emma,
In order to fix this bug, please take these steps:
- Open the “product_image_gallery.js” file located in the “js” directory of your CS-Cart installation.
- 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.
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
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
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