ajaxとjQueryのgallerifficの組み合わせで困っています。

###前提・実現したいこと
現在gallerifficのjQueryを使用しています。
その際ページをカテゴリわけをして表示させています。
カテゴリページを切り替える際ajaxを使いページ切り替えをしたいと考えています。
ですがうまく動きません…
###test.html

HTML
1<!DOCTYPE HTML>
2<html><head>
3<meta charset="utf-8">
4<link href="galleriffic.css" rel="stylesheet" type="text/css" media="all">
5<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
6<script type="text/javascript" src="jquery.galleriffic.js"></script>
7<script type="text/javascript" src="jquery.opacityrollover.js"></script>
8<script type="text/javascript">
9 jQuery(document).ready(function($) {
10  $('div.content').css('display', 'block');
11  var onMouseOutOpacity = 0.27;
12  $('#thumbs ul.thumbs li').opacityrollover({
13  mouseOutOpacity:onMouseOutOpacity,
14  mouseOverOpacity:1.0,
15  fadeSpeed:'fast',
16  exemptionSelector:'.selected'
17 });
18  var gallery = $('#thumbs').galleriffic({
19  playLinkText:'停止',
20  pauseLinkText:'再生',
21  prevLinkText:'前へ',
22  nextLinkText:'次へ',
23  onSlideChange: function(prevIndex, nextIndex) {
24   this.find('ul.thumbs').children()
25    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
26    .eq(nextIndex).fadeTo('fast', 1.0);
27   },
28  onPageTransitionOut:function(callback) {
29   this.fadeTo('fast', 0.0, callback);
30  },
31  onPageTransitionIn:function() {
32   this.fadeTo('fast', 1.0);
33  }
34 });
35});
36</script>
37<script>
38function gallery(category){// Ajax通信
39//送信部分
40	$.ajax({
41		url : 'hantei.php',
42		type : 'post',
43		dataType : 'text',
44		data : {
45			val: category
46		}
47	})
48//受信部分
49	.done(function(response) {
50		$( '#category' ).remove();
51		$( '#thumbs' ).html( '<ul class="thumbs noscript" id="category">' + response + '</ul>' );
52		// ここで galleriffic を再実行する（ opacityrollover も）
53	})
54	.fail(function() {//エラーが起きた場合
55		alert('通信失敗')
56	});
57}
58</script>
59<title>test</title>
60</head>
61<body>
62<div id="gallery">
63<section>
64	<h2>画像集</h2>
65	<ul>
66		<li onClick="gallery('test1')">テスト1</li>
67		<li onClick="gallery('test2')">テスト2</li>
68		<li onClick="gallery('test3')">テスト3</li>
69		<li onClick="gallery('test4')">テスト4</li>
70	</ul>
71	<div class="gallery">
72		<div class="content">
73			<div class="slideshow-container">
74				<div id="loading" class="loader"></div>
75				<div id="slideshow" class="slideshow"></div>
76			</div>
77			<div id="caption" class="caption-container"></div>
78			<div id="controls" class="controls"></div>
79		</div>
80		<div id="thumbs" class="navigation">
81			<ul class="thumbs noscript" id="category">
82<?php
83$gallery=array("test1","テスト１です。");
84include('gallery.php');
85?>
86			</ul>
87		</div>
88	</div>
89</section>
90</div>
91</body>
92</html>

###gallery.php

PHP
1<?php
2    for($i=1; $i<=5; $i++):
3?>
4 							<li>
5								<a class="thumb" name="leaf" href="<?=$gallery[0]?>_<?=$i?>.jpg" title="<?=$gallery[1]?>">
6									<img src="<?=$gallery[0]?>_<?=$i?>_s.jpg" alt="<?=$gallery[1]?>" />
7								</a>
8								<div class="caption">
9									<div class="image-title"><?=$gallery[1].$i?></div>
10									<div class="image-desc"></div>
11								</div>
12							</li>
13<?php
14    endfor;
15?>

###hantei.php

PHP
1<?php
2$val=htmlspecialchars($_POST['val']);
3	switch($val){
4		case "test1":
5			$category="テスト１です。";
6			break;
7		case "test2":
8			$category="テスト２です。";
9			break;
10		case "test3":
11			$category="テスト３です。";
12			break;
13		case "test4":
14			$category="テスト４です。";
15			break;
16		default:
17			$category="テスト５です。";
18	}
19$gallery=array($val,$category,1);
20//戻し
21header('Content-type: application/text charset=utf-8');
22include('gallery.php');
23?>

プラグインへのリンクがこちらです。

Galleriffic | A jQuery plugin for rendering fast-performing photo gallerie

http://www.twospy.com/galleriffic/js/jquery.galleriffic.js

ご指摘を頂いた点を修正いたしました。
ここで galleriffic を再実行する（ opacityrollover も）とご指摘いただいたのですがどのように再実行すればよろしいのでしょうか？
初歩的なことでお手数かけてしまいますがどうぞ宜しくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

下記部分でgallerifficのイベント類を登録した要素を上書きしているため、正しく動かないと思います。（上書きされた要素はイベントが設定されていない状態です）

JavaScript
1//受信部分
2.done( function( response ) {
3	$( '#category' ).html( response );
4} )

galleriffic には appendImage や removeImage で要素を追加／削除する方法もありますが、要素を全削除してしまい、それからgalleriffic を再実行するのが早いと思います。

JavaScript
1//受信部分
2.done( function( response ) {
3	$( '#category' ).remove();
4	$( '#thumbs' ).html( '<ul class="thumbs noscript" id="category">' + response + '</ul>' );
5	// ここで galleriffic を再実行する（ opacityrollover も）
6} )

プラグインへのリンクが質問文に無いのですが、多分これのことだと思います。

【Galleriffic | A jQuery plugin for rendering fast-performing photo galleries】
http://www.twospy.com/galleriffic/

【http://www.twospy.com/galleriffic/js/jquery.galleriffic.js】
http://www.twospy.com/galleriffic/js/jquery.galleriffic.js

投稿2016/08/31 16:42

編集2016/08/31 16:45

kei344

総合スコア69398

space_sss

2016/09/01 10:59

ご回答ありがとうございます。プラグインリンクを貼り忘れていました。。。お手数おかけします。 // ここで galleriffic を再実行する（ opacityrollover も）と記載がごございますがそちらはどの手段で行うのがよろしいでしょうか？再実行といたやり方がわかりません。。。初心者で質問ばかりで大変申し訳ありません。。。

kei344

2016/09/02 10:09

> 初心者個人的なことなので、他の方はどうかはわかりませんが、「初心者」と宣言されたほうが厳しく当たる必要を感じるので、「自分で考えろ、それも修行です」と返したくなります。質問フォームのタイトル横にある初心者マークを押すことで「初心者である」ということはわかりますので、本文／コメントに「初心者」と書かなくても大丈夫です。 > 再実行書かれているコードでは、jQuery(document).ready(function($) {}); の中で行っている処理をもう一度行えばよいという意味です。中身を関数化して、「// ここで」の部分で実行する感じでしょうか。

行動規範の内容に同意します