Announcing: SmugMug plugin for Galleria (Javascript image viewer)

andrewshillidayandrewshilliday Registered Users Posts: 10 Big grins
edited August 31, 2012 in SmugMug API Support & Integrations
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&gt;
<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>

Comments

  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 12, 2011
    using Galleria + Smugmug
    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?
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited March 18, 2011
    Very interesting. I was looking for something like this quite a while ago. If it is capped to 40 images, it won't work for me. Also, how does it handle videos?
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 18, 2011
    SamirD wrote: »
    Very interesting. I was looking for something like this quite a while ago. If it is capped to 40 images, it won't work for me. Also, how does it handle videos?

    You can change the number to whatever you want by editing the source.
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited March 19, 2011
    Would there be a technical limit of any sort? Could it handle 2000 images?

    Also, what about videos? Many of my galleries have these as well.
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • devbobodevbobo Registered Users, Retired Mod Posts: 4,339 SmugMug Employee
    edited March 21, 2011
    I forked Andrew's project and updated the SmugMug code to use our latest API version since it simplifies a few things. I have requested that Andrew pulls my changes, but until that happens. You can get the latest galleria.smugmug.js ... https://github.com/devbobo/galleria
    David Parry
    SmugMug API Developer
    My Photos
  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 21, 2011
    SamirD wrote: »
    Would there be a technical limit of any sort? Could it handle 2000 images?

    Also, what about videos? Many of my galleries have these as well.

    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.
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited March 21, 2011
    How does your version handle videos? Would it be any differently than Andrew's version?
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • devbobodevbobo Registered Users, Retired Mod Posts: 4,339 SmugMug Employee
    edited March 21, 2011
    SamirD wrote: »
    How does your version handle videos? Would it be any differently than Andrew's version?

    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
    David Parry
    SmugMug API Developer
    My Photos
  • SamirDSamirD Registered Users Posts: 3,474 Major grins
    edited March 21, 2011
    devbobo wrote: »
    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
    Thank you for the reply. I'm glad to hear that it will work similarly to the current flash slideshow I use on my site. Would your script have any problem handling a large number of images in a gallery, say 2000?
    Pictures and Videos of the Huntsville Car Scene: www.huntsvillecarscene.com
    Want faster uploading? Vote for FTP!
  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 21, 2011
    devbobo wrote: »
    I forked Andrew's project and updated the SmugMug code to use our latest API version since it simplifies a few things. I have requested that Andrew pulls my changes, but until that happens. You can get the latest galleria.smugmug.js ... https://github.com/devbobo/galleria

    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
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • JoiJoiJoiJoi Registered Users Posts: 108 Major grins
    edited March 21, 2011
    Another alternative with galleria is using the php api to load the images from smugmug into galleria without the need for an extra-plugin.

    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
  • devbobodevbobo Registered Users, Retired Mod Posts: 4,339 SmugMug Employee
    edited March 21, 2011
    seanhoytphoto wrote: »
    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

    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.
    David Parry
    SmugMug API Developer
    My Photos
  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 22, 2011
    devbobo wrote: »
    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.

    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?
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 25, 2011
    devbobo wrote: »
    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

    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.
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • devbobodevbobo Registered Users, Retired Mod Posts: 4,339 SmugMug Employee
    edited March 25, 2011
    seanhoytphoto wrote: »
    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.

    should be fixed now
    David Parry
    SmugMug API Developer
    My Photos
  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 25, 2011
    devbobo wrote: »
    should be fixed now

    getting: "Unexpected token }" line 34

    wish I could help...
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • devbobodevbobo Registered Users, Retired Mod Posts: 4,339 SmugMug Employee
    edited March 25, 2011
    seanhoytphoto wrote: »
    getting: "Unexpected token }" line 34

    wish I could help...

    my bad, sorry didn't test it :D

    working now
    David Parry
    SmugMug API Developer
    My Photos
  • seanhoytphotoseanhoytphoto Registered Users Posts: 31 Big grins
    edited March 25, 2011
    devbobo wrote: »
    my bad, sorry didn't test it :D

    working now

    line 72: var photos = data.Album.Images

    got it workin: http://www.seanhoyt.com/ (just need to clean up the markup)

    Thanks!
    \\\ Sean Hoyt \\\
    /// www.affinityseattle.com /// <-yes, you want to check that out.
  • sidepocketsidepocket Registered Users Posts: 67 Big grins
    edited March 31, 2011
    I guess I don't completely understand. How do I "install" this onto my smugmug gallery?
  • surrattasurratta Registered Users Posts: 1 Beginner grinner
    edited May 19, 2011
    just found this thread. so far I'm unable to get my code working with the devbobo smugmug plugin. I'm a jquery novice, so that's not a big surprise. I tried the example code at the top of this thread, but without success. as it predates the devbobo version, though, it's not clear to me whether it's supposed to Just Work.

    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.
  • TourKickTourKick Registered Users Posts: 6 Big grins
    edited June 16, 2011
    Exclude Video Preview Images
    devbobo wrote: »
    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

    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
  • TourKickTourKick Registered Users Posts: 6 Big grins
    edited July 7, 2011
    JoiJoi wrote: »
    Another alternative with galleria is using the php api to load the images from smugmug into galleria without the need for an extra-plugin.

    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.

    ne_nau.gif Since the jQuery Galleria version (i.e. the topic of this post) requires entering the API, which is viewable under "view source", is that a security issue?

    ear.gif I'd REALLY like more information about your PHP possibility. I'm guessing the API key wouldn't be displayed via "view source".

    bowdown.gif What I'm trying to do is have a WordPress page/post with 2 custom fields where you enter "galleryID" and "galleryKEY". Then, the theme/template has some PHP or other code that says "if this page/post has custom_field_gallery_id not null AND custom_field_gallery_key not null, then DO GALLERIA, displaying that gallery.
    -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!
  • Tim KamppinenTim Kamppinen Registered Users Posts: 816 Major grins
    edited July 26, 2011
    sidepocket wrote: »
    I guess I don't completely understand. How do I "install" this onto my smugmug gallery?

    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://www.timkphotography.com
    http://blog.timkphotography.com
  • naveed617naveed617 Registered Users Posts: 1 Beginner grinner
    edited November 13, 2011
    need help using the galleria plug-in
    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&gt;
    <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>
  • gsenthilgsenthil Registered Users Posts: 2 Beginner grinner
    edited August 31, 2012
    Is there a version of the smugmug plugin that supports the latest galleria? I have an older version but want to upgrade to the latest galleria for video/mobile support
Sign In or Register to comment.