Template Fluorspar

[peejay]

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/...age-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