new-chance/building/
paginationにタブを連動させて 自社ページの建築実例写真集のコンテンツを作成。
※本来タブの機能なので、開きたいコンテンツの下方にタブ+ページネーションを設置しちゃうと、下方のコンテンツ付近が表示されてみきれてしまう。タブなので、見せたいコンテンツの上に設置することが本来の使い方。下に設置した場合はアンカー使っても上部へは移管できないので設置には注意。上に置く以外はこの方法はとらない方が良い。
ＰＳ 結局 建築実例写真集はこの方法は不採用にした。ページネーションをクリックしたらサムネイルの上のあたりにアンカーが行くようにとのことになったので普通のページネーションにアンカー付けた方法に変更した。
全体をtab-content でラッピング
p294 p245
<div class=”tab-content “>
<div class=”tab-pane fade show active” id=”page1“>
<div class=”col-lg-10 offset-lg-1″>
<div class=”row “>
<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page2/IMG_0015.JPG” data-lightbox=”group1″><img src=”../image/building/page2/IMG_0015s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page2/IMG_0081.JPG” data-lightbox=”group1″><img src=”../image/building/page2/IMG_0081s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>
※ classにnav を付けないとリンクが通らないので追加する。
data-toggle=”tab” も必要
<div class=”col-12 text-center pn my-5″>
<ul class=”nav pagination pagination-sm justify-content-center”>
<li class=”page-item active“><a href=”#page1” class=”page-link” data-toggle=”tab”>1</a></li>
<li class=”page-item”><a href=”#page2″ class=”page-link” data-toggle=”tab”>2</a></li>
<li class=”page-item”><a href=”#page3″ class=”page-link” data-toggle=”tab”>3</a></li>
<li class=”page-item”><a href=”#page4″ class=”page-link” data-
</ul>
</div>
</div>
</div>
</div>
<div class=”tab-pane fade ” id=”page2“>
<div class=”col-lg-10 offset-lg-1″>
<div class=”row”>
<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page1/IMG_0001.JPG” data-lightbox=”group1″><img src=”../image/building/page1/IMG_0001s.jpg” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page1/IMG_0078.JPG” data-lightbox=”group1″><img src=”../image/building/page1/IMG_0078s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page1/IMG_0110.JPG” data-lightbox=”group1″><img src=”../image/building/page1/IMG_0110s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>
<div class=”col-12 text-center pn my-5″>
<ul class=”nav pagination pagination-sm justify-content-center”>
<li class=”page-item”><a href=”#page1” class=”page-link” data-toggle=”tab”>1</a></li>
<li class=”page-item active“><a href=”#page2” class=”page-link” data-toggle=”tab”>2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>