前提・実現したいこと
jQueryの「mixitup」というプラグインを使って、ギャラリーページをつくっております。このギャラリーページではmixitupのフィルター機能を使って、アイテムの出し分けを行います。
アイテムは「a」「b」「c」の3種類があり、掲載しているギャラリーページをAとします。
別ページのBにある「c」リンクをクリックすると、Aページに移動して「c」アイテムのみが表示されるところまでは実現できました。
ただ、私の理想では、
1.Aページに移動
2.一旦はすべてのアイテムが表示される
3.アニメーションでcアイテムのみが表示される。
(アニメーションはmixitupの機能です。)
という動作にしたく、そのためにはjQueryがページ遷移後に実行されればよいと考えましたが、下記コードでは移動するとすぐにcアイテムだけが表示されます。
試行錯誤したのですが、理解不足でどうにもうまくいかず相談させていただきます。
アドバイスいただけましたら幸いです。よろしくお願いいたします。
【追記】
アドバイスいただきました通り、当該HTMLを加えました。簡略化しておりますが、こういった具合です。また、記載したjQueryはHTMLの下部で読み込んでおります「mixitup_option.js」というファイルです。
引き続きどうぞよろしくお願いいたします。
【さらに追記】
Bページの「a」「b」「c」へのリンク部分のHTMLを記載しておりませんでしたので、改めて追記しました。
該当のソースコード
↓mixitup_option.js
jQuery
1$(window).on('load', function(){ 2 3 var containerEl = document.querySelector('#gallery'); 4 5 if(document.URL.match("#a")){ 6 // URLにaが含まれる時 7 $(function(){ 8 var mixer = mixitup(containerEl, { 9 load: { 10 filter: '.a' 11 } 12 }); 13 }); 14 15 } else if(document.URL.match("#b")) { 16 // URLにbが含まれる時 17 $(function(){ 18 var mixer = mixitup(containerEl, { 19 load: { 20 filter: '.b' 21 } 22 }); 23 }); 24 25 } else if(document.URL.match("#c")) { 26 // URLにcが含まれる時 27 $(function(){ 28 var mixer = mixitup(containerEl, { 29 load: { 30 filter: '.c' 31 } 32 }); 33 }); 34 } else { 35 $(function(){ 36 var mixer = mixitup(containerEl, { 37 "animation": { 38 "duration": 250, 39 "nudge": true, 40 "reverseOut": false, 41 "effects": "fade scale(0.5) translateZ(-100px)" 42 } 43 }); 44 }); 45 } 46 47});
↓AページHTML
HTML
1<html dir="ltr" lang="ja"> 2<head> 3<meta charset="UTF-8"> 4<title>無題ドキュメント</title> 5<link rel="stylesheet" href="../css/reset.css" type="text/css" /> 6<link rel="stylesheet" href="../css/style.css" type="text/css" /> 7</head> 8<body> 9 <div class="wrapper"> 10 <section id="category"> 11 <div id="gallery"> 12 <div class="mix a">a</div> 13 <div class="mix b">b</div> 14 <div class="mix c">c</div> 15 <div class="mix a">a</div> 16 <div class="mix b">b</div> 17 <div class="mix c">c</div> 18 </div> 19 </section> 20 </div> 21</body> 22<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 23<script src="../js/mixitup.js"></script> 24<script src="../js/mixitup_option.js"></script> 25</html>
↓Bページの「a」「b」「c」へのリンク部分
HTML
1<nav> 2 <ul class="menu"> 3 <li><a href="../A.html">A</a></li> 4 <ul> 5 <li><a href="../A.html#a">a</a></li> 6 <li><a href="../A.html#b">b</a></li> 7 <li><a href="../A.html#c">c</a></li> 8 </ul> 9 <li><a href="#">B</a></li> 10 <li><a href="#">C</a></li> 11 </ul> 12</nav>
補足情報(FW/ツールのバージョンなど)
利用しているjQueryのバージョンは1.10.2です。
また、プラグインmixitupのサイトはこちらです。
https://www.kunkalabs.com/mixitup/
【最終追記】
どなたかのお役に立つことがあるかもしれないので、修正後のjQueryを記載しておきます。
jQuery
1$(function(){ 2 3 $(window).on('load', function(){ 4 5 var containerEl = document.querySelector('#gallery'), 6 mixer = mixitup(containerEl); 7 8 if(document.URL.match("#a")){ 9 // URLにaが含まれる時 10 $(function(){ 11 mixer; 12 mixer.filter('.a'); 13 }); 14 15 } else if(document.URL.match("#b")) { 16 // URLにbが含まれる時 17 $(function(){ 18 mixer; 19 mixer.filter('.b'); 20 }); 21 22 } else if(document.URL.match("#c")) { 23 // URLにcが含まれる時 24 $(function(){ 25 mixer; 26 mixer.filter('.c'); 27 }); 28 29 } else { 30 $(function(){ 31 mixer; 32 }); 33 } 34 }); 35 36});
回答1件
あなたの回答
tips
プレビュー