Template Fluorspar uses Photoswipe to display the large product image which requires all
images to be the same dimensions (the preference of most Zen Cart users). However I have found a
solution here
https://stackoverflow.com/questions/40515667/photoswipe-image-size-ratio
which may solve your problem. Open file :-
includes/templates/fluorspar/jscript/photoswipe_init.js
replace the code with this :-
( function( $ ) {
"use strict";
var $pswp = $('.pswp')[0];
var image = [];
$('.product-images-wrap').each( function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],
$height = $size[1];
var item = {
src : $href,
w: 0,
h: 0
}
items.push(item);
});
return items;
}
var items = getItems();
$.each(items, function(index, value) {
image[index] = new Image();
image[index].src = value['src'];
});
$pic.on('click', 'figure', function(event) {
event.preventDefault();
var $index = $(this).find('a').data('index');
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true,
captionEl : false,
fullscreenEl : true,
shareEl : false,
tapToClose : true,
tapToToggleControls : false,
closeOnScroll: false,
history:false,
closeOnVerticalDrag:false,
zoomEl: true,
counterEl: true,
arrowEl: true,
shareButtons: [
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
],
}
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.listen('gettingData', function(index, item) {
if (item.w < 1 || item.h < 1) { // unknown size
var img = new Image();
img.onload = function() { // will get size after load
item.w = this.width; // set image width
item.h = this.height; // set image height
lightBox.invalidateCurrItems(); // reinit Items
lightBox.updateSize(true); // reinit Items
}
img.src = item.src; // let's download image
}
});
lightBox.init();
});
});
$('.tabs-nav li a').click(function(ev){
ev.preventDefault();
var tab_id = $(this).attr('href');
$('.tabs-nav li a').removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
$(tab_id).addClass('active');
});
} )( jQuery );
Please let me know if this works.
https://zenofobe.com
