JQuery UI Tips
From QwikITedia
Contents |
Galleria + Flickr
How to suck down your images from Flickr and display them using the very magnificent Galleria jQuery based gallery
Assumptions
- You have a Flickr account
- You have atleast one Flickr photo 'set' in your flickr account with a unique Set ID(open set, and note ID in URL)
- You understand basic markup
- You have heard of jQuery and can follow basic instruction to exploit its power
Add Flickr images to Galleria
- Download Galleria
- Extract the archives contents to a folder ..for example; a folder named 'galleria'
- Get your Flickr API key
- Build a basic *.html page to hold the Galleria between some DIV tags:
<html> <head> <title>Test Flickr-Galleria</title> </head> <body> <div id="galleria"></div> </body> </html>
- For now, just add the HTML page into the same folder('galleria') as Galleria ..at same level as docs and src folders
- Add the jQuery library:
<html> <head> <title>Test Flickr-Galleria</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <div id="galleria"></div> </body> </html>
- Now add the link to the galleria magic;
<html> <head> <title>Test Flickr-Galleria</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="src/galleria.js"></script> </head> <body> <div id="galleria"></div> </body> </html>
- Now add the link to the Flickr plugin for Galleria
<html> <head> <title>Test Flickr-Galleria</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="src/galleria.js"></script> <script src="src/plugins/galleria.flickr.js"></script> </head> <body> <div id="galleria"></div> </body> </html>
- Add the Flickr specific magic inline below your galleria DIV tags
<html>
<head>
<title>Test Flickr-Galleria</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="src/galleria.js"></script>
<script src="src/plugins/galleria.flickr.js"></script>
</head>
<body>
<div id="galleria"></div>
<script type="text/javascript">
// Load theme
Galleria.loadTheme('src/themes/classic/galleria.classic.js');
var api_key = '38d2d12d9f0a49737650cb31d26be725'; // you must have a flickr API key
var flickr = new Galleria.Flickr(api_key); // initialize the plugin
// Get your photoset - each set has an ID.. check URL in Flickr for specific set ID
flickr.getSet('72157603181020473', {
size: 'medium',
description: true // set this to true to fetch flickr descriptions
}, function(data) {
$('#galleria').galleria({
data_source: data, // add the flickr data
show_imagenav: true, // the prev/next arrows
debug:true,
height: 500
});
});
</script>
</body>
</html>
- You're done!
- View the HTML file inside a browser
Troubleshooting
If your Flickr images are not showing up here are some likely causes:
- You forgot to load a theme:
Galleria.loadTheme('src/themes/classic/galleria.classic.js');
- Your API key has not been called out as a string - you omitted the quotes around it:
var api_key = 38d2d12d9f0a49737650cb31d26be725;
- Should be
var api_key = '38d2d12d9f0a49737650cb31d26be725';
- Should be
- You have omitted some semicolons:
var api_key = '38d2d12d9f0a49737650cb31d26be725'
- Should be
var api_key = '38d2d12d9f0a49737650cb31d26be725';
- Should be
- You have the wrong set ID (sometimes called Set Reference) or no quotes around it:
flickr.getSet(72157603181020473, {
- Should be
flickr.getSet('72157603181020473', {
- Should be
- You omitted the height attribute in the Options area - Without this your Galleria might not show up, this is what got me - d'oh!!
height: 500
Note
- For this to work you must have internet access
