BxSliderスライダーは、様々なカスタマイズが容易に演出可能なスクリプトで　
サムネイルギャラリーという表現は、スライダー下部に画像コンテンツを
小画面一覧として並べる独特のスタイルによりイメージ効果の向上を狙う事も
可能な手法の一つ。

 

ただし、読者誘導という点で考えれば、良い画像を揃え事が興味を
抱いてもらうが大事なこと....
であれば、スライダー表現を一歩前進するスタイルを構築できるでしょう

 

2015　0223　2017　0419更新
シリウススライドコンテンツテーマ　サムネイルギャラリー

 

単一スライドでの表現ではもの足らず、もう一歩向上するスタイルを願うなら
サムネイルギャラリーを追加されてはいかがでしょう

 

サムネイルギャラリーとは、スライド下に画像のギャラリーを表示する
そして小画像クリックで見たい画像に到達できるようにします

 

画像ギャラリーを追加した例...
いつものワンパターン画像ですみません　
画像は愛知県豊橋市　伊良子岬少し手前かな？

 

画像は5つですが追加は自由です

 

では、サムネイルコンテンツへ進みますが、いきなり当ページに到達した際は
意味合い理解が困難かと思われますので、以下ページで初期説明をご覧ください
スクリプト導入その他画像の周りに表示されるシャドウ枠の削除方法等
親ページに詳細は含まれております　ご確認ください
シリウスにスライダー（BxSlider）を導入する方法 | シリウスカスタマイズ
上記を理解していただいたとして...

 

ＨＴＭＬテンプレート内　
head　内に記述スクリプトは親ページと同じものです

 

<script src="http://goemonjapan.com/jquery-2.1.1.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://goemonjapan.com/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="http://goemonjapan.com/jquery.bxslider.css" rel="stylesheet" />
<link rel="shortcut icon" href="./favicon.ico" type="image/vnd.microsoft.icon" />

 

サーバー内ファイルも親ページ解説と同じままですが、サムネイルは
スタイルを延長するのではなく新しく構築という手順になります

 

サムネイルギャラリー作成手順

 

では、ＨＴＭＬトップページに設定する手順で進めます
一工程目　ＨＴＭＬ記述

 

ＨＴＭＬテンプレートの最下部　ＢＯＤＹの上に記述するコードは
以下に変ります

 

 

<!-- bxSlider記述-->
<script>$(document).ready(function(){
//メインスライド用の記述
$('.bxslider01').bxSlider({
pagerCustom: '#bx-pager',/ページサムネイルを表現するための記述/
controls:false//前後の矢印を消すための記述
});
});

 

/サムネイルをスライドさせるための記述/
$(document).ready(function(){
$('.bxslider02').bxSlider({
pager:false,
minSlides: 5,//１スライドに表示するサムネイルの数
maxSlides: 5,//１スライドに表示するサムネイルの最大数
slideWidth: 90,//サムネイルの横幅（単位はpx）
slideMargin: 10,//サムネイル間の余白（単位はpx）
nextSelector: '#NextIcon',　//　次への矢印カスタマイズするための記述
prevSelector: '#PrevIcon'　//前への矢印カスタマイズするための記述
});
});
</script>
<!-- //bxSlider記述ここまで―>

 

 

bxslider01がメイン画像指定　02がサムネイルを指定します

 

 

HTML ＢＯＤＹの上に記述します

 

 

 

2工程目　スタイルシートへの記述

 

記事トップに掲載のイメージ画像は以下の指定で作りました

 

数値変更でカスタムが可能です
変更後プレビューして適正に合わないずれなどは　再変更で
すぐに修正できますので　不安なくチャレンジしてみて下さい

 

変更はご自身で願います

 

スタイルシートの　一番下にコピーして貼り付けます

 

 

スライド表示の際、画像枠が見られますが取り外す場合は
BxSliderＣＳＳファイルからになります
詳細は親ページでご確認ください

 

---

 

3工程目　シリウス記事欄にスライドを設置する

 

 

記述は　シリウスの記事上の取り付けたい位置にコピーして貼り付けて
画像コードを自身の選択するものに入れ替えて下さい

 

上記述がメインスライドを示しています

 

スライド画像を追加する場合は記述を一つ上下とも追加します
次にＨＴＭＬ内に記載コードでも表示画像数を変更してください

 

下がサムネイルです

 

<div class="slider">
<!--メインスライダー Start -->
<ul class="bxslider01">
<li><img src="img/1airako4.jpg" width="400" height="300" alt="slide01" /></li>
<li><img src="img/ kobgg6.jpg" width="400" height="300" alt="slide02" /></li>
<li><img src="img/1azhghn.png" width="400" height="300" alt="slide03" /></li>
<li><img src="img/1airako5.jpg" width="400" height="300" alt="slide04" /></li>
<li><img src="img/clipge_04.jpg"width="400" height="300" alt="slide05" /></li>
</ul>
<!--サムネイルスライダー Start-->
<div class="controlWrap">
<ul id="bx-pager" class="bxslider02">
<li><a data-slide-index="0" href=""><img src="img/1airako4.jpg" width="90" height="60" alt="thumb01" /></a></li>
<li><a data-slide-index="1" href=""><img src="img/1airako6.jpg" width="90" height="60" alt="thumb02" /></a></li>
<li><a data-slide-index="2" href=""><img src="img/1az.png" ="90" height="60" alwidtht="thumb03" /></a></li>
<li><a data-slide-index="3" href=""><img src="img/1airako5.jpg" width="90" height="60" alt="thumb04" /></a></li>
<li><a data-slide-index="4" href=""><img src="img/clipimage_04.jpg"width="90" height="60" alt="slide05" /></a></li>
</ul>
<p id="PrevIcon"></p>
<p id="NextIcon"></p>
</div>
<!--サムネイルスライダー End-->
</div>

 

 

 

 

 

画像コードの記述について

 

メインスライド用記述コード

 

シリウスで横サイズを420として管理画面から画像コードを呼び出した場合
以下の記述ですね
<img src="<% pageDepth %>img/a1380_001165.jpg" style="width:420px;" alt="" />

 

シリウス管理画像コードより

 

img/a1380_001165.jpg　を取出し

 

BxSlider記述に変えます

 

<img src="ここに入れます" width="400" height="300" alt="slide01" />

 

<img src="img/a1380_001165.jpg" width="400" height="300" alt="slide01" />

 

コードのslide01の数値は順番指定ですので、画像追加の際は
適正に記載して追加願います

 

 

サムネイル記述

 

記述を見ればどこを変えるかお解りになれますね
<a data-slide-index="0" href=""><img src="img/1airako4.jpg" width="90" height="60" alt="thumb01" /></a>

 

width="90" height="60"は　サムネイルの画像のサイズ記述を指定しています

 

a data-slide-index="0"の数値は　記述ラストと異なっていますが
これでよいのです

 

１　にしますと　スライドが一つ空白になってしまいます

 

ラスト数値とは　一つ　ずれるとご理解ください

 

画像コード記載完了後、　プレビューで表示を確認して
修正しましょう

 

 

---

 

今回はＡＤ２様のサイトを参考にさせていただきました
ありがとうございます

 

スポンサーリンク

 

 

BxSliderスライダーにサムネイルギャラリーを設定する方法
シリウスにスライダー（BxSlider）を導入する方法 | シリウスカスタマイズ
シリウスカスタマイズトップ