Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
75 lines (69 sloc) 2.27 KB
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery fancy transition plugin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.jqfancytransitions.js"></script>
<script>
$(function(){
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?', function(data) {
// example 1
$.each(data.items, function(i, item) {
$('<img />', {
src: item.media.m
}).appendTo('#test');
});
$.each(data.items, function(i, item) {
$('<img />', {
src: item.media.m
}).appendTo('#test2');
});
$('#test').jqFancyTransitions({
width: 400,
height: 300,
position: 'top',
direction: 'right'
});
$('#test2').jqFancyTransitions({
width: 400,
height: 300,
horizontal: true,
position: 'right',
direction: 'top',
strips: 5
});
});
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
#main {
margin: 0 auto;
width: 900px;
}
h2 {
margin-top: 20px;
}
ul li {
float: left;
list-style-type: none;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="main">
<h1>jQuery slider plugin</h1>
<h2>Example 1:</h2>
<div id="test"></div>
<h2>Example 2:</h2>
<div id="test2"></div>
</div>
</body>
</html>