<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<!--共通で使用するCSSを読み込む-->
<link rel="stylesheet" type="text/css" href="">
<!--共通で使用するjQueryを読み込む-->
<script src="js/jquery-1.11.3.js"></script>
<!-- ｊQueryUIを読み込む-->
<script src="js/ui/jquery-ui.js"></script>
<!--jQuery(flowerNav)を使用するために
必要なCSS,JSファイルを読み込む-->
<link rel="stylesheet" type="text/css"
href="js/flowernav.css">
<script src="js/jquery.flowernav-1.0.js"></script>
<style>
*{margin:0;padding:0}
p {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:16px;
}
#container{}
</style>
</head>
<body>
<div id="container">
<nav id="flash">
<ul>
<!-- link used as button by default .btn -->
<li><a href="#flash" class="btn my_button">click!</a>
<!-- second level link will be used as childs -->
<ul>
<li><a href="#"><img src="img/CL004.JPG" width="100" height="100" ></a></li>
<li><a href="#"><img src="img/CL005.JPG" width="100" height="100" ></a></li>
<li><a href="#"><img src="img/CL006.JPG" width="100" height="100" ></a></li>
<li><a href="#"><img src="img/CL007.JPG" width="100" height="100" ></a></li>
<li><a href="#"><img src="img/CL009.JPG" width="100" height="100" ></a></li>
<li><a href="#"><img src="img/CL010.JPG" width="100" height="100" ></a></li>
<li><a href="#"><img src="img/CL012.JPG" width="100" height="100" ></a></li>
<li><a href="#"><img src="img/CL019.JPG" width="100" height="100" ></a></li>
</ul>
</li>
</ul>
</nav>
</div>
<script>
$(document).ready(function() {
// no option initialisation, with dragging off and default settings (clockwise rotation)
$('#nav').flowernav();
// dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com
$('#nav').flowernav({drag:true});
// initial callback function possible after plugin is invoked
$('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} );
// all of the default settings
$('#flash').flowernav({
radiusX : 140, // radius of x axis in px, default: 110
radiusY : 110, // radius of y axis in px, default: 110
rotate : true, // rotate items in a circle, default: true
direction : 'ccw', // counter clockwise rotation, default: clockwise
speed : 1, // speed inverse proportional 1 = fastest, default: 3
oSpeed : 1000, // speed of opening animation in ms, default: 500
cSpeed : 400, // speed of closing animation in ms, default: 400
easingOpen : 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
easingClose : 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
hoverStop : true, // does stop the animation on item hover, default: true
hoverOpacityIn : 1, // hover opacity of li's, default: 1
hoverOpacityOut : .4, // opacity of li's , default: .5
hoverSpeedIn : 100, // speed of hover toggle opacity animation in ms, default: 600
hoverSpeedOut : 700, // speed of hover-out toggle opacity animation in ms, default: 600
intv : 10, // rotation interval time in ms, default: 10
offset : 45, // offset in circle in degrees, default: 0
drag : true, // requires jquery ui plugin to function, default: false
// callbacks
btnClass : '.btn',
onOpenStart : function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation
onOpenEnd : function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation
onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation
onCloseEnd : function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation
});
});
</script>
</body>
</html>
