91 lines
No EOL
2.8 KiB
HTML
91 lines
No EOL
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jFlickrFeed Plugin</title>
|
|
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
|
|
<link href="colorbox/colorbox.css" rel="stylesheet" type="text/css" media="screen" />
|
|
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
|
<script src="colorbox/jquery.colorbox-min.js"></script>
|
|
<script src="cycle/jquery.cycle.all.min.js"></script>
|
|
<script src="jflickrfeed.min.js"></script>
|
|
<script src="setup.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<h1>jFlickrFeed Plugin</h1>
|
|
<p>This plugin makes it easy to pull Flickr feeds and display them on your site. Below are some examples that can get you thinking about its possiblities.</p>
|
|
|
|
|
|
<h3>Basic Use</h3>
|
|
<p>The photos below are being pulled from Flickr using the jFlickrFeed plugin. Here is the code that is being used:</p>
|
|
<pre>$('#basicuse').jflickrfeed({
|
|
limit: 14,
|
|
qstrings: {
|
|
id: '44802888@N04'
|
|
},
|
|
itemTemplate:
|
|
'<li>' +
|
|
'<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
|
|
'</li>'
|
|
});</pre>
|
|
<ul id="basicuse" class="thumbs"></ul>
|
|
|
|
<h3>Use with ColorBox</h3>
|
|
<p>We can use the callback to apply the colorbox plugin after the photos are loaded.</p>
|
|
<pre>$('#cbox').jflickrfeed({
|
|
limit: 14,
|
|
qstrings: {
|
|
id: '37304598@N02'
|
|
},
|
|
itemTemplate:
|
|
'<li>' +
|
|
'<a rel="colorbox" href="{{image}}" title="{{title}}">' +
|
|
'<img src="{{image_s}}" alt="{{title}}" />' +
|
|
'</a>' +
|
|
'</li>'
|
|
}, function(data) {
|
|
$('#cbox a').colorbox();
|
|
});
|
|
</pre>
|
|
<ul id="cbox" class="thumbs"></ul>
|
|
|
|
<h3>Use with Cycle</h3>
|
|
<p>Here is an example of how we can tweak the templates and make it work great with jQuery Cycle.</p>
|
|
<pre>$('#cycle').jflickrfeed({
|
|
limit: 14,
|
|
qstrings: {
|
|
id: '37304598@N02'
|
|
},
|
|
itemTemplate: '<li><img src="{{image}}" alt="" /><div>{{title}}</div></li>'
|
|
}, function(data) {
|
|
$('#cycle div').hide();
|
|
$('#cycle').cycle({
|
|
timeout: 5000
|
|
});
|
|
$('#cycle li').hover(function(){
|
|
$(this).children('div').show();
|
|
},function(){
|
|
$(this).children('div').hide();
|
|
});
|
|
});
|
|
</pre>
|
|
<ul id="cycle"></ul>
|
|
|
|
<h3>Use Without Templates</h3>
|
|
<p>It is also possible to use the plugin without the templating. Instead it would be useful to use the individual item callback:</p>
|
|
<pre>$('#nocallback').jflickrfeed({
|
|
limit: 4,
|
|
qstrings: {
|
|
id: '37304598@N02'
|
|
},
|
|
useTemplate: false,
|
|
itemCallback: function(item){
|
|
$(this).append("<li><img src='" + item.image_m + "' alt=''/></li>");
|
|
}
|
|
});</pre>
|
|
<ul id="nocallback" class="thumbs"></ul>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |