photo_popup.js
5.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
jQuery(function($) {
/**
* フォトライブラリ用のpopupのためのHTMLをセット
*/
$(document).ready(function() {
const photosCustom = $('.item-page.photos-custom');
if (photosCustom[0]) {
let photosCustomHtml = '';
photosCustomHtml += '<div id="photo-popup-wrapper">';
photosCustomHtml += '<div id="photo-popup">';
photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
photosCustomHtml += '</div>';
photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>';
photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>';
photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
photosCustomHtml += '<div id="photo-popup-under">';
photosCustomHtml += '</div>';
photosCustomHtml += '</div>';
photosCustom.append(photosCustomHtml);
}
// 自動生成されたp要素を削除
let $imgWrppers = $('.item-page.photos-custom > div p');
for (let i = 0; i < $imgWrppers.length; i++) {
// 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
if ($imgWrppers[i]['children'].length === 0) {
$imgWrppers[i].remove();
}
}
});
/**
* 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
* popupの制御を行う関数の実行。
*/
$('.item-page.photos-custom > div p').on('click', function() {
// クリックされた画像のインデックス番号を取得
let index = $('.item-page.photos-custom > div p').index(this);
// 画像の数を取得
const imagesLength = $('.item-page.photos-custom > div p').length;
changePopup(index, imagesLength);
// popupで表示させる画像URLを取得
const src = $(this).children('img').attr('src');
const $img = $('#photo-popup-img');
// popupに画像URLをセット
$img.attr('src', src);
// 画像URLのセットから時間をあけることで、表示がなめらかになる。
setTimeout(function () {
// popupの表示
$('#photo-popup-wrapper').fadeIn();
// popupのみスクロール可とする。
$('body').css('overflow','hidden');
addClassToImage($img);
}, 50);
});
/**
* ポップアップの状態の制御
* ･ 画像の切り替え
* ･ ポップアップの表示、非表示
*
* @param {*} index クリックされた画像の親要素の中での順番
* @param {*} imagesLength 画像のインデックス番号の最大値を取得
*/
function changePopup(index, imagesLength) {
$('#photo-popup-pre').off('click').on('click', function() {
const $img = $('#photo-popup-img');
let src = '';
// 透明にする
$img.css('opacity',0);
if (index === 0) {
index = imagesLength - 1;
src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
} else {
index--;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきるまでまって画像の差し替えを実行
$img.attr('src', src);
}, 400);
setTimeout(function () {
// 画像URLのセットからすこし待つことで関数で正しい数値を取得できる。
addClassToImage($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
$img.css('opacity','');
}, 600);
});
$('#photo-popup-next').off('click').on('click', function() {
const $img = $('#photo-popup-img');
let src = '';
// 透明にする
$('#photo-popup-img').css('opacity',0);
if (index === imagesLength - 1) {
index = 0;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
} else {
index++;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替えを実行
$img.attr('src', src);
}, 400);
setTimeout(function () {
addClassToImage($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
$img.css('opacity','');
}, 600);
});
$('#photo-popup-close').off('click').on('click', function() {
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
$('#photo-popup-under').off('click').on('click', function() {
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
}
/**
* 表示する画像のアスペクト比に応じたクラスを付与する。
* @param {*} $img ポップアップに表示している画像
*/
function addClassToImage($img) {
const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
const asp = imgHeight / imgWidth;
if (asp < 1) {
$('#photo-popup').removeClass('horizontal');
$('#photo-popup').addClass('vertical');
} else {
$('#photo-popup').removeClass('vertical');
$('#photo-popup').addClass('horizontal');
}
}
});