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 

 

の編集

を次のように変更した。

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

 

.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 タトパニ温泉の花蝶

 

  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...
  • Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。Pjax Blog | Unique ...

タグクラウド

WordPress カテゴリ人気記事 Views most

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

20171221

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 430
20171221