写真ギャラリー（lightbox2）の自動設置

hoge

方法は２つ。

手段１：lightbox2を自分で加える。

lightbox2から該当jsとcssをHTMLソースに組み込む。

<script src="<?php echo get_template_directory_uri(); ?>/js/lightbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/lightbox.css" />

で、動かすためにはjqueryで小細工を設置。↓

<script type="text/javascript">
<!-- // 写真ギャラリーlightbox2 -->

jQuery(document).ready(function(){

	var anchors = jQuery('#post a');
	jQuery.each(anchors, function(i, val) {
	//	$("#" + i).append(document.createTextNode(" - " + val));
		var href1 = jQuery(this).attr("href");
		var href2 = jQuery(this).children("img").attr("src");
		if(href1 == href2){
			var str_title = jQuery(this).children("img").attr("title");
			jQuery(this).attr("data-lightbox","roadtrip");
			jQuery(this).attr("data-title",str_title);
		}
	});

});
</script>

◆WordPress用ならこんな感じでも尚可↓

<script type="text/javascript">
jQuery(document).ready(function(){
						<!-- // lightbox2用設定 -->
						<?php
							$image_path = wp_upload_dir();
							$upload_url = $image_path['baseurl'];
						?>
						var anchors = jQuery('#subpage-area a');
						jQuery.each(anchors, function(i, val) {

							var pattern = new RegExp("^<?php echo $upload_url; ?>", "i");
							var href1 = jQuery(this).attr("href");
							var href2 = jQuery(this).children("img").attr("src");

							if(pattern.test(href1) && pattern.test(href2)){
								var str_title = jQuery(this).children("img").attr("alt");
								jQuery(this).attr("data-lightbox","roadtrip");
								jQuery(this).attr("data-title",str_title);
							}
						});

	});
</script>

★jqueryでやらなくても、HTMLでこんな感じで「data-lightbox="グループ名"」と記述すれば動きます。

手段２：lightbox2を自分で加える。

WordPressプラグイン『WP Lightbox 2』をインストールし、有効にしておく。

<script type="text/javascript">
<!-- // 写真ギャラリーlightbox2-plugin -->
	jQuery(document).ready(function(){
		jQuery('#post a').attr("rel","lightbox['123']");
	});
</script>

HTMLでこんな感じで「rel="lightbox[数字]"」が吐出されれば動くはず。↓

<a title="cccccc" href="http://example.com/image1.jpg" rel="lightbox[123]"> <img src="http://example.com/image1_s.jpg" alt="cccccc" width="75" height="75" /> </a>
<a title="aaaaaa" href="http://example.com/image2.jpg" rel="lightbox[123]"> <img src="http://example.com/image2_s.jpg" alt="aaaaaa" width="75" height="75" /> </a>
<a title="bbbbbb" href="http://example.com/image3.jpg" rel="lightbox[123]"> <img src="http://example.com/image3_s.jpg" alt="bbbbbb" width="75" height="75" /> </a>