photo_popup.js
4.04 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
jQuery(function($) {
/**
* フォトライブラリ用のpopupのためのHTMLをセット
*/
$(document).ready(function() {
const photosCustom = $('.item-page.photos-custom');
if (photosCustom[0]) {
let photosCustomHtml = '';
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>';
photosCustom.append(photosCustomHtml);
}
});
/**
* ポップアップで表示する画像URLの取得と、popupの制御を行う関数の実行。
*/
$('.item-page.photos-custom > div p').on('click', function() {
$('.item-page.photos-custom').addClass('active-popup');
// popupで表示させる画像URL
const src = $(this).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
// クリックされた画像の親要素の中での順番を取得
let index = $('.item-page.photos-custom > div p').index(this);
// 画像のインデックス番号の最大値を取得
const imagesNum = $('.item-page.photos-custom > div p img').length - 1;
changePopup(index, imagesNum);
setPopup();
$(window).resize(function () {
setPopup();
});
});
/**
* ポップアップの大きさの制御
*/
function setPopup() {
const winW = $(window).innerWidth();
const winH = $(window).innerHeight();
// 画面表示領域のアスペクト比を取得
const asp = winH / winW;
if (asp < 0.75) {
const newW = winH / 75 * 100;
const style = {'height':winH,'width':newW}
$('#photo-popup').css(style);
} else {
const newH = winW * 0.75 * 0.9;
const newW = winW * 0.9;
const style = {'height':newH,'width':newW}
$('#photo-popup').css(style);
}
}
/**
* ポップアップの状態の制御
* ･ 画像の切り替え
* ･ ポップアップの表示、非表示
*
* @param {*} index クリックされた画像の親要素の中での順番
* @param {*} imagesNum 画像のインデックス番号の最大値を取得
*/
function changePopup(index, imagesNum) {
$('#photo-popup-pre').off('click').on('click', function() {
if (index === 0) {
index = imagesNum;
const src = $('.item-page.photos-custom > div p').eq(imagesNum).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
} else {
index--;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
}
});
$('#photo-popup-next').off('click').on('click', function() {
if (index === imagesNum) {
index = 0;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
} else {
index++;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
}
});
$('#photo-popup-close').off('click').on('click', function() {
$('.item-page.photos-custom').removeClass('active-popup');
});
$('#photo-popup-under').off('click').on('click', function() {
$('.item-page.photos-custom').removeClass('active-popup');
});
}
});