Question

有人可以帮助我，找到一种从Photoswipe WooCommerce图片库隐藏标题的方法吗？

Answer 1

以您主题的functions.php

// Configure WooCommerce built-in Photoswipe
add_filter( 'woocommerce_single_product_photoswipe_options', function( $options ) {
  // Disable caption element
  $options['captionEl'] = false;
  // Other options
  // $options['shareEl'] = true;
  // $options['counterEl'] = false;
  // $options['arrowEl'] = false;
  // $options['preloaderEl'] = true; // For browsers that do not support CSS animations
  // $options['closeOnScroll'] = false; // Already defaults to false
  // $options['clickToCloseNonZoomable'] = false;
  // $options['closeOnVerticalDrag'] = false;
  // $options['maxSpreadZoom'] = 1;
  // $options['hideAnimationDuration'] = 500;
  // $options['showAnimationDuration'] = 500;
  // $options['barsSize'] = array("top" => 0, "bottom" => "auto");
  return $options;
} );

不知道是否可以在此处配置getThumbBoundsFn，因为您必须从PHP传入Javascript函数才能进行此类处理...

但是这些选项作为全局Javascript对象wc_single_product_params写入页面。因此可以稍后（从Javascript）更新该对象：

wc_single_product_params.photoswipe_options.getThumbBoundsFn = function (index) {
  // find thumbnail element
  var thumbnail = document.querySelectorAll('.woocommerce-product-gallery__image img')[index];

  // get window scroll Y
  var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
  // optionally get horizontal scroll

  // get position of element relative to viewport
  var rect = thumbnail.getBoundingClientRect(); 

  // w = width
  return { x:rect.left, y:rect.top + pageYScroll, w:rect.width };
}

Answer 2

您是否尝试过将以下内容添加到CSS？

.pswp__caption {
    display: none;
}

如何从Photoswipe WooCommerce图片库中隐藏图片标题？

2 个答案: