質問編集履歴

4

lightGallery

2017/01/22 01:20

投稿

2001Y
2001Y

スコア83

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- ##lightGalleを使用したいが、JavaScriptで作成したコードには機能せず
17
+ ##lightGalleryを使用したいが、JavaScriptで作成したコードには機能せず
18
18
 
19
19
 
20
20
 
@@ -22,13 +22,13 @@
22
22
 
23
23
 
24
24
 
25
- そこで、画像をトリミングしてしまって見えなくなった部分を見たり、ダウンロードできるさせるために、 lightGalleというプラグインを入れよう思いました。
25
+ そこで、画像をトリミングしてしまって見えなくなった部分を見たり、ダウンロードできるさせるために、 lightGalleryというプラグインを入れよう思いました。
26
26
 
27
- (本当は lightGalle を入れようとしてこのような経緯に至ったのですが)
27
+ (本当は lightGallery を入れようとしてこのような経緯に至ったのですが)
28
28
 
29
29
 
30
30
 
31
- **[jQueryプラグイン - lightGalle](https://sachinchoolur.github.io/lightGallery/)**
31
+ **[jQueryプラグイン - lightGallery](https://sachinchoolur.github.io/lightGallery/)**
32
32
 
33
33
 
34
34
 

3

プラグイン名追加

2017/01/22 01:20

投稿

2001Y
2001Y

スコア83

test CHANGED
File without changes
test CHANGED
@@ -25,6 +25,10 @@
25
25
  そこで、画像をトリミングしてしまって見えなくなった部分を見たり、ダウンロードできるさせるために、 lightGalleというプラグインを入れよう思いました。
26
26
 
27
27
  (本当は lightGalle を入れようとしてこのような経緯に至ったのですが)
28
+
29
+
30
+
31
+ **[jQueryプラグイン - lightGalle](https://sachinchoolur.github.io/lightGallery/)**
28
32
 
29
33
 
30
34
 

2

タイトル等追加

2017/01/21 18:46

投稿

2001Y
2001Y

スコア83

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
+ ###過去の質問
2
+
1
- 今までの二つの質問をさせていただき、無事にJavaScriptを利用して、連番のつく画像を正方形にトリミングし大量表表示することがきました。
3
+ 今までの二つの質問をさせていただき、無事にJavaScriptを利用して、連番のつく画像を正方形にトリミングし大量表表示することがきました。 ー [質問でできたところまでのLiveweave](http://liveweave.com/uoAyIl)
2
4
 
3
5
 
4
-
5
- ー 過去の質問 ー
6
6
 
7
7
  [ファイル名が連番な画像を表示する](https://teratail.com/questions/62784)
8
8
 
@@ -10,15 +10,17 @@
10
10
 
11
11
 
12
12
 
13
- [質問でできたところまでのLiveweave](http://liveweave.com/uoAyIl)
14
-
15
-
16
-
17
13
  ![イメージ](31821718251dc8ffc87978b34285fb8e.png)
18
14
 
19
15
 
20
16
 
17
+ ##lightGalleを使用したいが、JavaScriptで作成したコードには機能せず
18
+
19
+
20
+
21
21
  **目標としては、ギャラリー?のように写真を大量に表示させたいのです。**
22
+
23
+
22
24
 
23
25
  そこで、画像をトリミングしてしまって見えなくなった部分を見たり、ダウンロードできるさせるために、 lightGalleというプラグインを入れよう思いました。
24
26
 
@@ -29,3 +31,41 @@
29
31
  しかし、HTML上で作成したコードでの動作はできたのですが、JavaScriptで作成したコードでは動作しません。
30
32
 
31
33
  そこを動作させるためにはどうすればいいのでしょうか。
34
+
35
+
36
+
37
+ ######動作するHTML
38
+
39
+ ```HTML
40
+
41
+ <div id="lightgallery">
42
+
43
+ <div class="gallery-image"><a href="https://placehold.jp/ff4747/ffffff/100x100.png?text=test.jpg"><img src="https://placehold.jp/ff4747/ffffff/100x100.png?text=test.jpg"></a></div><br>
44
+
45
+ ```
46
+
47
+ ######連続した画像を追加するためのJavaScript
48
+
49
+ ```JavaScript
50
+
51
+ document.addEventListener("DOMContentLoaded", function () {
52
+
53
+ for (i = 1; i <= 10; i++) {
54
+
55
+ document.getElementById("lightgallery").insertAdjacentHTML('beforeend',
56
+
57
+ '<div class="gallery-image">' +
58
+
59
+ '<a href="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg">' +
60
+
61
+ '<img src="https://placehold.jp/ff4747/ffffff/100x100.png?text=' + i + '.jpg">' +
62
+
63
+ '</a>' +
64
+
65
+ '</div>');
66
+
67
+ }
68
+
69
+ }, false);
70
+
71
+ ```

1

リンク追加

2017/01/21 18:45

投稿

2001Y
2001Y

スコア83

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,10 @@
7
7
  [ファイル名が連番な画像を表示する](https://teratail.com/questions/62784)
8
8
 
9
9
  [JavaScriptで作成した画像をCSSでトリミングできない](https://teratail.com/questions/62827)
10
+
11
+
12
+
13
+ [質問でできたところまでのLiveweave](http://liveweave.com/uoAyIl)
10
14
 
11
15
 
12
16