teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ajaxとjQueryのgallerifficの組み合わせで困っています。

編集履歴

質問編集履歴

5

ご指摘いただいた点を修正いたしました。

2016/09/01 11:27

投稿

space_sss
space_sss

スコア81

test CHANGED
File without changes
test CHANGED
@@ -292,15 +292,11 @@
292
292
 
293
293
 
294
294
 
295
- 【Galleriffic | A jQuery plugin for rendering fast-performing photo galleries】
295
+ [Galleriffic | A jQuery plugin for rendering fast-performing photo gallerie](http://www.twospy.com/galleriffic/)
296
-
297
- [リンク内容](http://www.twospy.com/galleriffic/)
296
+
298
-
299
-
300
-
301
- 【http://www.twospy.com/galleriffic/js/jquery.galleriffic.js】
297
+
302
-
298
+
303
- [リンク内容](http://www.twospy.com/galleriffic/js/jquery.galleriffic.js)
299
+ [http://www.twospy.com/galleriffic/js/jquery.galleriffic.js](http://www.twospy.com/galleriffic/js/jquery.galleriffic.js)
304
300
 
305
301
 
306
302
 

4

ご指摘を頂いた点を修正いたしました。

2016/09/01 11:27

投稿

space_sss
space_sss

スコア81

test CHANGED
File without changes
test CHANGED
@@ -294,13 +294,13 @@
294
294
 
295
295
  【Galleriffic | A jQuery plugin for rendering fast-performing photo galleries】
296
296
 
297
- http://www.twospy.com/galleriffic/
297
+ [リンク内容](http://www.twospy.com/galleriffic/)
298
298
 
299
299
 
300
300
 
301
301
  【http://www.twospy.com/galleriffic/js/jquery.galleriffic.js】
302
302
 
303
- http://www.twospy.com/galleriffic/js/jquery.galleriffic.js
303
+ [リンク内容](http://www.twospy.com/galleriffic/js/jquery.galleriffic.js)
304
304
 
305
305
 
306
306
 

3

ご指摘いただいた点を修正いたしました。

2016/09/01 11:26

投稿

space_sss
space_sss

スコア81

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,11 @@
110
110
 
111
111
  .done(function(response) {
112
112
 
113
- $('#category').html(response);
113
+ $( '#category' ).remove();
114
+
115
+ $( '#thumbs' ).html( '<ul class="thumbs noscript" id="category">' + response + '</ul>' );
116
+
117
+ // ここで galleriffic を再実行する（ opacityrollover も）
114
118
 
115
119
  })
116
120
 
@@ -282,378 +286,26 @@
282
286
 
283
287
  ```
284
288
 
285
- ###試したこと
286
-
287
- ページは切り替わるが画像がうまく表示されませんでした。
288
-
289
- なのですべて書き換えれば何とかなるのかと思い
290
-
291
- ###gallery.phpを変更
292
-
293
- ```
294
-
295
- <?php
296
-
297
- switch($gallery[2]):
298
-
299
- case "1":
300
-
301
- ?>
302
-
303
- <div style="display: block;" class="content">
304
-
305
- <div class="slideshow-container">
306
-
307
- <div style="display: none;" id="loading" class="loader"></div>
308
-
309
- <div id="slideshow" class="slideshow"><span style="opacity: 1;" class="image-wrapper current"><a class="advance-link" rel="history" href="<?=$gallery[0]?>_01.jpg" title="<?=$gallery[2]?>" data-lightbox="gallery">&nbsp;<img src="<?=$gallery[0]?>_01.jpg" alt="<?=$gallery[0]?>"></a></span></div>
310
-
311
- </div>
312
-
313
- <div id="caption" class="caption-container"><span style="opacity: 1;" class="image-caption current"><div class="caption">
314
-
315
- <div class="image-title"><?=$n_design[2]?>01</div>
316
-
317
- <div class="image-desc">
318
-
319
- </div>
320
-
321
- </div></span></div>
322
-
323
- <div id="controls" class="controls">
324
-
325
- <div class="ss-controls">
326
-
327
- <a title="停止" href="#play" class="play">停止</a>
328
-
329
- </div>
330
-
331
- <div class="nav-controls">
332
-
333
- <a href="#5" class="prev" rel="history">前へ</a>
334
-
335
- <a href="#2" class="next" rel="history">次へ</a>
336
-
337
- </div>
338
-
339
- </div>
340
-
341
- </div>
342
-
343
- <div style="opacity: 1;" id="thumbs" class="navigation"><div class="top pagination"></div>
344
-
345
- <ul class="thumbs">
346
-
347
- <?php
348
-
349
- for($i=1; $i<=$j; $i++):
350
-
351
- $i=sprintf('%02d',$i);
352
-
353
- ?>
354
-
355
- <li class="selected" style="opacity:1;">
356
-
357
- <a rel="history" class="thumb" href="#leaf" title="<?=$gallery[1].$i?>">
358
-
359
- <img src="images/<?=$gallery[0]?>_<?=$i?>_s.jpg" alt="<?=$gallery[1].$i?>">
360
-
361
- </a>
362
-
363
- </li>
364
-
365
- <?php
366
-
367
- endfor;
368
-
369
- ?>
370
-
371
- </ul>
372
-
373
- <div class="bottom pagination"></div></div>
374
-
375
- <?php
376
-
377
- break;
378
-
379
- default:
380
-
381
- for($i=1; $i<=5; $i++):
382
-
383
- ?>
384
-
385
- <li>
386
-
387
- <a class="thumb" name="leaf" href="images/<?=$gallery[0]?>_<?=$i?>.jpg" title="<?=$gallery[1]?>">
388
-
389
- <img src="images/<?=$gallery[0]?>_<?=$i?>_s.jpg" alt="<?=$gallery[1]?>" />
390
-
391
- </a>
392
-
393
- <div class="caption">
394
-
395
- <div class="image-title"><?=$gallery[1].$i?></div>
396
-
397
- <div class="image-desc"></div>
398
-
399
- </div>
400
-
401
- </li>
402
-
403
-
404
-
405
- <?php
406
-
407
- endfor;
408
-
409
- endswitch;
410
-
411
- ?>
412
-
413
- ```
414
-
415
- ###hantei.phpを変更
416
-
417
- ```
418
-
419
- <?php
420
-
421
- $val=htmlspecialchars($_POST['val']);
422
-
423
- switch($val){
424
-
425
- case "test1":
426
-
427
- $category="テスト１です。";
428
-
429
- break;
430
-
431
- case "test2":
432
-
433
- $category="テスト２です。";
434
-
435
- break;
436
-
437
- case "test3":
438
-
439
- $category="テスト３です。";
440
-
441
- break;
442
-
443
- case "test4":
444
-
445
- $category="テスト４です。";
446
-
447
- break;
448
-
449
- default:
450
-
451
- $category="テスト５です。";
452
-
453
- }
454
-
455
- $gallery=array($val,$category,1);
456
-
457
- //戻し
458
-
459
- header('Content-type: application/text charset=utf-8');
460
-
461
- include('gallery.php');
462
-
463
- ?>
464
-
465
- ```
466
-
467
-
468
-
469
- ###test.html
470
-
471
- ```HTML
472
-
473
- <!DOCTYPE HTML>
474
-
475
- <html><head>
476
-
477
- <meta charset="utf-8">
478
-
479
- <link href="galleriffic.css" rel="stylesheet" type="text/css" media="all">
480
-
481
- <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
482
-
483
- <script type="text/javascript" src="jquery.galleriffic.js"></script>
484
-
485
- <script type="text/javascript" src="jquery.opacityrollover.js"></script>
486
-
487
- <script type="text/javascript">
488
-
489
- jQuery(document).ready(function($) {
490
-
491
- $('div.content').css('display', 'block');
492
-
493
- var onMouseOutOpacity = 0.27;
494
-
495
- $('#thumbs ul.thumbs li').opacityrollover({
496
-
497
- mouseOutOpacity: onMouseOutOpacity,
498
-
499
- mouseOverOpacity: 1.0,
500
-
501
- fadeSpeed: 'fast',
502
-
503
- exemptionSelector: '.selected'
504
-
505
- });
506
-
507
- var gallery = $('#thumbs').galleriffic({
508
-
509
- playLinkText:'停止',
510
-
511
- pauseLinkText:'再生',
512
-
513
- prevLinkText:'前へ',
514
-
515
- nextLinkText:'次へ',
516
-
517
- onSlideChange:function(prevIndex, nextIndex) {
518
-
519
- this.find('ul.thumbs').children()
520
-
521
- .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
522
-
523
- .eq(nextIndex).fadeTo('fast', 1.0);
524
-
525
- },
526
-
527
- onPageTransitionOut:function(callback) {
528
-
529
- this.fadeTo('fast', 0.0, callback);
530
-
531
- },
532
-
533
- onPageTransitionIn:function() {
534
-
535
- this.fadeTo('fast', 1.0);
536
-
537
- }
538
-
539
- });
540
-
541
- });
542
-
543
- </script>
544
-
545
- <script>
546
-
547
- function gallery(category){// Ajax通信
548
-
549
- //送信部分
550
-
551
- $.ajax({
552
-
553
- url : 'hantei.php',
554
-
555
- type : 'post',
556
-
557
- dataType : 'text',
558
-
559
- data : {
560
-
561
- val: category
562
-
563
- }
564
-
565
- })
566
-
567
- //受信部分
568
-
569
- .done(function(response) {
570
-
571
- $('#category').html(response);
572
-
573
- })
574
-
575
- .fail(function() {//エラーが起きた場合
576
-
577
- alert('通信失敗')
578
-
579
- });
580
-
581
- }
582
-
583
- </script>
584
-
585
- <title>test</title>
586
-
587
- </head>
588
-
589
- <body>
590
-
591
- <div id="gallery">
592
-
593
- <section>
594
-
595
- <h2>画像集</h2>
596
-
597
- <ul>
598
-
599
- <li onClick="gallery('test1')">テスト1</li>
600
-
601
- <li onClick="gallery('test2')">テスト2</li>
602
-
603
- <li onClick="gallery('test3')">テスト3</li>
604
-
605
- <li onClick="gallery('test4')">テスト4</li>
606
-
607
- </ul>
608
-
609
- <div class="gallery" id="category">
610
-
611
- <div class="content">
612
-
613
- <div class="slideshow-container">
614
-
615
- <div id="loading" class="loader"></div>
616
-
617
- <div id="slideshow" class="slideshow"></div>
618
-
619
- </div>
620
-
621
- <div id="caption" class="caption-container"></div>
622
-
623
- <div id="controls" class="controls"></div>
624
-
625
- </div>
626
-
627
- <div id="thumbs" class="navigation">
628
-
629
- <ul class="thumbs noscript">
630
-
631
- <?php
632
-
633
- $gallery=array("test1","テスト１です。");
634
-
635
- include('gallery.php');
636
-
637
- ?>
638
-
639
- </ul>
640
-
641
- </div>
642
-
643
- </div>
644
-
645
- </section>
646
-
647
- </div>
648
-
649
- </body>
650
-
651
- </html>
652
-
653
- ```
654
-
655
- こちらでもやはりダメでした。
656
-
657
- こちらの件を解決解決できる方はいらっしゃいませんでしょうか？
658
-
659
- お手数かけてしまいますがどうぞ宜しくお願いいたします。
289
+
290
+
291
+ プラグインへのリンクがこちらです。
292
+
293
+
294
+
295
+ 【Galleriffic | A jQuery plugin for rendering fast-performing photo galleries】
296
+
297
+ http://www.twospy.com/galleriffic/
298
+
299
+
300
+
301
+ 【http://www.twospy.com/galleriffic/js/jquery.galleriffic.js】
302
+
303
+ http://www.twospy.com/galleriffic/js/jquery.galleriffic.js
304
+
305
+
306
+
307
+ ご指摘を頂いた点を修正いたしました。
308
+
309
+ ここで galleriffic を再実行する（ opacityrollover も）とご指摘いただいたのですがどのように再実行すればよろしいのでしょうか？
310
+
311
+ 初歩的なことでお手数かけてしまいますがどうぞ宜しくお願いいたします。

2

ミス

2016/09/01 11:24

投稿

space_sss
space_sss

スコア81

test CHANGED
File without changes
test CHANGED
@@ -464,6 +464,8 @@
464
464
 
465
465
  ```
466
466
 
467
+
468
+
467
469
  ###test.html
468
470
 
469
471
  ```HTML
@@ -648,7 +650,7 @@
648
650
 
649
651
  </html>
650
652
 
651
- ---
653
+ ```
652
654
 
653
655
  こちらでもやはりダメでした。
654
656
 

1

ミス

2016/08/29 00:47

投稿

space_sss
space_sss

スコア81

test CHANGED
File without changes
test CHANGED
@@ -648,6 +648,8 @@
648
648
 
649
649
  </html>
650
650
 
651
+ ---
652
+
651
653
  こちらでもやはりダメでした。
652
654
 
653
655
  こちらの件を解決解決できる方はいらっしゃいませんでしょうか？