<?php
// 表示テンプレート
$template = <<<END
<!-- block_thumb: サムネイル画像切り替え -->
<section class="block_thumb">
<!--{def item/title}-->
<h2>{val item/title}</h2>
<!--{/def}-->
<div class="thumbnail-view"></div>
<div class="thumbnail">
<!--{each item/list}-->
<img src="user_data/{val item/list/image}" alt="">
<!--{/each}-->
</div>
<!--{def item/link_text}-->
<p class="btn1 c"><a href="{val item/link}">{val item/link_text}</a></p>
<!--{/def}-->
</section>
END;

// スタイルシート
$block_thumb_style = <<<END
<style>
/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view {
	max-width: 800px;		/*最大幅*/
	margin: 0 auto 2rem;	/*ブロック要素を中央に配置。下に2文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail {
	display: flex;				/*flexを使う指定*/
	flex-wrap: wrap;			/*サムネイルが増えた際に自動で折り返す*/
	justify-content: center;	/*並びかたの種類の指定。これはセンタリングする指定。*/
	align-items: center;		/*サイズ違いの画像が並んだ際に、天地の中央で揃えるようにする*/
	margin-bottom: 3rem;		/*下に空けるスペース。3文字分。*/
}

/*サムネイル画像*/
.thumbnail img {
	width: 100px;		/*サムネイルの幅*/
	margin: 5px;		/*サムネイル間のスペース*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
.thumbnail img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}
</style>
END;

// スクリプト
$block_thumb_script = <<<END
<script>
//===============================================================
// 詳細ページのサムネイル切り替え
//===============================================================
$(function() {
    // 初期表示: 各 .thumbnail-view に対して、直後の .thumbnail の最初の画像を表示
    $(".thumbnail-view").each(function() {
        var firstThumbnailSrc = $(this).next(".thumbnail").find("img:first").attr("src");
        var defaultImage = $("<img>").attr("src", firstThumbnailSrc);
        $(this).empty().append(defaultImage);
    });

    // サムネイルがクリックされたときの動作
    $(".thumbnail img").click(function() {
        var imgSrc = $(this).attr("src");
        var newImage = $("<img>").attr("src", imgSrc).hide();

        // このサムネイルの直前の .thumbnail-view 要素を取得
        var targetPhoto = $(this).parent(".thumbnail").prev(".thumbnail-view");

        targetPhoto.find("img").fadeOut(400, function() {
            targetPhoto.empty().append(newImage);
            newImage.fadeIn(400);
        });
    });
});
</script>
END;

$block_thumb = array(					// ブロック
	"title" => "サムネイル画像切替",	// ブロックの名称
	"name" => "block_thumb",		// 名称、重複すると正しく動作しません
	"template" => $template,		// ブロックのテンプレート
	"stylesheet" => $block_thumb_style,			// ブロックの追加スタイルシート
	"javascript" => $block_thumb_script,		// ブロックの追加スクリプト
	"input" => array(				// ブロックの入力定義
		"help" => array(
			"title" => "使い方",
			"type" => "comment",
			"link" => DOCUMENT1 . "/?act=block_thumb",
			"class" => "notice",
		),
		"title" => array(
			"title" => "タイトル",
			"type" => "text",
		),
		"image1" => array(
			"title" => "画像1",
			"type" => "image",
		),
		"image2" => array(
			"title" => "画像2",
			"type" => "image",
		),
		"image3" => array(
			"title" => "画像3",
			"type" => "image",
		),
		"image4" => array(
			"title" => "画像4",
			"type" => "image",
		),
		"image5" => array(
			"title" => "画像5",
			"type" => "image",
		),
		"image6" => array(
			"title" => "画像6",
			"type" => "image",
		),
		"image7" => array(
			"title" => "画像7",
			"type" => "image",
		),
		"image8" => array(
			"title" => "画像8",
			"type" => "image",
		),
		"image9" => array(
			"title" => "画像9",
			"type" => "image",
		),
		"image10" => array(
			"title" => "画像10",
			"type" => "image",
		),
		"link_text" => array(
			"title" => "リンク表示",
			"type" => "text",
			"info" => "リンク表示、リンク先両方書かないとリンクは表示されません",
		),
		"link" => array(
			"title" => "リンク先",
			"type" => "text",
		),
	),
	"repeat" => array("image"),
);

block_add($block_thumb);
