https://shikabe.net/js/theme_chic/top.js

1'use strict';
2
3/**
4 * Chic
5 * top.js
6 * ver.202009040000
7 */
8
9// スライドショーの速度設定受渡し(default:4000)
10var autoplayspeed = (typeof slideshow !== 'undefined') ? slideshow.interval : 4000;
11
12var slickSlide = {
13    initialize: function() {
14        var $image = $('.slider .article img');
15
16        var count = 0;
17
18        // 画像先読み
19        for (var i = 0; i < $image.length; i ++) {
20            var preLoadImage = new Image();
21
22            preLoadImage.onload = function() {
23                count ++;
24
25                if (count === $image.length) {
26                    slickSlide.setImagePosition();
27                    slickSlide.setImageCaption();
28                    $('.slider').addClass('is-visible').slick('slickPlay');
29                }
30            };
31
32            preLoadImage.src = $image[i].src + '?' + Date.now();
33        }
34    },
35
36    setImagePosition: function() {
37        var sliderObj = $('.slider');
38        var wrapW, wrapH, targetImage, targetW, targetH;
39
40        sliderObj.css('width', '100%');
41
42        wrapW = sliderObj.width();
43        wrapH = sliderObj.height();
44
45        $('.slider .article img').each(function() {
46            var $target = $(this);
47
48            targetImage = new Image();
49            targetImage.src = $($target).attr('src');
50
51            $target.css({
52                'position': 'relative',
53                'width': wrapW + 'px',
54                'height': 'auto'
55            });
56
57            if (wrapH > $(this).height()) {
58                $target.css({
59                    'width': 'auto',
60                    'height': wrapH + 'px'
61                });
62            }
63
64            $target.css({
65                'left': - ($(this).width() - wrapW) / 2 + 'px',
66                'top': - ($(this).height() - wrapH) / 2 + 'px'
67            });
68        });
69    },
70
71    setImageCaption: function() {
72        $('.slider .article .caption').each(function() {
73            var $target = $(this).find('.caption_txt a');
74            if($target.is(':empty')) {
75                $(this).remove();
76            }
77            if($target.attr('href') === '') {
78                $target.replaceWith($(this).text());
79            }
80        });
81    }
82};
83
84// Photoブロックサムネイル
85var thumbnail = {
86    initialize: function() {
87        var selector = '.section.photo';
88        var $list = $(selector + ' .list');
89        var $item = $(selector + ' .item');
90        var margin = 10;
91        var boxWidth;
92
93        $list.css('width', '100%');
94
95        if (window.matchMedia('(min-width: 769px)').matches) {
96            boxWidth = Math.floor(($list.width() + margin) / 6 - margin);
97
98            $item.each(function() {
99                $(this).css({
100                    'width': boxWidth + 'px',
101                    'height': boxWidth + 'px'
102                });
103            });
104        } else {
105            boxWidth = Math.floor( ($list.width() + margin) / 3 ) - margin;
106
107            $item.each(function() {
108                $(this).css('width', boxWidth + 'px');
109                $(this).css('height', boxWidth + 'px');
110            });
111        }
112
113        $item.find('img').clipSquareImage();
114        $item.addClass('is-visible');
115    }
116};
117
118$(window).on('resize', function() {
119    slickSlide.setImagePosition();
120});
121
122$(window).on('load resize', function() {
123    $('.section.information .photo img').clipSquareImage({'adjustParentHeight': true}).addClass('show');
124    thumbnail.initialize();
125});
126
127$(function() {
128    $('h2 a:empty').remove();
129
130    var slidelength;
131
132    // スライドショー画像の登録が無い場合、包括要素(.wrap_slider)を削除
133    if ($('.wrap_slider .article').length == 0) {
134        $('.wrap_slider').remove();
135    }
136
137    $('.slider').on('init', function(){
138        slidelength = $('.slick-slide').length;
139        $('.slider .article[data-slick-index=0]').toggleClass('move');
140    });
141
142    $('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
143        var next = $('.slider .article[data-slick-index=' + nextSlide + ']');
144        next.toggleClass('move');
145    });
146
147    $('.slider').on('afterChange', function(event, slick, currentSlide){
148        var prev = ((currentSlide - 1) < 0) ? $('.slider .article[data-slick-index=' + (slidelength - 1) + ']') : $('.slider .article[data-slick-index=' + (currentSlide - 1) + ']');
149
150        prev.removeClass('move');
151    });
152
153    $('.slider').slick({
154        slide: 'div',
155        autoplay: false,

156        autoplaySpeed: autoplayspeed,
157        speed: 1500,
158        fade: true,
159        dots: false,
160        arrows: false,
161        pauseOnHover: false
162    });
163
164    slickSlide.initialize();
165});