如何在 Wordpress 的 Photoswipe 中取消隐藏图像标题

Question

我在我的 Wordpress 主题中使用 PhotoSwipe 图库，当我打开幻灯片时，没有出现图像标题。

我正在尝试为 Wordpress 编写一个插件来解决这个问题。据我所知（感谢上帝有 Google Chrome 的 Inspect Element 功能！！！）我需要更改的 div 如下：

<div class="ps-caption-content">&nbsp;</div>

如果我在 Google Chrome 的 Inspector 中的 div 标签之间插入除 ' 之外的其他内容，它就会成为图像的标题。

但我不知道如何编写 jQuery 或 javaScript 函数来更改标题。

我在谷歌上搜索并找到了以下关于自定义 PhotoSwipe 图片标题的建议，但它对我不起作用：

https://github.com/dimsemenov/PhotoSwipe/blob/master/src/examples/11-custom-captions.html

有人知道如何在幻灯片中取消隐藏/显示图像的真实标题吗？

我添加了为 Wordpress 编写的新插件并安装并激活。它包含一个 js 文件夹，其中包含名为 custom_photoswipe_image_titles.js 的 .js 文件。

在我的插件中，我有以下 php 代码：

<?php
/*
Plugin Name: wpCasa Image Titles
Plugin URI: 
Description:  Adds titles above the listing gallery images
Version: 1.0.0
Author: Elshan Siradjov
Author URI: http://www.w3schools.com/
License: 
*/


/**
 * Load javascript and css Files
 *
 */



function image_titles_add_to_doc_head()
{
    wp_enqueue_style('photoswipe-style', 'http://www.siradjov.anex.at/playground/wp-content/themes/wpcasa/lib/assets/js/photoswipe/photoswipe.css');

    wp_register_script( 'klassmin', 'http://siradjov.anex.at/playground/wp-content/themes/wpcasa/lib/assets/js/photoswipe/klass.min.js' );
        wp_enqueue_script( 'klassmin' );

    wp_register_script( 'code_photoswipe', 'http://siradjov.anex.at/playground/wp-content/themes/wpcasa/lib/assets/js/photoswipe/code.photoswipe-3.0.5.min.js' );
        wp_enqueue_script( 'code_photoswipe' );



    wp_register_script( 'custom_js_photoswipe_image_titles', 'http://siradjov.anex.at/playground/wp-content/plugins/wpcasa-image-titles/js/custom_photoswipe_image_titles.js' );
        wp_enqueue_script( 'custom_js_photoswipe_image_titles' );
}

add_action( 'wp_enqueue_scripts', 'image_titles_add_to_doc_head' );

在 custom_photoswipe_image_titles.js 文件中，我尝试了以下 jquery 代码来更改图像标题：

$('div.ps-caption-content').html('Test Caption');

但它没有用。标题仍为空。

我还尝试将 jQuery 代码嵌入到文档就绪函数中，如下所示：

jQuery(document).ready(function($)   
{   
    $('div.ps-caption-content').html("blabla");    
});

它也没有用。

@vico：我在code.photoswipe-3.0.5.min.js里面发现了一段代码：

(function(e,c,a){

 a.registerNamespace("Code.PhotoSwipe.Toolbar");
 var b=e.Code.PhotoSwipe;

 b.Toolbar.CssClasses={
      toolbar:"ps-toolbar",
      toolbarContent:"ps-toolbar-content",
      toolbarTop:"ps-toolbar-top",
      caption:"ps-caption",
      captionBottom:"ps-caption-bottom",
      captionContent:"ps-caption-content",   // This is where ps-caption-content is set!
      close:"ps-toolbar-close",
      play:"ps-toolbar-play",
      previous:"ps-toolbar-previous",
      previousDisabled:"ps-toolbar-previous-disabled",
      next:"ps-toolbar-next",
      nextDisabled:"ps-toolbar-next-disabled"};
  .....
  ......

我还在 code.photoswipe-3.0.5.min.js 中找到了这段代码：

initialize:function(d,c){
var g;
this.settings=c;
this.cache=d;
this.isVisible=!1;
this.fadeOutHandler=this.onFadeOut.bind(this);
this.touchStartHandler=this.onTouchStart.bind(this);
this.touchMoveHandler=this.onTouchMove.bind(this);
this.clickHandler=this.onClick.bind(this);
g=b.Toolbar.CssClasses.toolbar;
this.settings.captionAndToolbarFlipPosition&&(g=g+" "+b.Toolbar.CssClasses.toolbarTop);
this.toolbarEl=a.DOM.createElement("div",{"class":g},this.settings.getToolbar());

a.DOM.setStyle(this.toolbarEl,{left:0,position:"absolute",overflow:"hidden",zIndex:this.settings.zIndex});
this.settings.target===e?a.DOM.appendToBody(this.toolbarEl):a.DOM.appendChild(this.toolbarEl,this.settings.target);

a.DOM.hide(this.toolbarEl);
this.closeEl=a.DOM.find("."+b.Toolbar.CssClasses.close,this.toolbarEl)[0];
this.settings.preventHide&&!a.isNothing(this.closeEl)&&a.DOM.hide(this.closeEl);
this.playEl=a.DOM.find("."+b.Toolbar.CssClasses.play,this.toolbarEl)[0];
this.settings.preventSlideshow&&!a.isNothing(this.playEl)&&a.DOM.hide(this.playEl);
this.nextEl=a.DOM.find("."+b.Toolbar.CssClasses.next,this.toolbarEl)[0];
this.previousEl=a.DOM.find("."+b.Toolbar.CssClasses.previous,this.toolbarEl)[0];
g=b.Toolbar.CssClasses.caption;this.settings.captionAndToolbarFlipPosition&&(g=g+" "+b.Toolbar.CssClasses.captionBottom);
this.captionEl=a.DOM.createElement("div",{"class":g},"");
a.DOM.setStyle(this.captionEl,{left:0,position:"absolute",overflow:"hidden",zIndex:this.settings.zIndex});
this.settings.target===e?a.DOM.appendToBody(this.captionEl):a.DOM.appendChild(this.captionEl,this.settings.target);
a.DOM.hide(this.captionEl);

this.captionContentEl=a.DOM.createElement("div",{"class":b.Toolbar.CssClasses.captionContent},"");    // This where captionContent is being set!!!

a.DOM.appendChild(this.captionContentEl,this.captionEl);
this.addEventHandlers()},

在上面的函数中，以下行似乎正在设置 ps-caption-content 的值：

this.captionContentEl=a.DOM.createElement("div",{"class":b.Toolbar.CssClasses.captionContent},"");

Answer 1

这不是改变它的地方。

这里是输出 DIV 的实际代码

 this.captionContentEl = a.DOM.createElement("div", {
                "class": b.Toolbar.CssClasses.captionContent
            }, "");

这里是你的源代码的小提琴扩展

http://siradjov.anex.at/playground/wp-content/themes/wpcasa/lib/assets/js/photoswipe/code.photoswipe-3.0.5.min.js

http://jsfiddle.net/SjZWy/

现在你只需要找出代码中产生实际标题的位置，然后将标题 var 字符串粘贴到该 div 中，你的东西就可以工作了。