teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

参考サイトを追加

2019/09/26 11:32

投稿

yourai
yourai

スコア20

title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,9 @@
4
4
  0番目だけ取得できていないのかと思いきや、他のものからスライドして来ると一番最初は表示されていなかったものも表示されます。
5
5
  解決策がございましたらご教示お願いします。
6
6
 
7
+ 参考サイト:
8
+ https://usagi-online.com/s/190730SND/?link=190913SND_C
9
+
7
10
  ```html
8
11
  <div class="section items">
9
12
  <ul>

1

誤って入力前に投稿してしまいました。。

2019/09/26 11:32

投稿

yourai
yourai

スコア20

title CHANGED
File without changes
body CHANGED
@@ -25,10 +25,107 @@
25
25
  </div>
26
26
  </div><!--modal-slide-item-->
27
27
 
28
+ <!--上記が4つ-->
29
+
28
30
  </div><!--modal-slide-->
29
31
  </div><!--modal-->
30
32
  ```
31
33
 
32
34
  ```css
35
+ .section {
36
+ ul {
37
+ display: flex;
38
+ flex-wrap: wrap;
39
+ li {
40
+ width: calc(100% / 3);
41
+ box-sizing: border-box;
42
+ padding: 1px;
43
+ a {
44
+ display: block;
45
+ }
46
+ }
47
+ }
48
+ }
33
49
 
50
+ .overlay {
51
+ width: 100%;
52
+ height: 100%;
53
+ background: rgba(0,0,0,0.4);
54
+ position: fixed;
55
+ top: 0;
56
+ left: 0;
57
+ z-index: 100;
58
+ display: none;
59
+ }
60
+
61
+ .overlay.opacity {
62
+ display: block;
63
+ }
64
+
65
+ .modal {
66
+ z-index: -1;
67
+ position: fixed;
68
+ top: 8%;
69
+ left: 50%;
70
+ transform: translateX(-50%);
71
+ opacity: 0;
72
+ }
73
+
74
+ .modal.show {
75
+ z-index: 200;
76
+ opacity: 1;
77
+ transition: opacity .8s;
78
+ }
79
+
80
+ .modal-slide-item > div > img {
81
+ transition: .3s;
82
+ }
83
+
84
+ .slick-slide img {
85
+ display: block;
86
+ }
87
+
88
+ img.fadeimg {
89
+ -webkit-backface-visibility: hidden;
90
+ backface-visibility: hidden;
91
+ }
92
+ ```
93
+
94
+ ```javascript
95
+ $(function(){
96
+ var modal = $('.modal');
97
+ var overlay = $('.overlay');
98
+
99
+ $('.items a').on('click', function(event){
100
+ event.preventDefault();
101
+ modal.addClass('show');
102
+ overlay.addClass('opacity');
103
+
104
+ var index = $(this).data('slide-index');
105
+ $('.modal-slide').slick('slickGoTo', index, true);
106
+ });
107
+
108
+ $('.modal-slide').slick({
109
+ lazyLoad: 'ondemand',
110
+ fade: true,
111
+ });
112
+
113
+ $('.overlay, .modal-close').on('click',function() {
114
+ modal.removeClass('show');
115
+ overlay.removeClass('opacity');
116
+ });
117
+
118
+ $(window).on('load resize',function(event){
119
+ var imgWidth = $('.items img').width();
120
+ var imgHeight = $('.items img').height();
121
+ var sliderHeight = $(window).height() - 160;
122
+ var sliderWidth = sliderHeight * (imgWidth / imgHeight);
123
+
124
+ $('.modal img').height(sliderHeight);
125
+ $('.modal').width(sliderWidth).height(sliderHeight);
126
+ $('.modal .credit').width(sliderWidth);
127
+ $('.modal .slick-arrow').css('top', (sliderHeight / 2) - 35);
128
+
129
+ });
130
+ });
34
131
  ```