Announcing: SmugMug plugin for Galleria (Javascript image viewer)
andrewshilliday
Registered Users Posts: 10 Big grins
A while ago I had released a plugin for the flash-based gallery viewer SimpleViewer so that it would automatically populate the viewer with images from public SmugMug albums (search the forum for SmugMugViewer).
Recently, I've been trying to get away from being dependent on Flash and have therefore built a SmugMug plugin for a similar gallery viewer, Galleria (http://galleria.aino.se/). This viewer is implemented entirely in Javascript. My fork (which includes the SmugMug plugin) is available at
http://github.com/andrewshilliday/galleria
Once installed, you can insert a gallery into your webpage via the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="galleria/src/galleria.js"></script>
<script src="galleria/src/plugins/galleria.smugmug.js"></script>
<script>
// Load theme
Galleria.loadTheme('galleria/src/themes/classic/galleria.classic.js');
// intialize SmugMug plugin
var sm = new Galleria.SmugMug('[API KEY GOES HERE]');
// inject a photset into galleria
window.onload = function(){
sm.getAlbum('[ALBUM ID]','[ALBUM KEY]', {
size: 'medium'
}, function(data) {
$('#galleria').galleria({
data_source:data
});
})};
</script>
Recently, I've been trying to get away from being dependent on Flash and have therefore built a SmugMug plugin for a similar gallery viewer, Galleria (http://galleria.aino.se/). This viewer is implemented entirely in Javascript. My fork (which includes the SmugMug plugin) is available at
http://github.com/andrewshilliday/galleria
Once installed, you can insert a gallery into your webpage via the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="galleria/src/galleria.js"></script>
<script src="galleria/src/plugins/galleria.smugmug.js"></script>
<script>
// Load theme
Galleria.loadTheme('galleria/src/themes/classic/galleria.classic.js');
// intialize SmugMug plugin
var sm = new Galleria.SmugMug('[API KEY GOES HERE]');
// inject a photset into galleria
window.onload = function(){
sm.getAlbum('[ALBUM ID]','[ALBUM KEY]', {
size: 'medium'
}, function(data) {
$('#galleria').galleria({
data_source:data
});
})};
</script>
0
Comments
Thanks! I got it up and running on my new blog: http://www.affinityportraiture.com/portfolio/
Is your code going to be updated with new Galleria updates?
Also, is there a reason you capped the fetch to only 40 images?
/// www.affinityseattle.com /// <-yes, you want to check that out.
Want faster uploading? Vote for FTP!
You can change the number to whatever you want by editing the source.
/// www.affinityseattle.com /// <-yes, you want to check that out.
Also, what about videos? Many of my galleries have these as well.
Want faster uploading? Vote for FTP!
SmugMug API Developer
My Photos
I bet you could probably do 2000 images, but you'd have to consider your audience... who's gonna click through 2000 images in a linear fashion? (suppose you could upgrade the galleria skin to the one that shows the thumbnail grid overlay, but still...) I have it pulling in about 200 right now on another site. Not sure about video. I'd say NO to video simply based on the Galleria website. If it was a feature, they'd surely demonstrate it prominently.
/// www.affinityseattle.com /// <-yes, you want to check that out.
Want faster uploading? Vote for FTP!
Samir,
My code is different from Andrew's in so far that it makes less and lighter api calls...so it should be nicer from an end user perspective.
In regard to video, I believe that would require major changes to the galleria framework. Right now, it will just display the associated still image of the video.
Cheers,
David
SmugMug API Developer
My Photos
Want faster uploading? Vote for FTP!
NICE! Can't wait to change over. Devbobo, you a jquery guy? I'd like to learn how to pull data from multiple galleries and mash it all into 'data' to load into galleria (and do a .sort() to randomize it maybe).
www.seanhoytphoto.com
/// www.affinityseattle.com /// <-yes, you want to check that out.
You could also easily mash galleries that way to do a randomizer.
Nothing against JS but I personally rather do certain things server side if they can be done easily rather than client side.
Joi Cohen-Haroun
Website :: Facebook :: Twitter
I wouldn't recommend doing this on the client side...a much easier approach would be to use a smart gallery to merge any existing galleries, keywords etc into a single gallery...which galleria then retrieves the images from.
SmugMug API Developer
My Photos
Reason I'm asking is that I plan to extend this a bit to allow my visitors to choose keywords to load into the gallery. So, it would get out of control pretty quickly if I created a collection for each permutation.... Is there a way to specify keywords versus a gallery ID/Key and have the SM server send me the data?
5 keywords = 126 smart galleries necessary
Hmm... I don't see anything in the API for this. You concur?
/// www.affinityseattle.com /// <-yes, you want to check that out.
I'm having trouble with the new SM code. Is it supposed to drop in and use the same calls as andrewshilliday's?
I get an "unexpected identifier" on line 32 when it gets to AlbumID.
/// www.affinityseattle.com /// <-yes, you want to check that out.
should be fixed now
SmugMug API Developer
My Photos
getting: "Unexpected token }" line 34
wish I could help...
/// www.affinityseattle.com /// <-yes, you want to check that out.
my bad, sorry didn't test it
working now
SmugMug API Developer
My Photos
line 72: var photos = data.Album.Images
got it workin: http://www.seanhoyt.com/ (just need to clean up the markup)
Thanks!
/// www.affinityseattle.com /// <-yes, you want to check that out.
looking in firefbug, it appears I'm accessing the smugmug api fine and getting a json response back with photo urls, so I think that part's working ok. however, I can't get galleria to load the images and do its magic.
help? pointers? example code?
thanks in advance for any help.
DevBobo, I agree Galleria is probably just a photo viewer (and therefore would require significant modification to become a video player - I really don't know though)... BUT, is it at all possible to have a yes/no switch to exclude video preview images? In other words, just have Galleria as a photo viewer? That would be SOOO helpful.
Thanks!
-Cliff
-I know it's not slick (wouldn't allow multiple galleries on a page), but I'm just looking for ANY way to pull in SmugMug into WordPress and display with Galleria. I'm surprised it has been so difficult.
-I'm also thinking a solution like http://wordpress.org/extend/plugins/photographer-connections/ would accomplish Step 1 - now, how to get Galleria to use that info? (or from another plugin, like the SmugMug RSS ones)
:bluduh BECAUSE, having to code the jQuery/javascript/whatever for Galleria into the template would mean each gallery would need to be a different template - yikes!
I'm in the same boat. Is this something that can be embedded easily in a smugmug gallery with some copy/pasting or is there a lot more to it than that? I tried the old simpleviewer thing and it worked but the photos were way too small, and I would also like to get away from flash.
http://blog.timkphotography.com
Im a jquery novice, just got galleria installed, and using the smugmug plugin, but its not working. Is the code correct? Also, can I not use this Dreamweaver, do I have to customize my smugmug page for this to work? Thanks in advance!
Trying to load this album: http://naveedahmad.smugmug.com/Weddings/bob/20068337_Jdxtk8#1582532440_SRWsL37
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Photography SITE</title>
</head>
<body>
<div id="galleria"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="galleria/galleria.js"></script>
<script src="galleria/plugins/galleria.smumug.js"></script>
<script>
// Load theme
Galleria.loadTheme('galleria/themes/classic/galleria.classic.js');
// intialize SmugMug plugin
var sm = new Galleria.SmugMug('1a734cc49ed7cce3c7460bcd2565d8d3');
// inject a photset into galleria
window.onload = function(){
sm.getAlbum('20068337','Jdxtk8', {
size: 'medium'},
function(data) {
$('#galleria').galleria({
data_source: data,
width: 500,
height: 500
});
})};
</script>
</body>
</html>