wordpress - 如何从 Photoswipe WooCommerce 图片库隐藏图像标题？

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 };
}