Я использую галерею PhotoSwipe в своей теме Wordpress, и когда я открываю слайд-шоу, подписи к изображениям не появляются.
Я пытаюсь написать плагин для Wordpress, который должен решить эту проблему. Насколько я знаю (слава Богу, в Google Chrome есть функция Inspect Element !!!), div, который мне нужно изменить, выглядит следующим образом:
<div class="ps-caption-content"> </div>
Если я вставлю что-то еще, кроме тегов div в инспекторе Google Chrome, оно станет заголовком изображения.
Но я понятия не имею, как написать функцию jQuery или javaScript, чтобы изменить заголовок.
Я погуглил и нашел следующее предложение по настройке подписей к изображениям PhotoSwipe, но оно мне не помогло:
https://github.com/dimsemenov/PhotoSwipe/blob/master/src/examples/11-custom-captions.html
У кого-нибудь есть идея, как я могу отобразить/показать настоящие подписи к изображениям в слайд-шоу?
Я добавил, написал новый плагин для Wordpress, установил и активировал. Он содержит папку js с файлом .js с именем custom_photoswipe_image_titles.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},"");
jQuery(document).ready(function($) { $('div.ps-caption-content').html("blabla"); });
Он по-прежнему не работает. - person es1   schedule 05.06.2014