https://odaidokoro.info/js/theme_organic/photo.js

1'use strict';
2
3/**
4 * Organic
5 * photo.js
6 * ver.202008170000
7 */
8
9$(function() {
10    $('.thumb').css('visibility', 'hidden');
11
12    // モーダル(テキスト表示対応)
13    $('.js-colorbox-html').each(function() {
14        var photoModalContent = $(this).next('.js-colorbox-content').find('.photo-modal');
15
16        if (!photoModalContent.find('.photo-modal-body__item').contents().length) {
17            photoModalContent.addClass('photo-modal--photo');
18        }
19
20        $(this).colorbox({
21            scrolling: true,
22            rel: $(this).attr('rel'),
23            width: '78%',
24            maxHeight: '88%',
25            transition: 'elastic',
26            previous: '<img src="/img/theme_pastel/next_arrow_left.png">',
27            next: '<img src="/img/theme_pastel/next_arrow_right.png">',
28            close: '<img src="/img/theme_pastel/close-icon.png">',
29            current: '{current} / {total}',
30            html: photoModalContent,
31            onOpen: function() {
32                $('body').css({
33                    'overflow': 'hidden'
34                });
35            },
36            onClosed: function() {
37                $('body').css({
38                    'overflow': 'scroll'
39                });
40            },
41            onComplete: function() {
42                var padding = parseInt($('.photo-modal-body').css('padding-left')) * 2;
43
44                // text
45                $('#cboxLoadedContent .js-photo-modal-body').css({
46                    'width': $('#cboxLoadedContent .photo-modal__image img').width()
47                });
48
49                // table
50                $('#cboxLoadedContent table').each(function() {
51                    var originWidth = $(this).width();
52                    var fitWidth = $('#cboxLoadedContent').width() - padding;
53
54                    if (originWidth >= fitWidth) {
55                        $(this).css({
56                            'width': '100%',
57                            'height': 'auto'
58                        });
59                    }
60                });
61
62                // iframe
63                $('#cboxLoadedContent iframe').each(function() {
64                    var originWidth = $(this).width();
65                    var fitWidth = $('#cboxLoadedContent').width() - padding;
66                    var fitHeight = fitWidth / originWidth * $(this).height();
67
68                    if (originWidth >= fitWidth) {
69                        $(this).css({
70                            'width': '100%',
71                            'height': fitHeight + 'px'
72                        })
73                    }
74                });
75            }
76        });
77    });
78});
79
80$(window).on('load resize', function() {
81    var $target = $('#content .contents_box_inner');
82    var margin = parseInt($('.thumb').css('margin'));
83    var boxW;
84
85    // サムネイルを非表示
86    $('.thumb').css('visibility', 'hidden');
87
88    // 領域幅設定をリセット
89    $target.css('width', '100%');
90
91    // リセット後の領域幅からサムネイルサイズ取得
92    if (viewMode.get('pc-view')) {
93        boxW = Math.floor( $target.width() / 6.45 );
94
95        // サムネイルサイズ設定
96        $('.thumb').each(function() {
97            $(this).css({
98                'width': boxW * 9.9 / 10 + 'px',
99                'height': boxW * 9.9 / 10 + 'px'
100            });
101        });
102
103    // スマホ
104    } else {
105        boxW = Math.floor( $target.width() / 2 );
106
107        // サムネイルサイズ設定
108        $('.thumb').each(function() {
109            $(this).css({
110                'width': boxW * 5.6 / 10 + 'px',
111                'height': boxW * 5.6 / 10 + 'px'
112            });
113        });
114    }
115
116    // 画像を親要素幅でclip
117    $('a.thickbox img').clipSquareImage().addClass('show');
118
119    // 画像を表示
120    $('.thumb').css('visibility', 'visible');
121});