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="<a href='http://www.yahoo.co.jp/' target='_blank' >ヤフージャパンのページ</a>"> <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>
