teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問rssで取得した記事をスライドショーで表示

編集履歴

質問編集履歴

4

解決いたしました。

2019/04/12 10:52

投稿

Achishi
Achishi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -315,3 +315,109 @@
315
315
  // console.log (data[i]);
316
316
 
317
317
  ```
318
+
319
+
320
+
321
+
322
+
323
+
324
+
325
+ おっしゃる通りAjaxでli要素を追加し終えたあとに直後でやればできました。$('.bxslider').bxSlider(/*省略*/)
326
+
327
+ うまく理解できずすいません。
328
+
329
+ お手数おかけいたしました。
330
+
331
+ 一応出来上がったコードはコチラです。
332
+
333
+
334
+
335
+ ```JS
336
+
337
+ $(function() {
338
+
339
+ $.ajax({
340
+
341
+ url: 'rss.php',
342
+
343
+ xmlType: 'xml',
344
+
345
+ success: function(xml) {
346
+
347
+ var row = 0;
348
+
349
+ var data = [];
350
+
351
+ var nodeName;
352
+
353
+ var output = $('#rss');
354
+
355
+ // start item 成形
356
+
357
+ $(xml).find('item').each(function() {
358
+
359
+ data[row] = {};
360
+
361
+ $(this).children().each(function() {
362
+
363
+ nodeName = $(this)[0].nodeName;
364
+
365
+ data[row][nodeName] = {};
366
+
367
+ attributes = $(this)[0].attributes;
368
+
369
+ for (var i in attributes) {
370
+
371
+ data[row][nodeName][attributes[i].name] = attributes[i].value;
372
+
373
+ }
374
+
375
+ data[row][nodeName]['text'] = $(this).text();
376
+
377
+ });
378
+
379
+ row++;
380
+
381
+ });
382
+
383
+ // end item 成形
384
+
385
+ output.wrapInner('<ul class="bxslider"></ul>');
386
+
387
+ for (i in data) {
388
+
389
+ output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>');
390
+
391
+ // console.log (data[i]);
392
+
393
+ }
394
+
395
+ $('.bxslider li:last-child').prependTo('.bxslider');
396
+
397
+ $('.bxslider').bxSlider({
398
+
399
+ auto: true,
400
+
401
+ slideWidth: 640,
402
+
403
+ minSlides: 3,
404
+
405
+ maxSlides:4,
406
+
407
+ }
408
+
409
+ );
410
+
411
+ }
412
+
413
+ });
414
+
415
+
416
+
417
+ });
418
+
419
+
420
+
421
+
422
+
423
+ ```

3

liの箇所について

2019/04/12 10:52

投稿

Achishi
Achishi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -295,3 +295,23 @@
295
295
  });
296
296
 
297
297
  ```
298
+
299
+
300
+
301
+
302
+
303
+ 私の考えでは下記がliの追加箇所だと思ってます。
304
+
305
+
306
+
307
+ ```JS
308
+
309
+ output.wrapInner('<ul class="bxslider"></ul>');
310
+
311
+ for (i in data) {
312
+
313
+ output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>');
314
+
315
+ // console.log (data[i]);
316
+
317
+ ```

2

js更新

2019/04/12 08:38

投稿

Achishi
Achishi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -193,3 +193,105 @@
193
193
 
194
194
 
195
195
  どなたかご教授いただけますと幸いです。
196
+
197
+
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+ コメントで失礼しました。
206
+
207
+
208
+
209
+ ```JS
210
+
211
+ $(function() {
212
+
213
+ $.ajax({
214
+
215
+ url: 'rss.php',
216
+
217
+ xmlType: 'xml',
218
+
219
+ success: function(xml) {
220
+
221
+ var row = 0;
222
+
223
+ var data = [];
224
+
225
+ var nodeName;
226
+
227
+ var output = $('#rss');
228
+
229
+ // start item 成形
230
+
231
+ $(xml).find('item').each(function() {
232
+
233
+ data[row] = {};
234
+
235
+ $(this).children().each(function() {
236
+
237
+ nodeName = $(this)[0].nodeName;
238
+
239
+ data[row][nodeName] = {};
240
+
241
+ attributes = $(this)[0].attributes;
242
+
243
+ for (var i in attributes) {
244
+
245
+ data[row][nodeName][attributes[i].name] = attributes[i].value;
246
+
247
+ }
248
+
249
+ data[row][nodeName]['text'] = $(this).text();
250
+
251
+ });
252
+
253
+ row++;
254
+
255
+ });
256
+
257
+ // end item 成形
258
+
259
+ output.wrapInner('<ul class="bxslider"></ul>');
260
+
261
+ for (i in data) {
262
+
263
+ output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>');
264
+
265
+ // console.log (data[i]);
266
+
267
+ }
268
+
269
+ }
270
+
271
+ });
272
+
273
+ });
274
+
275
+
276
+
277
+ $(document).ready(function(){
278
+
279
+ $('.bxslider li:last-child').prependTo('.bxslider');
280
+
281
+ $('.bxslider').bxSlider({
282
+
283
+ auto: true,
284
+
285
+ slideWidth: 640,
286
+
287
+ minSlides: 3,
288
+
289
+ maxSlides:4,
290
+
291
+ }
292
+
293
+ );
294
+
295
+ });
296
+
297
+ ```

1

具体的に記載してます宜しくお願い致します。

2019/04/12 08:01

投稿

Achishi
Achishi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,195 @@
1
- wordpressの新着情報のrssをphpでfeedで取得して、jsでフルスクラッチのサイトに表示してます。
1
+ wordpressの新着情報rss（画像つき）をphpのfeedで取得して、jsでフルスクラッチのサイトに表示してます。
2
2
 
3
3
  取得した記事をスライドショー（画像と文字）で表示させたいのですが、どうすればよいか分かりません。
4
4
 
5
5
 
6
6
 
7
+ 具体的には
8
+
9
+
10
+
11
+ ```html
12
+
13
+ <div id="rss"> </div>
14
+
15
+ ```
16
+
17
+ のhtmlに下記のphpのfeedで取得更に、JSでhtmlの＃rssに出力してます。
18
+
19
+
20
+
21
+ ```php
22
+
23
+ <?php
24
+
25
+ $url = "https://**********/feed/";
26
+
27
+ $xml = file_get_contents($url);
28
+
29
+ header("Content-type: application/xml; charset=UTF-8");
30
+
31
+ print $xml;
32
+
33
+ ?>
34
+
35
+ ```
36
+
37
+
38
+
39
+ ```JS
40
+
41
+ $(function() {
42
+
43
+ $.ajax({
44
+
45
+ url: 'rss.php',
46
+
47
+ xmlType: 'xml',
48
+
49
+ success: function(xml) {
50
+
51
+ var row = 0;
52
+
53
+ var data = [];
54
+
55
+ var nodeName;
56
+
57
+ var output = $('#rss');
58
+
59
+ // start item 成形
60
+
61
+ $(xml).find('item').each(function() {
62
+
63
+ data[row] = {};
64
+
65
+ $(this).children().each(function() {
66
+
67
+ nodeName = $(this)[0].nodeName;
68
+
69
+ data[row][nodeName] = {};
70
+
71
+ attributes = $(this)[0].attributes;
72
+
73
+ for (var i in attributes) {
74
+
75
+ data[row][nodeName][attributes[i].name] = attributes[i].value;
76
+
77
+ }
78
+
79
+ data[row][nodeName]['text'] = $(this).text();
80
+
81
+ });
82
+
83
+ row++;
84
+
85
+ });
86
+
87
+ // end item 成形
88
+
89
+ output.wrapInner('<ul class="bxslider"></ul>');
90
+
91
+ for (i in data) {
92
+
93
+ output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>');
94
+
95
+ // console.log (data[i]);
96
+
97
+ }
98
+
99
+ }
100
+
101
+ });
102
+
103
+ });
104
+
105
+ ```
106
+
107
+
108
+
109
+
110
+
111
+ 出力された記事が下記の画像のようにデベロッパーツールで出てきたので、
112
+
113
+
114
+
115
+ ![イメージ説明](058754b681195aa2ffd486ee77c2f35a.png)
116
+
117
+
118
+
119
+
120
+
121
+
122
+
123
+ jqueryのboxsliderを入れようと、下記記述して、ファイルも同フォルダ内の収納してます。
124
+
125
+
126
+
127
+
128
+
129
+
130
+
131
+ ```html
132
+
133
+ <script src="jquery.bxslider.min.js"></script>
134
+
135
+ <link href="jquery.bxslider.css" rel="stylesheet" type="text/css">
136
+
137
+ <script>
138
+
139
+ $(document).ready(function(){
140
+
141
+ $('.bxslider li:last-child').prependTo('.bxslider');
142
+
143
+ $('.bxslider').bxSlider({
144
+
145
+ auto: true,
146
+
147
+ slideWidth: 640,
148
+
149
+ minSlides: 3,
150
+
151
+ maxSlides:4,
152
+
153
+ }
154
+
155
+ );
156
+
157
+ });
158
+
159
+
160
+
161
+ </script>
162
+
163
+
164
+
165
+ ```
166
+
167
+
168
+
169
+ 試しに通常の通り下記でやるとちゃんと動きます。
170
+
171
+
172
+
173
+ ```html
174
+
175
+ <ul class="bxslider">
176
+
177
+ <li><p>nannka</p><img src="images/6174663536_IMG_0248.jpg" title="キャプション1" alt="1" width="500px"></li>
178
+
179
+ <li><p>nannka</p><img src="images/6241705440_IMG_0384.jpg" title="キャプション2" alt="2" width="500px"></li>
180
+
181
+ <li><p>nannka</p><img src="images/7516817296_IMG_4167.JPG" title="キャプション3" alt="3" width="500px"></li>
182
+
183
+ <li><p>nannka</p><img src="images/IMG_0453 2.JPG" title="キャプション4" alt="4" width="500px"></li>
184
+
185
+ </ul>
186
+
187
+ ```
188
+
189
+
190
+
191
+
192
+
193
+
194
+
7
195
  どなたかご教授いただけますと幸いです。