###前提・実現したいこと
現在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","テスト1です。"); 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="テスト1です。"; 6 break; 7 case "test2": 8 $category="テスト2です。"; 9 break; 10 case "test3": 11 $category="テスト3です。"; 12 break; 13 case "test4": 14 $category="テスト4です。"; 15 break; 16 default: 17 $category="テスト5です。"; 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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/01 10:59
2016/09/02 10:09