Tumblrイラストフォリオ4カスタマイズ【無限スクロール・サムネ表示・LightBox適応方法】
この度知り合いのイラストレーターがTumblrでポートフォリオサイトを作ったので、JavaScriptの勉強がてら、何か追加でほしい機能がないか聞いたところ、
- 無限スクロールを導入したい(イラストフォリオ3にはあるが、4にはない)
- 無限スクロールで表示された画像にはふわっとしたアニメーションをつけたい
- イラストは画像クリックで画面に表示され、クリックで閉じるようにしてほしい(ライトボックス機能のこと)
と要望が返ってきました。
そこで、「無限スクロール導入済みのイラストフォリオ3でよいのでは?」と提案したんですが、「画像を均等に並べたい」とのことで、CSSをいじってなんとかしようと思ったものの、やはりJavaScriptでなんとかしたほうが良いと途中で方向転換し、イラストフォリオ4をベースにカスタマイズすることにしました。
ちょっとややこしいですがほぼコピペでできるので、もし同じような機能がほしくて悩まれている方がいれば参考にしていただけるかと思います。
- カスタマイズでできるようになること
- カスタマイズの事前準備
- Tumblrで編集する場所と画面の説明
- Jsスクリプトについて
- ステップ1CDNの導入
- ステップ2 LIGHTBOXの導入
- ステップ3 InfiniteScroll・Masonry・imageLoadedの導入
- サムネイル生成のプログラム※11/3修正
- さいごにプログラム部分のコード全部載せる
カスタマイズでできるようになること
サンプルサイト参照→サンプルサイト
イラストフォリオ4の機能に、無限スクロールとLightBoxを追加した感じです。
画像の投稿が必須です。
テキストだけや、その他の投稿では使えません。
シングルカラムモードでは使えません。
投稿は、Tumblrベータ版(サムネイル生成がしなくなった版)でもサムネイルが表示されるようになっています。
そのため、Crop Thumbnailsをオンにしてお使いください。
また、本文に記入したテキストがLightBoxの表示の際に表示されるようになっていますが、<p></p>
タグに囲まれていないと機能しません。(普通に投稿すればつくので、問題ないと思います)
本文が2行以上の場合は一行目のみキャプションに反映します。
キャプションがついている投稿の場合は両方表示されます。
Thumbnails SizeはMサイズを推奨します。その他のサイズでは動作確認していません。他のサイズが良い方は、導入後、CSSで調整してみてください。
カスタマイズの事前準備
おそらくこれからカスタマイズされる方は、皆さんTumblrをお使いだと思うので、登録作業の説明は省かせていただきます。
イラストフォリオ4のテーマをインストールされていない方は、まずTumblrにインストールしてください。
テーマ「イラストフォリオ4」をTumblrにイントール
イラストフォリオ4を適応していない方はまずインストールしましょう。
- 無限スクロール
- LightBox
- サムネ作る
の順にやっていきましょう。
と、いいつつ、まとめてできるところはまとめてやっちゃいます。
Tumblrで編集する場所と画面の説明
編集する場所は、HTML、CSS、Tumblr側の設定。 あとファイルアップロードも必要です。
編集画面に入るには、
右上の人間マークをクリック、ウィンドウ下の方の「外観を編集」クリック。
「テーマの編集」クリック
で、編集画面に入れます。
ここからHTMLの編集をする場合は、
「HTMLを編集」をクリック
で編集画面に入れます。
CSSの編集をする場合は、同じ画面の一番下にある「詳細設定」をクリック
カスタムCSSを追加
に追加します。
また、ファイルアップロードの際は、「HTMLを編集」をクリック後、表示された画面の左上にある歯車マークをクリックし、「テーマアセット」クリックで「ファイルを追加」から追加可能です。
Jsスクリプトについて
- 無限スクロール
- LightBox
に関しては便利なスクリプトがあるので、それをCDNやらアップロードやらで読み込み実行しています。
これから説明していきます。
今回利用した便利なスクリプト一覧
- 無限スクロール … InfiniteScroll
- 画像レイアウト … Masonry
- 画像表示関連 … imagesLoaded
- LightBox … LightBox2
サムネイルの表示に関しては、イラストフォリオ4のベーススクリプトではInfiniteScrollで画像を読み込みした際に、サムネイルが生成できない為、新たに作り直しました。(再発火できると思ったができず…イラストフォリオ4が悪いのではなく、完全に私の力不足です)
既存のJavaScriptと作り直したJavaScriptが両方動いているとエラーになるので、もとのスクリプトは消しています。
そのため、画像投稿以外の投稿をされる方には今回のカスタマイズは向きません。(エラーになります)
ステップ1CDNの導入
まず以下のCDNを読み込みます。
挿入場所は</body>
直前に。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <!--lightboxのjsアドレス要変更--> <script src="アップロードしたあとアドレスをコピー&ペースト"></script>
上から順に、jQuery、InfiniteScroll、Masonry、imageLoadedのCDNです。
LightBoxのみ、ダウンロード後アップロードして使用します。
アップロードしたあとアドレスをコピー&ペースト
の部分にはあとでアドレスをコピペします。
ステップ2 LIGHTBOXの導入
少し大変ですが、元々Tumblrで使われているLightBoxでは対応できなかったので、LightBoxの公式サイトからファイルをダウンロードしてきます。
ダウンロード後、ファイルをTumblrサイトにアップロードし、アドレスをコピーして使います。
CSSファイルは編集するので、編集してからアップロードします。
ステップ2-1 ファイルのダウンロード・解凍・選別
はじめにLIGHTBOXのファイルをダウンロードします。
以下公式サイトリンクよりzipファイルをダウンロードしてください。
公式サイト
LIGHTBOX
ダウンロードは公式サイトの少し下にスクロールしたところにある「GETTING STARTED」から「Github Releases page」をクリックし、Githubのページを開いてから、
zipファイルをクリックし、PCに保存してください。
保存したzipファイルをクリックして解凍します。
解凍したフォルダをクリックし、たくさんあるファイルの中から「src」という名前のフォルダを開きます。
このフォルダ以外は必要ないので消してしまっても構いません。
srcフォルダの中身は、
- css
- images
- js
の3フォルダ。
さらにその中に、それぞれlightbox.css
、lightbox.js
と、画像ファイルが4つ入っています。
ステップ2-2 ファイルのアップロード
それではTumblr側で、各ファイル(css以外)をアップロードしていきます。
テーマの編集
-HTMLを編集
-歯車マーク
-テーマアセット
と進み、ファイルを追加
から、lightbox.js
と、画像ファイル4つをアップロードします。
アップロード後、ファイル名をクリックして、アドレスをコピーしておきます。(クリックするとブラウザでアップロードしたファイルが開くので、コピーする)
もしくは右クリック
-リンクのアドレスをコピー
でも可。
コピーしたアドレスは、一旦メモ帳などに貼り付けておくと便利です。
ステップ2-3 lightbox.cssの編集とアップロード
次に、lightbox.css
を適当なテキストエディタで開き、画像ファイルのパス(アドレス)を変更します。
background: url()
のカッコ内を、コピーしたアドレスにそれぞれ置き換えます。
76行目
../images/loading.gif
をコピーしたアドレスhttps://static.tumblr.com/〜/〜/loading.gif
に変更
107行目
../images/prev.png
をコピーしたアドレスhttps://static.tumblr.com/〜/〜/prev.png
に変更
125行目
../images/next.png
をコピーしたアドレスhttps://static.tumblr.com/〜/〜/next.png
に変更
189行目
../images/close.png
をコピーしたアドレスhttps://static.tumblr.com/〜/〜/close.png
に変更
全て書き換えたら保存し、再びTumblr上でファイルをアップロードします。
アップロードし終えたら、lightbox.css
のurlもコピーしておきます。
ステップ2-4 HTMLの編集
次に、Tumblr上でHTMLを編集します。
編集内容は、
です。
head内に外部スタイルシート挿入
まずは<head></head>
内に
<link rel="stylesheet" href="コピーしたアドレス">
を挿入します。
コピーしたアドレス
には、先ほどアップロードしたlightbox.css
のアドレスを入れてください。
挿入箇所は、以下のように、元々入っているstyle.css
の下あたりに入れてください。54行目あたりにあると思います。
・・・ <!--もともとあるスタイルシート--> <link rel="stylesheet" type="text/css" media="screen" href="https://static.tumblr.com/〜/〜/style.css" /> <!--以下lightbox.css挿入--> <link rel="stylesheet" href="コピーしたアドレス"> ・・・
scriptのアドレス挿入
次に、ステップ1CDNの導入でいれた、
<!--lightboxのjsアドレス要変更--> <script src="アップロードしたあとアドレスをコピー&ペースト"></script>
のアップロードしたあとアドレスをコピー&ペースト
部分に、lightbox.js
のアドレスをいれます。
リンクタグ編集
最後にリンタグを変更します。
204行目あたりにある、{block:ifNotSingleColumnMode}
以下を編集していきます。これはシングルカラムでなければ、という意味です。そのため、シングルカラムモードでは機能しません。
少し下、210行目あたりに{block:Posts}
というTumblr独自タグがあります。
「ここから投稿記事が表示される部分ですよ〜〜」というタグです。
この下の215行目あたりにある、{block:Text}
直下の<a href="{Permalink}" class="post-content-anchor">
タグを、<a href="{Permalink}" class="post-content-anchor" data-lightbox="thumbnailImg" data-title="">
に書き換えます。
書き換え前
{block:Text} <a href="{Permalink}" class="post-content-anchor"> <div class="post-content-wrapper"> <div class="post-content-posttype"> {PostType} </div> {block:Title} <div class="index-post-content index-post-title">{Title}</div> {/block:Title} </div> </a> <div class="index-post-content-text-body">{Body}</div> {/block:Text}
書き換え後
{block:Text} <a href="{Permalink}" class="post-content-anchor" data-lightbox="thumbnailImg" data-title=""> <div class="post-content-wrapper"> <div class="post-content-posttype"> {PostType} </div> {block:Title} <div class="index-post-content index-post-title">{Title}</div> {/block:Title} </div> </a> <div class="index-post-content-text-body">{Body}</div> {/block:Text}
次に、そのすぐ下の230行目あたりにある{block:Photo}
と、242行目あたりにある{block:Photoset}
内を変更します。
どちらも<a href="{Permalink}">
を<a href="{PhotoURL-HighRes}" data-lightbox="thumbnailImg" data-title="{Caption}">
に書き換えます。
書き換え前
{block:Photo} <a href="{Permalink}"> {block:IfCropThumbnails} <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div> {/block:IfCropThumbnails} {block:IfNotCropThumbnails} <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img"> {/block:IfNotCropThumbnails} </a> {/block:Photo} {block:Photoset} {block:Photos} <a href="{Permalink}"> {block:IfCropThumbnails} <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div> {/block:IfCropThumbnails} {block:IfNotCropThumbnails} <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img"> {/block:IfNotCropThumbnails} </a> {/block:Photos} {/block:Photoset}
書き換え後
{block:Photo} <!--lightboxのリンク--> <a href="{PhotoURL-HighRes}" data-lightbox="thumbnailImg" data-title="{Caption}"> {block:IfCropThumbnails} <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div> {/block:IfCropThumbnails} {block:IfNotCropThumbnails} <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img"> {/block:IfNotCropThumbnails} </a> {/block:Photo} {block:Photoset} {block:Photos} <!--lightboxのリンク--> <a href="{PhotoURL-HighRes}" data-lightbox="thumbnailImg" data-title="{Caption}"> {block:IfCropThumbnails} <div class="post-photo-thumb" style="background-image: url('{PhotoURL-500}');"></div> {/block:IfCropThumbnails} {block:IfNotCropThumbnails} <img src="{PhotoURL-500}" alt="{PhotoAlt}" class="post-photo-img"> {/block:IfNotCropThumbnails} </a> {/block:Photos} {/block:Photoset}
以上でLightBoxの主な設定は終了です。
LightBoxのオプション設定をする場合
一例ですが、</body>
直前に以下のように記述すると、サンプルサイトのような動きになります。
※時間はms単位です。
<script> //light box設定 lightbox.option({ 'positionFromTop': 100, //表示位置(ピクセル単位) 'fadeDuration': 400, //ライトボックスコンテナとオーバーレイがフェードインおよびフェードアウトするのにかかる時間 'imageFadeDuration': 400, //読み込まれた画像がフェードインするのにかかる時間 'resizeDuration': 300, //違うサイズの画像を表示する時にリサイズする時間 'albumLabel': "画像 %1 / %2", //全ての画像中何枚目の画像を表示しているかを画像の下に表示(総数表示) //総数表示がいらなければ以下の記述で消せる //'showImageNumberLabel':false; //trueで表示falseで非表示 'wrapAround': true, //trueで最後まで到達したら最初に戻る 'disableScrolling': true //trueで画像表示中にスクロール不可 }); </script>
画像何枚中何枚みたいな表示がいらなければ、'showImageNumberLabel'
左横のコメントアウト//
を消して有効化してください。
その他のオプションは公式サイトで見てみてください。
公式
lokeshdhakar.com
コードは<script src="https://〜〜lightbox.js"></script>
より下に書いてください。
ステップ3 InfiniteScroll・Masonry・imageLoadedの導入
今回したInfiniteScrollはバージョン4です。
無限スクロールの実施には、HTMLの編集とCSSの編集両方行います。
ステップ3-1 HTMLの編集
まず、Masonry使用のためgridスタイルを適応させます。 ほぼInfiniteScrollの公式サイトよりコピペしています。
lightboxの時と同じく、{block:ifNotSingleColumnMode}
以下を編集します。
grid用クラス付与とタグの追加
205行目あたりにある、<div class="top-post-container {select:Thumbnails Size}">
を書き換えます。
編集前
{block:ifNotSingleColumnMode} <div class="top-post-container {select:Thumbnails Size} ">
編集後
{block:ifNotSingleColumnMode} <!--グリッドスタイルここから--> <div class="top-post-container {select:Thumbnails Size} grid are-images-unloaded"> <!--サイズ調整用--> <div class="grid__col-sizer"></div> <div class="grid__gutter-sizer"></div> <!--サイズ調整用ここまで-->
グリッドスタイルを適応させるためにgrid
というクラスをつけ、あとでjavascriptを使いつけ外しする用のクラスare-images-unloaded
を付与します。
<div class="grid__col-sizer"></div>
と<div class="grid__gutter-sizer"></div>
は、cssで余白を調整するためのクラスです。
次に211行目あたりにある<article class="post index-post {PostType}">
を書き換えます。
編集前
<div class="index-post-wrapper {select:Thumbnails Margin}"> {block:Posts} <article class="post index-post {PostType}">
編集後
<div class="index-post-wrapper {select:Thumbnails Margin}"> {block:Posts} <!--グリッドアイテム--> <article class="post index-post {PostType} grid-item">
grid-item
クラスを投稿要素に追加しています。
読み込み時にこのクラスがついている要素が無限スクロールで追加される対象となります。
ロード文字用のタグ追加
InfiniteScrollの公式サイトでロード文字のアニメーションサンプルがあるので、それをそのまま使用します。
542行目あたりにある{/block:IndexPage}
の直前に挿入します。
<!--ここからロード文字--> <div class="page-load-status"> <div class="infinite-scroll-request"> <div class="loader-ellips"> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> <span class="loader-ellips__dot"></span> </div> </div> <p class="infinite-scroll-last">全て読み込みました</p> <p class="infinite-scroll-error">ページを読み込めません</p> </div> <!--ロード文字ここまで-->
ステップ3-2 JavaScriptの追加
ステップ1で追加したCDN<script src="〜"></script>
の下に追加します。
<!--javascript追記--> <script> let grid = document.querySelector('.grid'); let msnry = new Masonry( grid, { itemSelector: 'none', // select none at first columnWidth: '.grid__col-sizer', //アイテムの横幅 gutter: '.grid__gutter-sizer', //アイテム同士の間隔 percentPosition: true, //CSSでサイズ調整する stagger: 30, //アイテムの表示時間の差。30で0.3s // nicer reveal transition transitionDuration: '0.8s', visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(50px)', opacity: 0 }, }); // imagesLoadedスクリプトでlayout各画像が読み込まれた後にトリガー imagesLoaded( grid, function() { grid.classList.remove('are-images-unloaded'); msnry.options.itemSelector = '.grid-item'; let items = grid.querySelectorAll('.grid-item'); msnry.appended( items ); }); // init Infinite Scroll let infScroll = new InfiniteScroll( grid, { path: '.pager-next', //ロードするページのリンク hideNav: '.pager-next', //ナビゲーション要素を非表示に append: '.grid-item', //ロード時に追加する要素 outlayer: msnry, status: '.page-load-status', //ロード文字 }); </script>
ステップ3-3 CSSの編集
テーマの編集
→詳細設定
よりカスタムCSSを追加
に以下のタグを全て貼り付けてください。
すでにCSSに何か追加されている場合はバックアップを取り、コードの続きに追加してください。
/*------------- imageLoaded設定 ---------------*/ /* 画像がロードされた後にグリッドを表示する */ .grid.are-images-unloaded { opacity: 0; } /* デフォルトで隠す */ .grid.are-images-unloaded .image-grid-item { opacity: 0; } /*---------- グリッドの設定 -----------*/ /* 3列 */ .post.index-post, .grid-item, .grid__col-sizer { width:calc(100% /3); } /* 余白なし */ .grid__gutter-sizer{ width: 0%; } /* PCでは4列 */ @media screen and (min-width: 768px) { .post.index-post, .grid-item, .grid__col-sizer { width: calc(100% / 4); } } /*------------ ロード文字の設定 --------------*/ /*ロード文字の位置を真ん中に*/ .page-load-status { text-align: center; } /*次のページがなかった場合はロード文字非表示*/ body.page-tag .page-load-status, body.page-load-status{ display:none; } /*--------------------- ロード文字アニメーション設定 -----------------------*/ .loader-ellips { font-size: 20px; /* ドットのサイズ */ position: relative; width: 4em; height: 1em; margin: 10px auto; } .loader-ellips__dot { display: block; width: 1em; height: 1em; border-radius: 0.5em; background: #555; /* ドットの色 */ position: absolute; animation-duration: 0.5s; animation-timing-function: ease; animation-iteration-count: infinite; } .loader-ellips__dot:nth-child(1), .loader-ellips__dot:nth-child(2) { left: 0; } .loader-ellips__dot:nth-child(3) { left: 1.5em; } .loader-ellips__dot:nth-child(4) { left: 3em; } @keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } } @keyframes slide { to { transform: translateX(1.5em) } } .loader-ellips__dot:nth-child(1) { animation-name: reveal; } .loader-ellips__dot:nth-child(2), .loader-ellips__dot:nth-child(3) { animation-name: slide; } .loader-ellips__dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
モバイル端末では3列、それ以外の大きい画面では4列になるように設定しています。
余白は0にしています。(数値を入れないと縦一列に画像が並んでしまうので0にしています。)
読み込み時の画像の配置と合わせるため、テーマオプションの設定は、
Thumbnails Margin
…None
Thumbnails Size
…M
を選んでください。
また、サムネイルを作るための関係上、
Crop Thumbnails
… オンSingle Column Mode
… オフ
にしておいてください。
ロード文字は、次のページへのリンクがないとエラーになってしまうので、とりあえずcssで非表示にさせています。
後半はロード文字のアニメーションになります。
InfiniteScrollの公式サイトでロード文字のアニメーションサンプルがあるので、それをそのまま使用します。
CSSを貼り付けたら、詳細設定の設定を画像を参考に設定してください。
画像を参考に、
- リンク先を新規ウィンドウに表示する … オフ
- デフォルトのモバイルテーマを使用 … オフ
- Google AMPを有効にする … オフ
- Truncate RSS feed … オフ or オン
- Tumblrを広める … オフ or オン
- Preview … 自分の投稿
- ページごとの投稿 … 12 推奨
のように設定します。
ページごとの投稿は、モバイルでもパソコンでも横一列きれいにいつでも画像がきっちり並ぶのが12なので、12にしています。
これでInfiniteScroll
の導入は完了です。
残すはサムネイル生成のみです。
サムネイル生成のプログラム※11/3修正
サムネイル生成のためのプログラムは、イラストフォリオ4のテーマアセットscript.js
内に書かれています。
ですが、ロード時に再度要素を取得して値を書き換える必要があったので、今回はscript.js
は使わず、新たに書きました。
JavaScript勉強中ということでなんだか冗長ですが、とりあえず動きますのでどうぞ。
挿入位置は、先ほどInfiniteScroll
のコードを入れたところの直下です。
<script> //================== //初回読み込み時の設定 //================== //postMediaPhotoに画像を取得し格納 let postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img'); //.post-content-anchorクラスを持つリンクを全て取得し格納 let postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor'); //一旦空の変数作る。ローディングのたびに取得し直す let postContentWrapper; let textBody; let p; let img; let figure; let cap; //================================== //ここからサムネイルとキャプション生成コード //ロード時にも読み込む //================================== function thumbnail() { //aタグ分forEachで処理 postInnerLink.forEach((link, index) => { //============================================ //リンクタグ毎にサムネイル生成 //============================================ //index番目の画像アドレスを変数に格納 img = postMediaPhoto[index].getAttribute('src'); //linkタグに取得した画像アドレス挿入する link.setAttribute('href', img); //linkタグの中にサムネイルをねじ込む link.insertAdjacentHTML("afterbegin", "<div class='post-photo-thumb' style='background-image: url(" + img + "');'></div>"); //============================================ //サムネイルごとにキャプションをつける設定 //============================================ //キャプション用のpタグがあるdiv要素を全て取得し格納 textBody = document.querySelectorAll('.index-post-content-text-body'); //figure要素を取得(削除用) figure = document.querySelectorAll('.index-post-content-text-body figure'); //取得した画像は消しておく figure.forEach((del) => { del.remove(); }); //div要素の最初の子要素を取得 p = textBody[index].firstElementChild; //Captionがある場合は取得 cap = postMediaPhoto[index].getAttribute('alt'); //Captionの文字が初期文字imageでない場合にキャプションを入れる if (cap !== 'image' && p === null) { link.setAttribute('data-title', cap); //imagekでなくテキストがあった場合は両方表示させる } else if (cap !== 'image' && p) { link.setAttribute('data-title', cap + '<br>' + p.textContent); //imageかつテキストがあったらテキストのみを表示する } else if (cap === 'image' && p) { link.setAttribute('data-title', p.textContent); } }); //最後にリンクタグについてたクラス除去 postInnerLink.forEach((del) => { del.setAttribute('class', ''); }); //用済みなので消す postContentWrapper = document.querySelectorAll('div.post-content-wrapper'); postContentWrapper.forEach((del, index) => { del.remove(); }); //ロードのたび取得することがないよう取得したテキストと画像を囲うdivは消しておく textBody.forEach((del) => { del.remove(); }); } thumbnail(); //======================= //ここからロード時の設定 //======================= //読み込まれたら変数に読み込み後取得した画像一覧を代入 infScroll.on('append', function (body, path, items, response) { postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img'); console.log('postMediaPhoto更新'); //.post-contentクラスを持つリンクを全て取得し変数に格納 postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor'); console.log('postInnerLink更新'); thumbnail(); }); </script>
コメントアウトでいろいろかいてますが、ようはテキストタイプで表示されている要素の中にあるimgタグからアドレスを拾ってきて、リンクタグの中にdiv
タグを生成。
イラストフォリオ4のスクリプトと同じようにbackground-image
に拾ってきたアドレスを画像タグのsrc
とリンクタグのhref
に入れています。
リンクタグに画像アドレスを入れたのは、LightBoxで画像を表示させるためです。
他、LightBox用に、クリックした時キャプションもしくは本文が表示されるようにif
文でテキストがある時のみ、data-title
にp
要素をまるごと格納するように設定しています。
写真投稿の場合はキャプション取得でできるんですが、ベータ版のサムネ生成できないバージョンで投稿すると、テキスト投稿タイプになってしまい、キャプションタグが機能しないため、このコードを入れています。
取得後、不必要な要素は削除しています。
削除しないと、次にロードした際、また1から画像を取得してしまい、サムネイルとリンクが新しいものに更新されないためです。
これですべての導入が完了しました。
さいごにプログラム部分のコード全部載せる
<script></script>
以降のコピペがうまくいっているかどうかの確認にどうぞ。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <!--lightboxのjsアドレス要変更--> <script src="https://static.tumblr.com/xndvfqy/Jnnr1tufx/lightbox.js"></script> <!--javascript追記--> <script> let grid = document.querySelector('.grid'); let msnry = new Masonry( grid, { itemSelector: 'none', // select none at first columnWidth: '.grid__col-sizer', //アイテムの横幅 gutter: '.grid__gutter-sizer', //アイテム同士の間隔 percentPosition: true, //CSSでサイズ調整する stagger: 100, //アイテムの表示時間の差。100で1.0s // nicer reveal transition transitionDuration: '.4s', visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(80px)', opacity: 0 }, }); // imagesLoadedスクリプトでlayout各画像が読み込まれた後にトリガー imagesLoaded( grid, function() { grid.classList.remove('are-images-unloaded'); msnry.options.itemSelector = '.grid-item'; let items = grid.querySelectorAll('.grid-item'); msnry.appended( items ); }); // init Infinte Scroll let infScroll = new InfiniteScroll( grid, { path: '.pagenation-index .pager-next', hideNav: '.pagenation-index .pager-next', //ナビゲーション要素を非表示に append: '.grid-item', //追加要素 outlayer: msnry, status: '.page-load-status', //ロード文字 scrollThreshold: 20, //下から100pxの位置でロード }); //light box設定 lightbox.option({ 'positionFromTop': 100, 'fadeDuration': 400, 'imageFadeDuration': 400, 'resizeDuration': 300, 'albumLabel': "画像 %1 / %2", 'wrapAround': true, 'disableScrolling': true }); </script> <script> //================== //初回読み込み時の設定 //================== //デフォルトでpostMediaPhotoに画像を取得し格納 let postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img'); //.post-contentクラスを持つリンクを全て取得し格納 let postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor'); //.post-content-wrapperクラスをもつdivを全て取得し格納する予定 let postContentWrapper; //キャプション用div要素を取得し格納する予定 let textBody; //一旦空のp変数作る。ここに取り出したhtmlを格納する予定 let p; //src取得予定 let img; //消去用画像予定 let figure; //キャプション用予定 let cap; function thumbnail() { //aタグ分forEachで処理 postInnerLink.forEach((link, index) => { //index番目の画像アドレスを変数に格納 img = postMediaPhoto[index].getAttribute('src'); //linkタグに取得した画像アドレス挿入する link.setAttribute('href', img); //linkタグの中にサムネイルをねじ込む link.insertAdjacentHTML("afterbegin", "<div class='post-photo-thumb' style='background-image: url(" + img + "');'></div>"); //============================================ //サムネイルごとにキャプションをつける設定 //============================================ //キャプション用のpタグがあるdiv要素を全て取得し格納 textBody = document.querySelectorAll('.index-post-content-text-body'); //figure要素を取得(削除用) figure = document.querySelectorAll('.index-post-content-text-body figure'); //取得した画像は消しておく figure.forEach((del) => { del.remove(); }); //div要素の最初の子要素を取得 p = textBody[index].firstElementChild; //Captionがある場合は取得 cap = postMediaPhoto[index].getAttribute('alt'); //Captionの文字が初期文字imageでない場合にキャプションを入れる if (cap !== 'image' && p === null) { link.setAttribute('data-title', cap); //imagekでなくテキストがあった場合は両方表示させる } else if (cap !== 'image' && p) { link.setAttribute('data-title', cap + '<br>' + p.textContent); //imageかつテキストがあったらテキストのみを表示する } else if (cap === 'image' && p) { link.setAttribute('data-title', p.textContent); } }); //最後にリンクタグについてたクラス除去 postInnerLink.forEach((del) => { del.setAttribute('class', ''); }); //用済みなので消す postContentWrapper = document.querySelectorAll('div.post-content-wrapper'); postContentWrapper.forEach((del, index) => { del.remove(); }); //ロードのたび取得することがないよう取得したテキストと画像を囲うdivは消しておく textBody.forEach((del) => { del.remove(); }); } thumbnail(); //======================= //ここからロード時の設定 //======================= //読み込まれたら変数に読み込み後取得した画像一覧を代入 infScroll.on('append', function (body, path, items, response) { postMediaPhoto = document.querySelectorAll('.post_media_photo ,.index-post-content-text-body img'); console.log('postMediaPhoto更新'); //.post-contentクラスを持つリンクを全て取得し変数に格納 postInnerLink = document.querySelectorAll('.post-inner > a.post-content-anchor'); console.log('postInnerLink更新'); thumbnail(); }); </script> </body> </html>
以上です。
何かもっとよく書ける方法があれば是非ご教授ください。
質問はコメント欄でお願いします。
最後まで見ていただきありがとうございました。