<head>
<link href="jimgMenu2.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="../js/jquery-easing-compatibility.1.2.pack.js"></script>
<script src="aino-galleria-0db04e0/src/galleria.js"></script>
<script src="aino-galleria-0db04e0/src/plugins/galleria.flickr.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// find the elements to be eased and hook the hover event
$('div.jimgMenu ul li a').hover(function() {
// if the element is currently being animated
if ($(this).is(':animated')) {
$(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});
} else {
// ease in quickly
$(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(':animated')) {
$(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})
} else {
// ease out slowly
$(this).stop(':animated').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});
}
});
});
//Load theme
Galleria.loadTheme('../src/themes/classic/galleria.classic.js');
// intiialize flickr plugin
var flickr = new Galleria.Flickr('fddd7bc223fe37295faace93a4f2d8fc');
// inject a photset into galleria
flickr.getSet('72157624652720504', {
size: 'medium'
}, function(data) {
$('#galleria').galleria({
data_source:data,
thumb_crop: 'height',
image_crop: 'height'
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tile Films Gallery</title>
</head>
<body>
<div id="container">
<div id="header">
<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#">Home</a></li>
<li class="people"><a href="#">About Us</a></li>
<li class="nature"><a href="#">Productions</a></li>
<li class="abstract"><a href="#">Contact</a></li>
<li class="urban"><a href="#">Purchase</a></li>
</ul>
</div>
</div>
<div id="mainContent">
<div id="galleria"></div>
</div>
</div>
</body>
</html>