WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

フィルタリングとモーダルウィンドウを導入

jQueryプラグイン

フィルタリングとモーダルウィンドウの2つを導入する事でこういったUIを作る事が可能です。
chiyo-katsumasa.com



fancyapps.com

www.kunkalabs.com


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MixItUpとFancyBoxを合体</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<style>
.fancybox-slide--iframe .fancybox-content {
width  : 800px;
height : 600px;
max-width  : 80%;
max-height : 80%;
margin: 0;
}
</style>
</head>
<body>
<h1>MixItUpとFancyBoxを合体</h1>
<ul class="btn-set">
<li data-filter="all">全部</li>
<li data-filter=".blue">青組</li>
<li data-filter=".red">紅組</li>
<li data-filter=".yt">YouTube</li>
<li data-filter=".two">2番だけ</li>
</ul> 
<div class="garllery">
<p class="mix blue"><a href="img/01.jpg" data-fancybox><img src="img/01.jpg" alt=""></a></p>

<p class="mix blue two"><a href="img/02.jpg" data-fancybox><img src="img/02.jpg" alt=""></a></p>
<p class="mix blue"><a href="img/03.jpg" data-fancybox><img src="img/03.jpg" alt=""></a></p>
<p class="mix red"><a href="img/04.jpg" data-fancybox><img src="img/04.jpg" alt=""></a></p>
<p class="mix red two"><a href="img/05.jpg" data-fancybox><img src="img/05.jpg" alt=""></a></p>
<p class="mix red"><a href="img/06.jpg" data-fancybox><img src="img/06.jpg" alt=""></a></p>


<p class="mix yt"><a href="https://www.youtube.com/watch?v=4kVvhBiN6fM" data-fancybox><img src="img/07.jpg" alt=""></a></p>

<p class="mix yt two"><a href="https://www.youtube.com/watch?v=hE9hUig3zq8" data-fancybox><img src="img/08.jpg" alt=""></a></p>

<p class="mix yt"><a href="https://www.youtube.com/watch?v=nNEPMQQZkh8" data-fancybox><img src="img/09.jpg" alt=""></a></p>

<p class="mix yt"><a href="single-page/index.html" data-fancybox data-type="iframe"><img src="img/10.jpg" alt=""></a></p>

<p class="mix yt"><a href="season/index.html" data-fancybox data-type="iframe"><img src="img/10.jpg" alt=""></a></p>

</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/mixitup.js"></script>
<script>
var mixer=mixitup('.garllery');
</script>
<script src="js/jquery.fancybox.js"></script>
</body>
</html>