WEBサイト制作の勉強

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

fraemwork.jsのカスタマイズ

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>framework.jsを使ったデモページ</title>
<link href="css/screen.css" rel="stylesheet">
<link href="css/caption.css" rel="stylesheet">
<link href="source/jquery.fancybox.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/framework.js"></script>
<script src="source/jquery.fancybox.js"></script>
<script src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script>
$(document).ready(function() {
    $(".single").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });
});

$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});

$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 1200,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '120%',
		autoSize	: false,
		closeClick	: false,
	    scrolling    : 'no',
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});

$(document).ready(function() {
	$(".fancybox-thumb").fancybox({
		prevEffect	: 'none',
		nextEffect	: 'none',
		helpers	: {
			title	: {
				type: 'outside'
			},
			thumbs	: {
				width	: 50,
				height	: 50
			}
		}
	});
});
</script>

<!--[if lt IE 7]>
<link href="css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen,projection" />
<![endif]-->
</head>

<body>

<div id="container">
<h1></h1>
<ul id="filter">
<li class="current"><a href="#" rel="all">全部</a></li>
<li><a href="#" rel="red">赤いもの</a></li>
<li><a href="#" rel="green">緑のもの</a></li>
<li><a href="#" rel="yellow">黄色いもの</a></li>
<li><a href="#" rel="fruits">くだもの</a></li>
<li><a href="#" rel="web">Web制作</a></li>
</ul>

<ul id="portfolio" class="list">
<li class="red" id="figure"><a class="single" href="img/01.jpg" title="&lt;a href=&#x27;http://www.yahoo.co.jp/&#x27; target=&#x27;_blank&#x27; &gt;ヤフージャパンのページ&lt;/a&gt;">
		<img src="img/01_s.jpg" alt="">
		<div id="cap-one">
		<h3>赤っぽい赤</h3>
		<p>ホバーするとキャプションが出て来ます。</p>
		</div>
		</a></li>
    
<li class="red" id="figure2">
<a class="single" rel="gallery1" href="img/02.jpg">
<img src="img/02_s.jpg" alt="">
<div id="cap-two">
<h3>真っ赤</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</a>
</li>

<li class="red fruits"><a  class="single" href="img/03.jpg"><img src="img/03_s.jpg" alt="">りんごっぽい赤</a></li>
    
<li class="green"><a  class="fancybox" rel="gallery1" href="img/04.jpg"><img src="img/04_s.jpg" alt=""></a></li>
    
<li class="green fruits"><a class="fancybox" rel="gallery1" href="img/05.jpg"><img src="img/05_s.jpg" alt="">TPC Sawgrass</a></li>
    
<li class="green"><a class="fancybox" rel="gallery1" href="img/06.jpg"><img src="img/06_s.jpg" alt="">Pebble Beach Golf Links</a></li>
    
<li class="yellow fruits"><a class="fancybox" rel="gallery1" href="img/07.jpg"><img src="img/07_s.jpg" alt="">Royal Lytham and St.</a></li>

<li class="yellow"><a class="fancybox" rel="gallery1" href="img/08.jpg"><img src="img/08_s.jpg" alt="">The Homestead Golf Course</a></li>
    
<li class="yellow"><a class="fancybox" rel="gallery1" href="img/09.jpg"><img src="img/09_s.jpg" alt="">Turnberry</a></li>

<li class="web"><a class="various" data-fancybox-type="iframe" href="https://www.youtube.com/embed/y6Sxv-sUYtM"><img src="img/10_s.jpg" alt="">Turnberry</a></li>
      
<li class="web"><a class="various" href="img/slot.swf"><img src="img/11_s.jpg" alt="">Turnberry</a></li>
    
<li class="web"><a class="various fancybox.iframe" href="http://efgraphics.net/"><img src="img/12_s.jpg" alt="">Turnberry</a></li>
</ul>
</div>
</body>
</html>