質問編集履歴

1

発生している問題の改善、ソースコードの挿入 試したことの追加

2020/07/10 02:36

投稿

madaratyou
madaratyou

スコア7

test CHANGED
@@ -1 +1 @@
1
- facebookの画像アップロード画面のように6枚目以降の画像を非表示?かつ色を暗くして、画像中央に+○と表示させたい
1
+ facebookの画像アップロード画面のように画像中央に+○と表示させたい
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- facebookの画像アップロード画面のように6枚目以降の画像を非表示?かつ色を暗くして、画像中央に+○と表示させたいです。
3
+ facebookの画像アップロード画面のように6枚目以降の画像を非表示,5枚目の色を暗くして、画像中央に+○と表示させたいです。
4
4
 
5
5
  言語はJavaScriptでお願いします。
6
6
 
@@ -10,11 +10,7 @@
10
10
 
11
11
  ### 発生している問題・エラーメッセージ
12
12
 
13
- 色々と検索してはいるが、なかなか方法が見つからないです。
14
-
15
- 特に、写真が6枚以上になった場合に6枚目以降の写真を非表示にする方法わかりせん
13
+ 6枚目以降の画像を非表示,5枚目の色を暗くして、画像中央+○と表示させることはできたのですが、+○の部分がフィルターの後ろになってしい、文字まで暗くなってしまっています
16
-
17
- ```
18
14
 
19
15
  エラーメッセージ
20
16
 
@@ -26,9 +22,113 @@
26
22
 
27
23
 
28
24
 
29
- ```ここに言語名を入力
25
+ ```HTML
30
26
 
27
+ <div class="js-gallery">
28
+
29
+ <ul id="gallery">
30
+
31
+ <li id="dv1" class="red-box"><a><img src="img/pic00.png"></a></li>
32
+
33
+ <li id="dv2" class="blue-box"><a><img src="img/pic01.png"></a></li>
34
+
35
+ <li class="yellow-box"><a><img src="img/pic02.png"></a></li>
36
+
37
+ <li class="green-box"><a><img src="img/pic03.png"></a></li>
38
+
39
+ <li class="pink-box">
40
+
41
+ <a><img src="img/pic04.png"></a>
42
+
43
+ </li>
44
+
45
+ <li><a><img src="img/pic05.png"></a></li>
46
+
47
+ <!-- <li><a><img src="img/pic06.png"></a></li> -->
48
+
49
+ </ul>
50
+
51
+ </div>
52
+
53
+
54
+
31
- ソースコード
55
+ [css]
56
+
57
+ li {
58
+
59
+ list-style: none;
60
+
61
+ }
62
+
63
+
64
+
65
+ li:nth-child(5) {
66
+
67
+ position: relative;
68
+
69
+ filter: contrast(50%);
70
+
71
+ }
72
+
73
+
74
+
75
+ li:nth-child(n + 6) {
76
+
77
+ display: none;
78
+
79
+ }
80
+
81
+
82
+
83
+ img {
84
+
85
+ width: 100%;
86
+
87
+ height: 100%;
88
+
89
+ object-fit: cover;
90
+
91
+ }
92
+
93
+
94
+
95
+
96
+
97
+ p {
98
+
99
+ position: absolute;
100
+
101
+ color: white;
102
+
103
+ font-weight: bold;
104
+
105
+ font-size: 48px;
106
+
107
+ top: 50%;
108
+
109
+ left: 50%;
110
+
111
+ transform: translate(-50%,-50%);
112
+
113
+ margin:0;
114
+
115
+ padding:0;
116
+
117
+ }
118
+
119
+
120
+
121
+ [JavaScript]
122
+
123
+ if (count >= 6 && h / w < 1 && h2 / w2 >= 1){
124
+
125
+ ul.classList.add('fifth-a');
126
+
127
+ li.classList.add('li:nth-child(5)');
128
+
129
+ p.textContent = '+2';
130
+
131
+ li.appendChild(p);
32
132
 
33
133
  ```
34
134
 
@@ -38,7 +138,7 @@
38
138
 
39
139
 
40
140
 
41
- 画像の色を濃くするのはopacityのスタイルをつけ外しすることできるかなと考えていま。しかし写真が6枚以上になった場合に6枚目以降の写真を非表示にする方法わかりせん
141
+ 画像の色を濃くするのはfilterのスタイルでいました。しかし写真が6枚以上になった場合に+2と表示させるJavaScriptを書きましたがfilterの後ろ行ってしまったのでz-indexを試しましたが、imgのposistionを変更するとレイアウト崩れてしいました
42
142
 
43
143
 
44
144