https://www.ouwv.net/wp/wp-content/themes/ouwvtheme/js/top.js?ver=2.1

1/* トップページの画像ギャラリーの初期化 */
2$(function(){
3  /* レスポンシブデザイン関係の定数（画面幅） */
4  var min_pc = 1080; // PC表示の閾値（この値以下はタブレット表示）
5  var min_tablet = 768; // タブレット表示の閾値（この値より小さいものはスマートフォン表示）
6  var min_phone = 320; // 想定されるスマートフォンの最小解像度
7  /* トップページの画像ギャラリーのサイズを画面に収まるように調整 */
8  (function(){
9    if ($("#header").width() < min_pc) { return; } // スマートフォン,タブレットは対象外
10    var header_height = $("#header-wrapper").height();
11    var top_page_gallery_wrapper = $("#top-page-gallery-wrapper");
12    var top_page_gallery_height = top_page_gallery_wrapper.height();
13    var window_height = $(window).height();
14    /* 画像ギャラリーが画面外にはみ出すかを判定 */
15    if (header_height + top_page_gallery_height > window_height) {
16      /* はみ出す場合、(画像ギャラリーの高さ) = (画面の高さ) - (ヘッダーの高さ) にしたい */
17      var h = window_height - header_height;
18      /* 画像ギャラリーが小さくなりすぎるのを防止（元のサイズの2分の1くらいが限界かと） */
19      if (h < top_page_gallery_wrapper.height() / 2) { h = top_page_gallery_wrapper.height() / 2; }
20      /* 余白(padding)分の長さを除去 */
21      h -= top_page_gallery_wrapper.outerHeight() - top_page_gallery_wrapper.height();
22      /* 画像ギャラリラッパーの高さを変更 */
23      top_page_gallery_wrapper.height(h);
24      /* 縮小後の画像の幅を計算 */
25      var top_page_gallery_image = $("#top-page-gallery-image");
26      var w = h * top_page_gallery_image.width() / top_page_gallery_image.height();
27      /* 画像サイズを変更 */
28      top_page_gallery_image.height(h); top_page_gallery_image.width(w);
29      /* 画像ギャラリのサイズを変更（横幅はボタンのサイズと余白を考慮+小数丸め誤差の安全マージン1px） */
30      var top_page_gallery = $("#top-page-gallery");
31      var top_page_gallery_prev_button = $("#top-page-gallery-prev-button");
32      var top_page_gallery_next_button = $("#top-page-gallery-next-button");
33      top_page_gallery.height(h);
34      top_page_gallery.width(top_page_gallery_prev_button.width() * 2 + top_page_gallery_image.outerWidth(true) + 1);
35      /* ボタンの高さを調整する */
36      var margin_top = (top_page_gallery.height() - top_page_gallery_prev_button.height()) / 2;
37      top_page_gallery_prev_button.css("margin-top", margin_top + "px");
38      top_page_gallery_next_button.css("margin-top", margin_top + "px");
39    }
40  })();
41  /* ギャラリーの画像の読み込み */
42  (function() {
43    /* 写真のURL等のデータはPHPスクリプトによって出力されたimages.jsから読み込まれる
44       読み込まれたデータは配列としてグローバル変数imagesに格納されているものとして動作する
45       データ構造 : var images = [{"image": "写真のURL", "large": "大きい写真のURL", "caption": "写真の説明文"}, …]; */
46    if (images.length > 0) {
47      /* 写真の順番をシャッフル (Fisher-Yatesアルゴリズム) */
48      for (var i = images.length - 1; i > 0; i--){
49        var j = Math.floor(Math.random() * (i + 1));
50        var tmp = images[j]; images[j] = images[i]; images[i] = tmp;
51      }
52      /* 写真を表示するためのimg要素を生成 */
53      for (var i = 0; i < images.length; i++) {
54        var s = "";
55        s += "<img id=\"top-page-gallery-image-" + i + "\" ";
56        s += "src=\"" + images[i].image + "\" alt=\"" + images[i].caption + "\" ";
57        s += "style=\"position:absolute;top:0;left:0;width:100%;height:100%;display:none;\">";
58        $("#top-page-gallery-image").append(s);
59      }
60      /* 最初の画像を表示 */
61      $("#top-page-gallery-image-0").fadeIn();
62      /* キャプションを表示 */
63      $("#top-page-gallery-caption").text(images[0].caption);
64    }
65  })();

66  /* 画像表示用モーダルウィンドウの初期化 */
67  (function() {
68    /* モーダルウィンドウを生成 */
69    var s = "";
70    s += "<div id=\"overlay\">&nbsp;</div>";
71    s += "<div id=\"modal-window\">";
72    s += "<img id=\"modal-window-image\">";
73    s += "<div id=\"modal-window-image-caption\">&nbsp;</div>"
74    s += "</div>";
75    s += "<div id=\"overlay-note\">※どこをクリックしても閉じることができます。</div>";
76    $("body").append(s);
77    /* モーダルウィンドウの画像が読み込み完了した際のイベント（src属性が更新される度に呼ばれる） */
78    $("#modal-window-image").bind("load", function(){
79      var img = $(this); var modal_window = $("#modal-window");
80      /* display:none;だと要素の高さが取得できないので、一時的にdisplay:block;にして、visivility:hidden;で非表示にする */
81      modal_window.css({"visivility":"hidden", "display": "block"});
82      img.css({"width": "auto", "height": "auto"}); // 画像サイズをリセット
83      var img_width = img.width(); var img_height = img.height();
84      var window_width = $(window).width(); var window_height = $(window).height();
85      if (window_height > 120) { window_height -= 60; } // #overlay-note表示用の余白を確保
86      if (window_width > 120) { window_width -= 60; } // 横にも少し余白を作る
87      modal_window.css({"display": "none", "visivility": "visible"});
88      /* 画像のサイズで場合分け */
89      if (img_width < window_width && img_height < window_height) {
90        // 画面に収まる場合 → そのまま
91        w = img_width; h = img_height;
92      /* (画面からはみ出す場合 → 画像と画面のアスペクト比を比較）*/
93      } else if (img_width / img_height < window_width / window_height) {
94        // 画像の横幅が短い場合 → 画面の高さに合わせる
95        w = img_width * window_height / img_height; h = window_height;
96      } else {
97        // 画像の横幅が長い場合 → 画面の横幅に合わせる
98        w = window_width; h = img_height * window_width / img_width;
99      }
100      /* 画像サイズ・ウィンドウサイズを変更 */
101      img.width(w); img.height(h);
102      modal_window.width(w); modal_window.height(h);
103      /* ウィンドウ表示位置をセンタリング */
104      modal_window.css("margin-top", "-" + (h / 2) + "px");
105      modal_window.css("margin-left", "-" + (w / 2) + "px");
106      /* ウィンドウを表示 */
107      $("#overlay").fadeIn();
108      $("#overlay-note").fadeIn();
109      modal_window.fadeIn();
110    });
111  })();
112  /* 写真ギャラリーを開始 */
113  (function() {
114    if (images.length == 0) { return; }
115    var interval = 5; // ギャラリーの写真の更新間隔 (秒)
116    var n = 0; // 写真の番号を保持する変数
117    /* 写真を切り替える関数 direction = 1 or -1 */
118    var change_image = function(direction) {
119      $("#top-page-gallery-image-" + n).fadeOut(); //現在の写真を非表示
120      n += direction; // 番号を変更
121      /* 配列の範囲内で番号を循環させる */
122      if (n > images.length - 1) { n = 0; }
123      if (n < 0) { n = images.length - 1; }
124      /* 新しい写真を表示 */
125      $("#top-page-gallery-image-" + n).fadeIn();
126      $("#top-page-gallery-caption").text(images[n].caption);
127    }
128    /* スライドショーの開始・停止の関数 */
129    var timer;
130    var start = function(){ timer = setInterval(function(){ change_image(1); }, interval * 1000); };
131    var stop = function(){ clearInterval(timer); };
132    /* ボタンイベント */
133    $("#top-page-gallery-prev-button").click(function(){ stop(); change_image(-1); start(); });
134    $("#top-page-gallery-next-button").click(function(){ stop(); change_image(1); start(); });
135    /* モーダルウィンドウを開く関数 */
136    var open_modal = function(url){
137      stop(); // スライドショーの停止
138      $("#modal-window-image").attr("src", images[n].large); // モーダルウィンドウの画像を指定されたものに切り替え

139      $("#modal-window-image-caption").text($("#top-page-gallery-caption").text()); // キャプションを変更
140      /* ウィンドウの表示は画像の読み込み完了イベントにフックされているため不要 */
141    }
142    /* 写真のクリックイベント (モーダルウィンドウを開く) */
143    $("#top-page-gallery-image img").click(function(){
144      if ($("#header").width() > min_tablet) { open_modal(this.src); } // モーダルウィンドウを開くのはPCのみ
145    });
146    /* モーダルウィンドウを閉じる関数 */
147    var close_modal = function(){
148      $("#overlay").fadeOut("fast");
149      $("#overlay-note").fadeOut("fast");
150      $("#modal-window").fadeOut("fast");
151      start();
152    }
153    /* モーダルウィンドウを閉じるイベントを設定 */
154    $("#overlay").click(function(){ close_modal(); });
155    $("#overlay-note").click(function(){ close_modal(); });
156    $("#modal-window").click(function(){ close_modal(); });
157    /* スライドショーの開始 */
158    start();
159  })();
160});
161
162/* Twitterウィジェットの初期化 */
163/* Twitter ID はtwitter_id.jsによって読み込まれ、グローバル変数twitter_idに格納されている */
164$(function(){
165  var s;
166  /* Twitterへのリンクを表示 */
167  s = "(<a href=\"https://twitter.com/" + twitter_id + "\" target=\"_blank\">@" + twitter_id + "</a>)";
168  $("#top-page-twitter-title").append(s);
169  /* Twitterウィジェットを表示 ("https://publish.twitter.com/"で作成した) */
170  s = "";
171  s += "<a class=\"twitter-timeline\" data-lang=\"ja\" data-theme=\"light\" data-link-color=\"#00b56c\"";
172  s += " data-chrome=\"noheader\" href=\"https://twitter.com/" + twitter_id + "\">Tweets by " + twitter_id + "</a>";
173  s += "<script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>";
174  $("#top-page-twitter .content-box").html(s);
175  /* 2カラムレイアウト（PC版表示）のときにカラムの高さが同じになるように調整する */
176  if ($(window).width() > 1080) {
177    var h1 = $("#top-page-column-1").height();
178    var h2 = $("#top-page-column-2").height();
179    if (h2 < h1) {
180      h = $("#top-page-twitter .content-box").height();
181      $("#top-page-twitter .content-box").height(h + h1 - h2);
182    }
183  }
184});
185/* ウィジェットのフォントサイズを無理矢理変更する */
186/* 描画完了時にiframe内にstyleタグを挿入 */
187$(function(){
188  var flag = true;
189  var count = 0;
190  var adjust_font_size = function(){
191    count++;
192    if (count > 100) { return; }
193    setTimeout(function(){
194      if ($("#top-page-twitter iframe")) {
195        var s = "<style>.TweetAuthor-name,.timeline-Tweet-text{font-size:15px!important;line-height:1.3!important;}</style>";
196        $("#top-page-twitter iframe").contents().find("head").append(s);
197        var font_size = $("#top-page-twitter iframe").contents().find(".timeline-Tweet-text").css("font-size");
198        if (font_size == "15px") { flag = false; }
199      }
200      if (flag == true) { adjust_font_size(); }
201    }, 300);
202  }
203  adjust_font_size();
204});
205