1,432

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

WordPress

 

蝶 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()

 

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

下に隙間が空いている。

 

Open in fullscreen mode · Issue #851 · dimsemenov/PhotoSwipe
Is there a current/planed option for this? I'm actually using this: gallery = ... gallery.init() gallery.ui.getFullscreenAPI().enter() is this a good approach? Also i'm listening on fullscr...
GitHub
 
https://github.com/dimsemenov/PhotoSwipe/issues/851

 

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

 

Lightbox with PhotoSwipe
Integration of PhotoSwipe (http://photoswipe.com) for WordPress.
WordPress.org
 
https://wordpress.org/plugins/lightbox-photoswipe/

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

 

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

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

Firefox

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

アドレス欄に、

about:config

とする。

full-screen-api.warning

 

と検索して出てきた、

 

full-screen-api.warning.delay

full-screen-api.warning.timeout

 

の値を ０ に変更する。

 

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');
                }

 

画像のタイトルを数字からキャプションに自動的に変更する方法
スマホのギャラクシS8で写真を撮ると、ファイル名は撮影日時の数字の羅列になる。そのファイル名を自分で変更することは全くしていない。Wordpressで画像をアップロードすると、自動的にファイル名が画像のtitle属性として登録される。マウスポインターを画像の上に置くと、画像のタイトルがヒント表示されるが、数字の羅列だけだと面白くない。記事に写真を挿入する時に、キャプションは記入することが多いが、ALT やTITLE 欄にはほとんど記入していなかった。それで、ALTやTITLEが未入力の場合に、自動的にキャプションと同じになる...
信旅
 
https://makotoiwasaki.com/画像タイトル一括変更.html

 

 

Singa タトパニ温泉の花蝶

蝶 Singa,Nepal

 

  • 102
    2681年10月25日
    自給農

    日本在来種の菜種の種子

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

    エゴノキが開花

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

    めじろと梅

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

    Let’s Encrypt SSL証明書の期限切れ対策 certbot を使う

    またまたこのサイトの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...
    ... >> つづき
  • 220
    2679年9月3日
    WordPress

    Google Indexing API プラグイン WordPress by Rank Math

    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...
    ... >> つづき
  • 13
    2679年9月3日
    WordPress

    検索結果スニペット、抜粋 get_the_excerpt の設定

    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
    ... >> つづき
  • 11
    2679年8月29日
    WordPress

    WP_CRON を停止して Linux crontab で自動バックアップする方法

    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...
    ... >> つづき
  • 109
    2679年8月29日
    WordPress

    Nginx の Fcache が効いていない時に効かせる方法

    Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
    ... >> つづき

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴