PhotoSwipe の設定:タイルギャラリーでも有効にする方法 : 全画面 Lightbox

 

蝶 Singa,Nepal

これまでは 画像の表示に Colorbox Lightbox というプラグインを使用していた。

これは、タイルギャラリーの中の画像でも、その他の本文中の画像でも分け隔てなくLightbox 表示してくれていた。だが全画面表示ができない。

 

今回の全面改装時に全画面表示にできるものがないか探してみたら、PhotoSwipe があった。

これのWordpress プラグインはいくつかあるが、どれもJetpack のタイルギャラリーの画像はLightbox 表示されなかった。

Justified Gallery はタイルギャラリーの画像もPhotoSwipe 表示することができるが、Justified Galleryの独自のギャラリー外観に変わってしまう。タイルギャラリーではなくなっていしまう。

そこで、Lightbox with PhotoSwipe というプラグインをカスタマイズし、タイルギャラリーの画像もPhotoSwipe 表示させることに成功した。

 

Lightbox with PhotoSwipe プラグインは、オリジナル画像へのリンク先のタグの中に

 

data-width="2048" data-height="1536"

というタグを自動的に挿入しているのだが、それが、Jetpackのタイルギャラリーの画像リンクまでには及んでいなかった。

Jetpackのタイルギャラリーのスクリプトをいじって、挿入すると、表示されるようになった。

編集するファイルは、

/DocumentRoot/wp-content/plugins/jetpack/modules/tiled-gallery/tiled-gallery/templates/partials/item.php

だけ。

 

# diff item.php.org item.php
11c11
< <a href="<?php echo $item->link; ?>" border="0" itemprop="url">
---
> <a href="<?php echo $item->link; ?>" data-width="<?php echo esc_attr( $item->meta_width() ); ?>" data-height="<?php echo esc_attr( $item->meta_height() ); ?>">
33c33
< <a href="<?php echo $item->link; ?>" border="0" itemprop="url">
---
> <a href="<?php echo $item->link; ?>" data-width="<?php echo esc_attr( $item->meta_width() ); ?>" data-height="<?php echo esc_attr( $item->meta_height() ); ?>">
56c56
< <div class="tiled-gallery-caption" itemprop="caption description">
---
> <div class="tiled-gallery-caption wp-caption-text" itemprop="caption description">

 

border="0" itemprop="url"

data-width="<?php echo esc_attr( $item->meta_width() ); ?>" data-height="<?php echo esc_attr( $item->meta_height() ); ?>"

に変えるだけ。

 

これでタイルギャラリーの中の画像もPhotoSwipe 表示されるようになった。

Jetpackプラグインのアップデートの時には気をつけねばならぬ。

タイルギャラリーのキャプションが表示されないから

タイルギャラリーの画像をクリックするとオリジナル画像が表示されるが、そのキャプションが表示されなかったので、

class="tiled-gallery-caption"

に wp-caption-text

を追加すると表示されるようになった。

 

シェアボタンが表示されないから

シェアボタンが表示されなかった。

デフォルトで表示されるはずなのだが。

 

設定を弄る必要はなく、次のファイルを編集する。

/wp-content/plugins/lightbox-photoswipe/lightbox-photoswipe.php

function footer のところに赤字の部分を追加する。

 function footer() {
 echo '<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 <div class="pswp__bg"></div>
 <div class="pswp__scroll-wrap">
 <div class="pswp__container">
 <div class="pswp__item"></div>
 <div class="pswp__item"></div>
 <div class="pswp__item"></div>
 </div>
 <div class="pswp__ui pswp__ui--hidden">
 <div class="pswp__top-bar">
 <div class="pswp__counter"></div>
 <button class="pswp__button pswp__button--close" title="'.__('Close (Esc)', 'lightbox-photoswipe').'"></button>
 <button class="pswp__button pswp__button--share" title="Share"></button>
 <button class="pswp__button pswp__button--fs" title="'.__('Toggle fullscreen', 'lightbox-photoswipe').'"></button>
 <button class="pswp__button pswp__button--zoom" title="'.__('Zoom in/out', 'lightbox-photoswipe').'"></button>
 <div class="pswp__preloader">
 <div class="pswp__preloader__icn">
 <div class="pswp__preloader__cut">
 <div class="pswp__preloader__donut"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
 <div class="pswp__share-tooltip"></div> 
 </div>
 <button class="pswp__button pswp__button--arrow--left" title="'.__('Previous (arrow left)', 'lightbox-photoswipe').'">
 </button>
 <button class="pswp__button pswp__button--arrow--right" title="'.__('Next (arrow right)', 'lightbox-photoswipe').'">
 </button>
 <div class="pswp__caption">
 <div class="pswp__caption__center"></div>
 </div>
 </div>
 </div>
</div>';
 }

 

プラグイン編集から編集可能。ファイルのパーミッションを666にしておかないと書き込めない。。

 

上下画面いっぱいに表示する

標準では上下に44ピクセルの枠ができて、画像がブラウザーの画面いっぱいに表示されない。

lightbox-photoswipe/lib/photoswipe-ui-default.js

の設定を変更する。

nano lightbox-photoswipe/lib/photoswipe-ui-default.js

 

42行目を

barsSize: {top:0, bottom:0},

に変更する。

 

実際に起動しているのは、photoswipe-ui-default.js ではなく、photoswipe-ui-default.min.js なので、photoswipe-ui-default.min.js の同じ文字列を探して変更する。

 

nano lightbox-photoswipe/lib/photoswipe-ui-default.min.js 

 

CSSの編集

CSSを次のように変更した。

コントロールバーの幅を最小限にした。

 

.pswp__top-bar {
    position: absolute;
    right: 0!important;
	  left:auto;
	  top: 0;
    width: 260px;
    height: 35px;
}

.pswp__caption__center {
text-align: left;
    max-width: max-content;
    margin: 0 auto;
    font-size: 1.2em;
    padding: 10px;
    line-height: 1.2em;
    color: #f7f7f7;
    width: 100%;
    width: max-content;
}
.pswp__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 0;
    margin: 0 auto;
    width: 100%;
    width: max-content;
}

 

最初から全画面で画像を表示するには?

右上のコントロールバーをクリックすれば全画面フルスクリーンになる。

これをしなくても画像をクリックすれば最初から全画面で表示されるようにしたいが、今の所うまくいかない。

 

lightbox-photoswipe/js/photoswipe.js

 

の132行目に、

 gallery.init();
 gallery.ui.getFullscreenAPI().enter()

 

と追記すると、全画面状態にはなるが、画像は全画面にはならない。

下に隙間が空いている。

 

 

最初に全画面にした後に、Photoswipe を起動するようにすればよいのだが、今のところどうすればいいのかわからない。

 

全画面表示になった時の警告を消す方法

 

全画面表示になると必ずブラウザから警告が発せられる。

これを消すにはどうしたらよいか。

Firefox

「現在全画面表示モードです。とういう警告が3秒間表示されて消える。

アドレス欄に、

about:config

とする。

full-screen-api.warning

 

と検索して出てきた、

 

full-screen-api.warning.delay

full-screen-api.warning.timeout

 

の値を 0 に変更する。

 

Photoswipe の拡大画像のキャプションに title が挿入されないようにする

画像のキャプションを付けていない時に、画像のtitleに記事のタイトルを挿入していると、記事のタイトルがキャプションとして表示されるのを停止する。

 

lightbox-photoswipe/js/frontend.min.js

を次のように編集する。

 

jQuery(function(w){var d=window.PhotoSwipe,b=window.PhotoSwipeUI_Default;w("body").on("click","a[data-width]:has(img)",function(t){d&&b&&(t.preventDefault(),o(!1,this,!1))});var o=function(t,o,e){var i,n,s,l,a,p,r,c,h=w(".pswp").get(0);a=o,r=w("body").find("a[data-width]:has(img)"),c=[],r.each(function(t){var o=w(this);caption=o.attr("data-caption"),null==caption&&(describedby=o.children().first().attr("aria-describedby"),null!=describedby?(description=w("#"+describedby),null!=description&&(caption=description.text())):(describedby=o.children().first().attr("figcaption"),null!=describedby&&(caption=o.next().text()))),null==caption&&(o.next().is(".wp-caption-text")?caption=o.next().text():o.parent().next().is(".wp-caption-text")?caption=o.parent().next().text():o.parent().next().is(".gallery-caption")?caption=o.parent().next().text():o.next().is("figcaption")&&(caption=o.next().text())),c.push({src:o.attr("href"),w:o.attr("data-width"),h:o.attr("data-height"),title:caption,getThumbBoundsFn:!1,showHideOpacity:!0,el:o}),a===o.get(0)&&(p=t)}),s=[c,parseInt(p,10)],l=0==t?s[1]:t,s=s[0],n={index:l,getThumbBoundsFn:!1,showHideOpacity:!0,loop:!0},"1"==lbwps_options.share_facebook||"1"==lbwps_options.share_twitter||"1"==lbwps_options.share_pinterest||"1"==lbwps_options.share_download?(n.shareEl=!0,n.shareButtons=[],"1"==lbwps_options.share_facebook&&n.shareButtons.push({id:"facebook",label:lbwps_options.label_facebook,url:"https://www.facebook.com/sharer/sharer.php?u={{url}}"}),"1"==lbwps_options.share_twitter&&n.shareButtons.push({id:"twitter",label:lbwps_options.label_twitter,url:"https://twitter.com/intent/tweet?text={{text}}&url={{url}}"}),"1"==lbwps_options.share_pinterest&&n.shareButtons.push({id:"pinterest",label:lbwps_options.label_pinterest,url:"http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}"}),"1"==lbwps_options.share_download&&n.shareButtons.push({id:"download",label:lbwps_options.label_download,url:"{{raw_image_url}}",download:!0})):n.shareEl=!1,"1"==lbwps_options.close_on_scroll&&(n.closeOnScroll=!1),"1"==lbwps_options.close_on_drag&&(n.closeOnVerticalDrag=!1),"1"==lbwps_options.history?n.history=!0:n.history=!1,"1"==lbwps_options.show_counter?n.counterEl=!0:n.counterEl=!1,"1"==lbwps_options.show_fullscreen?n.fullscreenEl=!0:n.fullscreenEl=!1,"1"==lbwps_options.show_zoom?n.zoomEl=!0:n.zoomEl=!1,"1"==lbwps_options.show_caption?n.captionEl=!0:n.captionEl=!1,"1"==lbwps_options.loop?n.loop=!0:n.loop=!1,"1"==lbwps_options.pinchtoclose?n.pinchToClose=!0:n.pinchToClose=!1,n.spacing=lbwps_options.spacing/100,1==e&&(n.index=parseInt(l,10)-1),(i=new d(h,b,s,n)).listen("gettingData",function(t,o){if(o.w<1||o.h<1){var e=new Image;e.onload=function(){o.w=this.width,o.h=this.height,i.updateSize(!0)},e.src=o.src}}),i.init()},t=function(){var t=window.location.hash.substring(1),o={};if(t.length<5)return o;for(var e=t.split("&"),i=0;i<e.length;i++)if(e[i]){var n=e[i].split("=");n.length<2||(o[n[0]]=n[1])}return o.gid&&(o.gid=parseInt(o.gid,10)),o}();t.pid&&t.gid&&o(t.pid,null,!0)});

 

lightbox-photoswipe/js/frontend.js

のこの部分を削除するだけ。そしてminify する。

else {
                    caption = $el.attr('title');
                }

 

 

 

Singa タトパニ温泉の花蝶

 

  • 2681年4月22日

    エゴノキが開花

    エゴノキの花が咲き始めた。蕾がふくらんでる。4月22日。 蜂も来ていた。わが家の要木、シンボルツリー。 夏には大きな木陰を作ってくれる。冬には葉が落ちる。 この鏡に野鳥が集まってくる。 最近はシジュウカラとキツツキ(アカゲラ)がよく来る。鏡に写る自分の姿に突いたりしてはしゃぐ。 冬はヤマガラが来る。ヤマガラはエゴノキの実が好物。
  • 2681年2月21日

    めじろと梅

    メジロがはしゃいでいた。 梅の花が好きらしい。 めじろと梅がよく似合う。
  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り: ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
  • 目次1 HTTPD アクセスログの日本語化2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apa...

WordPress カテゴリ人気記事 Views most

WordPress・花 カテゴリ人気記事 月間

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理