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年10月25日

    日本在来種の菜種の種子

    菜種=油菜=アブラナ=ナバナの品種には日本在来種と西洋種がある。 日本在来種にはエルシン酸が含まれるから食用には適さないという。 エルシン酸、エルカ酸が心臓疾患を引き起こすという。 そんな話が信じられるだろうか。昔ながらの菜種油はエルカ酸が多くても、問題は起きていなかったのに!飯能プランニングコンテストに応募しようと、「のらぼう油プロジェクト」を企画しています。 野口種苗研究所の野口さんの話に、のらぼうは昔油を取っていたこともあると聞いて思いついたのです。ところが!驚いたことに、「のらぼう油は…小島農園のらぼう菜は江戸時代から栽培されているようだが、そもそも西洋種ではないか。 &...
  • 2681年4月22日

    エゴノキが開花

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

    めじろと梅

    メジロがはしゃいでいた。 梅の花が好きらしい。 めじろと梅がよく似合う。
  • 2679年11月13日

    カクパゴダは墓地?

    インレー湖に突入する前に、タウンジの南方50kmの所にある、カク・パゴダ Kakku Pagodas に行く。 ここも小さな尖塔が林立する。 2000本以上あるらしいが、こういう形態の佛教建造物は多数という意味で、千本佛塔、千本パゴダと呼ぶべし。 Mahar Myat Mu Ni のように黄金ペンキで彩られていない。長銃を抱えた軍服人が何人もいて監視している。 夕方と翌早朝に歩いたのだが、風が吹けば鳴るという風鈴の音は一度も聞こえなかった。 周囲は巨木に囲まれていて、風は吹きにくいのではないか。 昼間なら風が強くなるかもしれない。周囲は巨木がよい木陰をつくっているが。 このカックーパゴダをカックー遺跡と日...
  • またまたこのサイトの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...

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴