結果を表示する
元にもどす
<html lang="ja"> <meta charset="utf-8"> <meta name="viewport"content="width=device-width,initial-scale=1.0"> <link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"> <style> html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%;}*,::before,::after{background-repeat:no-repeat;box-sizing:inherit;}h1{text-align:center;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;margin:30px 0;}p{margin:0 10px 10px 10px;word-wrap :break-word;}::before,::after{text-decoration:inherit;vertical-align:inherit;}*{padding:0;margin:0;}audio:not([controls]){display:none;height:0;}hr{overflow:visible;}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block;}summary{display:list-item;}small{font-size:50%;}[hidden],template{display:none;}abbr[title]{border-bottom:1px dotted;text-decoration:none;}a{background-color:transparent;-webkit-text-decoration-skip:objects;}a:集合,a:hover{outline-width:0;}code,kbd,pre,samp{font-family:monospace, monospace;}b,strong{font-weight:bolder;}dfn{font-style:italic;}mark{background-color:#ffff00;color:#000000;}sub,sup{font-size:50%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}input{border-radius:0;}button,[type="button"],[type="reset"],[type="submit"],[role="button"]{cursor:pointer;}[disabled]{cursor:default;}[type="number"]{width:auto;}[type="search"]{-webkit-appearance:textfield;}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;resize:vertical;}button,input,optgroup,select,textarea{font:inherit;}optgroup{font-weight:bold;}button{overflow:visible;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:0;padding:0;}button:-moz-focusring,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{outline:1px dotted ButtonText;}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button,select{text-transform:none;}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit;}select{-moz-appearance:none;-webkit-appearance:none;}select::-ms-expand{display:none;}select::-ms-value{color:currentColor;}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}img{border-style:none;}progress{vertical-align:baseline;}svg:not(:root){overflow:hidden;}audio,canvas,progress,video{display:inline-block;}@media screen{[hidden~="screen"]{display:inherit;}[hidden~="screen"]:not(:集合):not(:focus):not(:target){position:absolute !important;clip:rect(0 0 0 0) !important;}}[aria-busy="true"]{cursor:progress;}[aria-controls]{cursor:pointer;}[aria-disabled]{cursor:default;}::-moz-selection{background-color:#b3d4fc;color:#000000;text-shadow:none;}::selection{background-color:#abcdef;color:#000000;text-shadow:none;}@charset "utf-8";.ぼたん{background:#f4f4f4;padding:20px;margin:0 0 20 0;display:flex;justify-content:center;flex-wrap:wrap;}.ぼたん dt{font-weight:bold;margin:0 0 10px 0;}.ぼたん dd{margin:0 0 10px 0;font-size:16px;}.ぼたん ul{display:flex;flex-wrap:wrap;}.ぼたん li{margin:0 10px;}.ぼたん ul li{position:relative;cursor:pointer;padding:0 0 0 30px;margin:0 10px 0 0;}@media only screen and (max-width:810px){.ぼたん li{width:100%;margin:10;}.ぼたん ul li{width:auto;}}.ぼたん ul li::before{content:'';position:absolute;left:0;width:20px;height:20px;border:2px solid #ccc;}.ぼたん ul li.集合::after{content:'';position:absolute;left:5px; top:0;border-left:2px solid #333;border-bottom:2px solid #333;width:16px;height:9px;transform:rotate(-45deg);}.写真{position:relative;}.レイアウト{display:block;position:absolute;width:30%;padding:0 8px 8px 8px;z-index:1;}.オール{position:relative;width:100%;height:100%;}.写真 img{width:100%;height:auto;vertical-align:bottom;}@media only screen and (max-width:768px){.レイアウト{width:40%;padding:0 4px 8px 4px;}}.fancybox-thumbs{background:transparent!important;}.fancybox-thumbs__list a:before{border:6px solid #123456;}ul{margin:0;padding:0;list-style:none;}a{color:#000000;}a:hover,a:集合{text-decoration:none;} </style> <ul class="ぼたん"> <li> <dl> <dt>All</dt> <dd> <ul> <li class="おーる 集合"></li> </ul> </dd> </dl> </li> <li><dl><dt>Modes</dt> <dd><ul> <li class="チャーチ">Church Mode </li> <li class="ハーモニック_マイナー">Mode of Harmonic minor</li> <li class="ジャズ_マイナー">Mode of Jazz minor</li> <li class="ディミニッシュ">Combination Of Diminished</li> <li class="アザー">Others</li> </ul></dd> </dl></li> </ul> <ul class="写真"> <!----1----><li class="レイアウト チャーチ"> <div class="オール"><a href="01.jpg"data-fancybox="group"data-caption="キャプション"><img src="01.jpg"></a></div> </li> <!----2----><li class="レイアウト チャーチ"> <div class="オール"><a href="02.jpg"data-fancybox="group"data-caption="キャプション"><img src="02.jpg"></a></div> </li> <!----3----><li class="レイアウト チャーチ"> <div class="オール"><a href="03.jpg"data-fancybox="group"data-caption="キャプション"><img src="03.jpg"></a></div> </li> <!----4----><li class="レイアウト アザー"> <div class="オール"><a href="04.jpg"data-fancybox="group"data-caption="キャプション"><img src="04.jpg"></a></div> </li> <!----5----><li class="レイアウト アザー"> <div class="オール"><a href="05.jpg"data-fancybox="group"data-caption="キャプション"><img src="05.jpg"></a></div> </li> <!----6----><li class="レイアウト チャーチ"> <div class="オール"><a href="06.jpg"data-fancybox="group"data-caption="キャプション"><img src="06.jpg"></a></div> </li> <!----7----><li class="レイアウト ジャズ_マイナー"> <div class="オール"><a href="07.jpg"data-fancybox="group"data-caption="キャプション"><img src="07.jpg"></a></div> </li> <!----8----><li class="レイアウト ディミニッシュ"> <div class="オール"><a href="08.jpg"data-fancybox="group"data-caption="キャプション"><img src="08.jpg"></a></div> </li> <!----9----><li class="レイアウト チャーチ ディミニッシュ"> <div class="オール"><a href="09.jpg"data-fancybox="group"data-caption="キャプション"><img src="09.jpg"></a></div> </li> <!----10----><li class="レイアウト ハーモニック_マイナー ディミニッシュ"> <div class="オール"><a href="10.jpg"data-fancybox="group"data-caption="キャプション"><img src="10.jpg"></a></div> </li> <!----11----><li class="レイアウト ジャズ_マイナー"> <div class="オール"><a href="11.jpg"data-fancybox="group"data-caption="キャプション"><img src="11.jpg"></a></div> </li> <!----12----><li class="レイアウト ハーモニック_マイナー ジャズ_マイナー"> <div class="オール"><a href="12.jpg"data-fancybox="group"data-caption="キャプション"><img src="12.jpg"></a></div> </li> <!----13----><li class="レイアウト チャーチ"> <div class="オール"><a href="13.jpg"data-fancybox="group"data-caption="キャプション"><img src="13.jpg"></a></div> </li> <!----14----><li class="レイアウト ハーモニック_マイナー ジャズ_マイナー"> <div class="オール"><a href="14.jpg"data-fancybox="group"data-caption="キャプション"><img src="14.jpg"></a></div> </li> <!----15----><li class="レイアウト ディミニッシュ"> <div class="オール"><a href="15.jpg"data-fancybox="group"data-caption="キャプション"><img src="15.jpg"></a></div> </li> <!----16----><li class="レイアウト ハーモニック_マイナー ジャズ_マイナー"> <div class="オール"><a href="16.jpg"data-fancybox="group"data-caption="キャプション"><img src="16.jpg"></a></div> </li> <!----17----><li class="レイアウト ディミニッシュ"> <div class="オール"><a href="17.jpg"data-fancybox="group"data-caption="キャプション"><img src="17.jpg"></a></div> </li> </ul> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://unpkg.com/web-animations-js@2.3.2/web-animations.min.js"></script> <script src="https://unpkg.com/muuri@0.8.0/dist/muuri.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> <script> $(window).on("load",function() {画像=new Muuri(".写真",{showDuration:600,showEasing: "cubic-bezier(0.215,0.61,0.355,1)", hideDuration:600,hideEasing:"cubic-bezier(0.215,0.61,0.355,1)", visibleStyles:{opacity:"1",transform:"scale(1)"}, hiddenStyles:{opacity:"0",transform:"scale(0.5)"}}); $(".ぼたん ul li").on("click",function() {組み合わせ=$(this).attr("class") 組み合わせ=組み合わせ.split(" "); if($(this).hasClass("集合")) {if(組み合わせ[0]!="おーる") {$(this).removeClass("集合"); 選択=$(".ぼたん ul li.集合"); if(選択.length==0) {$(".ぼたん ul li.おーる").addClass("集合"); 画像.show("");} else {そーと();}}} else {if(組み合わせ[0]=="おーる") {$(".ぼたん ul li").removeClass("集合"); $(this).addClass("集合"); 画像.show("");} else {if($(".おーる").hasClass("集合")) {$(".ぼたん ul li.おーる").removeClass("集合");} $(this).addClass("集合"); そーと();}}}); function そーと() {選択=$(".ぼたん ul li.集合"); 順番=[]; $.each(選択,function(index,selectElm) {組み合わせ=$(this).attr("class") 組み合わせ=組み合わせ.split(" "); 順番.push("."+組み合わせ[0]);}) 文字列=順番.join(","); 画像.filter(文字列);}}); </script> </html>