photo_popup.js
4.67 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
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) {
$('.item-page.photos-custom > div p').eq(i).remove();
}
}
});
/**
* 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
* popupの制御を行う関数の実行。
*/
$('.item-page.photos-custom > div p').on('click', function() {
// popupで表示させる画像URLを取得
const src = $(this).children('img').attr('src');
// popupに画像URLをセット
$('#photo-popup-img').attr('src', src);
// クリックされた画像のインデックス番号を取得
let index = $('.item-page.photos-custom > div p').index(this);
// 画像の数を取得
const imagesLength = $('.item-page.photos-custom > div p').length;
changePopup(index, imagesLength);
// popupの表示
$('#photo-popup-wrapper').fadeIn();
// popupのみスクロール可とする。
$('body').css('overflow','hidden');
});
/**
* ポップアップの状態の制御
* ・ 画像の切り替え
* ・ ポップアップの表示、非表示
*
* @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);
}, 500);
setTimeout(function () {
$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);
}, 500);
setTimeout(function () {
$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','');
});
}
});