bxSliderを活用した自動タグ

bxSliderを活用した自動タグを開発しました。
記述方法：［medialist_bxslider:(アルバムID) (1,2,3,4,5) (ページ内のID)]
記述例：

[medialist_bxslider:12 1]

DEMO
[medialist_bxslider:10 1] DEMOページ:
自動タグ medialist_bxslider のdemo

自動タグプラグインをインストールして以下の自動タグを追加します。自動タグのなかで、さらに、MediaGalleryで用意した自動タグを呼んでいます。

Autotags plugin: medialist_bxslider:

	<div class="slider">
		<ul class="bxslider#21">
			[medialist:#1 src:disp theme:list limitcnt:10]
		</ul>
		<div class="controlWrap  uk-flex-center uk-inline uk-visible-toggle uk-light">
			<ul id="bx-pager#2" class="bxslider#22">
				[medialist:#1 src:tn theme:list_inc limitcnt:10]
			</ul>
			<p id="PrevIcon#2" class="uk-position-left uk-flex uk-flex-middle"></p>
			<p id="NextIcon#2" class="uk-position-right uk-flex uk-flex-middle"></p>
		</div>
	</div>

ivywe版に新しく追加したMediaGalleryのmedialistテンプレート　list,list_inc をあらかじめアップロード。テーマはdefaultを活用すると、以下に記述の作業は不要です。

header.thtmlに追記

<!-- bxSlider CSS file -->
<link href="{layout_url}/vendor/bxslider/jquery.bxslider.css" rel="stylesheet" />

footer.thtmlに追記(1ページに5個まで記述できるよう5種類用意)

<!-- bxSlider Javascript file -->
<script src="{layout_url}/vendor/bxslider/jquery.bxslider.js"></script>
<!-- bxSlider用記述 Start-->
<script>$(document).ready(function(){
//メインスライド用の記述
  $('.bxslider11').bxSlider({
  pagerCustom: '#bx-pager1',//ページャーをカスタマイズする（サムネイルにする）ための記述
  controls:false//前後の矢印を消すための記述
  });
  $('.bxslider21').bxSlider({
  pagerCustom: '#bx-pager2',//ページャーをカスタマイズする（サムネイルにする）ための記述
  controls:false//前後の矢印を消すための記述
  });
  $('.bxslider31').bxSlider({
  pagerCustom: '#bx-pager3',//ページャーをカスタマイズする（サムネイルにする）ための記述
  controls:false//前後の矢印を消すための記述
  });
  $('.bxslider41').bxSlider({
  pagerCustom: '#bx-pager4',//ページャーをカスタマイズする（サムネイルにする）ための記述
  controls:false//前後の矢印を消すための記述
  });
  $('.bxslider51').bxSlider({
  pagerCustom: '#bx-pager5',//ページャーをカスタマイズする（サムネイルにする）ための記述
  controls:false//前後の矢印を消すための記述
  });
});

//サムネイルをスライドさせるための記述
$(document).ready(function(){
  $('.bxslider12').bxSlider({
  pager:false,
  minSlides: 5,//１スライドに表示するサムネイルの数
  maxSlides: 10,//１スライドに表示するサムネイルの最大数
  slideWidth: 90,//サムネイルの横幅（単位はpx）
  slideMargin: 10,//サムネイル間の余白（単位はpx）
  nextSelector: '#NextIcon1',//"次へ”矢印をカスタマイズするための記述
  prevSelector: '#PrevIcon1'//"前へ”矢印をカスタマイズするための記述
      });
  $('.bxslider22').bxSlider({
  pager:false,
  minSlides: 5,//１スライドに表示するサムネイルの数
  maxSlides: 10,//１スライドに表示するサムネイルの最大数
  slideWidth: 90,//サムネイルの横幅（単位はpx）
  slideMargin: 10,//サムネイル間の余白（単位はpx）
  nextSelector: '#NextIcon2',//"次へ”矢印をカスタマイズするための記述
  prevSelector: '#PrevIcon2'//"前へ”矢印をカスタマイズするための記述
      });
  $('.bxslider32').bxSlider({
  pager:false,
  minSlides: 5,//１スライドに表示するサムネイルの数
  maxSlides: 10,//１スライドに表示するサムネイルの最大数
  slideWidth: 90,//サムネイルの横幅（単位はpx）
  slideMargin: 10,//サムネイル間の余白（単位はpx）
  nextSelector: '#NextIcon3',//"次へ”矢印をカスタマイズするための記述
  prevSelector: '#PrevIcon3'//"前へ”矢印をカスタマイズするための記述
      });
  $('.bxslider42').bxSlider({
  pager:false,
  minSlides: 5,//１スライドに表示するサムネイルの数
  maxSlides: 10,//１スライドに表示するサムネイルの最大数
  slideWidth: 90,//サムネイルの横幅（単位はpx）
  slideMargin: 10,//サムネイル間の余白（単位はpx）
  nextSelector: '#NextIcon4',//"次へ”矢印をカスタマイズするための記述
  prevSelector: '#PrevIcon4'//"前へ”矢印をカスタマイズするための記述
      });
  $('.bxslider52').bxSlider({
  pager:false,
  minSlides: 5,//１スライドに表示するサムネイルの数
  maxSlides: 10,//１スライドに表示するサムネイルの最大数
  slideWidth: 90,//サムネイルの横幅（単位はpx）
  slideMargin: 10,//サムネイル間の余白（単位はpx）
  nextSelector: '#NextIcon5',//"次へ”矢印をカスタマイズするための記述
  prevSelector: '#PrevIcon5'//"前へ”矢印をカスタマイズするための記述
      });
});
</script> 
<!-- //bxSlider用記述 End -->

plugins/mediagallery/templates/medialist/list/autotag_medialist.thtml:

{medialist_col}

plugins/mediagallery/templates/medialist/list/autotag_medialist_col.thtml:

<li><img src="{filename}" alt="{media_title}" alt="{media_title}"{xhtml}></li>

plugins/mediagallery/templates/medialist/list_inc/autotag_medialist.thtml:

<?php global $inc; $inc=0; ?>
  {medialist_col}

plugins/mediagallery/templates/medialist/list_inc/autotag_medialist_col.thtml:

			<li><a data-slide-index="<?php global $inc; echo intval($inc); $inc=$inc+1; ?>" href=""><img src="{filename}" alt="{media_title}" alt="{media_title}"{xhtml}></a></li>

ダウンロード 動作条件：

Geeklog 2.1.2 ivywe package(theme Default) + Autotags plugin + MediaGallery plugin (medialist)

Geeklog IVYWE版 ダウンロード：
https://github.com/ivywe/geeklog-ivywe/tree/Geeklog2.1.2

参考サイト：

bxSlider ダウンロード：
http://bxslider.com/

サムネイル付きのbxSlider　
http://www.plusdesign.co.jp/blog/?p=3037