+Gallery

The Short Answer:

A simple lightweight photo gallery driven by your existing online photo gallery.

Just Show me some examples!

• Google Album Demo:
  Loads all albums from Google Plus.
• Flickr Album Demo:
  Loads photosets from Flickr limiting results using the include data attribute (requires user authetication code).
• Facebook Album Demo:
  Loads all from a Facebook page. Work in Progress. (Album images are too low res)
• Instagram Demo:
  Loads all images from Instagram Feed. (requires access token for your account. Generate one here)
• Google Single Album Demo:
  Loads a single album to the page by specifying an album id.
• Facebook Single Album Demo:
  Same thing using a Facebook Album

+Gallery grabs all your albums and images from an online source or feed and display them on your site or within individual blog posts. It allows you to browse albums and galleries, or display just one Gallery at a time. Take a photo with your iphone, post to Facebook, Instagram, Flickr or Google Plus and it is automatically added to your site as well.

+Gallery is also built with Responsive Web Design in mind so almost wherever you put it, it scales automatically and plays nice. It shines and 960px and at 320px and hopefully everywhere in between. Not following me? Please Read here. +Gallery is designed for todays touch devices. Using your iPad, iPhone or Android devices the zoom level allows you to swipe through all the gallery images in addition to using the standard UI elements.

But why do we need another Photo Gallery?

Over the years I have built and implemented all kinds of photo galleries. A reoccurring theme was that photo galleries and albums are a pain in the ass consistently hard to create and labor intensive to maintain.

Now people have an easy way to update and maintain their photos via, Facebook, Instagram, Flickr, Google+, etc and their old photo galleries on their website quickly become outdated. +Gallery takes your albums and photos from your online gallery and streams them directly to your website or individual blog/news posts.

You're gonna need to start here.

• The latest and greatest version of jQuery up and running on your site.
• Download a zip of latest Plus Gallery files here.
• Make sure all the paths point to the right place. Images should be located in /images/plusgallery/...
• Make desired albums viewable to the public for Google+ and Picasa. Facebook Pages are always viewable to the public. Note: Facebook personal pages are never visible to the public, so, sorry you cant use those.
• Track down your account Information

  • Examples

  • Facebook: User ID: Example
  • Google: User ID: Example
  • Flickr: Use the Flickr API Explorer and get a Flickr API key
  • Instagram: Get your user ID and generate an Access Token here

Then all you need to do to get it going is add some simple HTML.

      <link rel="stylesheet" href="css/plusgallery.css">
      
      <!-- The HTML -->
      <div id="plusgallery"
        data-type="google"
        data-userid="mygoogleuserid"
      ><!-- +Gallery http://www.plusgallery.net/ --></div>
      
      <!-- Load jQuery ahead of this -->
      <script src="js/plusgallery.js"></script>
      <script>
      	$(function(){
          //DOM loaded
          $('#plusgallery').plusGallery();
        });
      </script>
    

+Gallery Data Attributes

+Gallery uses simple HTML5 data attributes to pass values to the Gallery for the User ID and the Gallery type ('facebook' or 'google'). There are also some optional data attributes that can be added to configure your gallery.

Javascript Properties can also be passed as options to the plugin as well. these will always be overwritten by the data attributes.

This is the part where we talk about where to go with this project:

Features/Hopes/Dreams

• Link to source page for photo
• Serverside or static version.
• Support for multiple instances of +Gallery on a page. Convert to a jQuery plugin. Update: Converted to a plugin haven't tested multiple instances yet. Let me know!
• Add 'die' or 'cancel' method.
• 'crop' attribute for thumbnails
• Positive and negative color styles.
• Bring back slideshow mode?

ChangeLog

• 0.7.4- 0.8.x:
  • Instagram Support!
  • Added include Property
  • Fixed bug with loading images on zoom layer
  • Converted to a jQuery Plugin
• 0.7- 0.7.4:
  • Support for data-exclude to omit a gallery from the album page.
  • Added to GitHub. https://github.com/jermartin77/plusgallery
  • -webkit-overflow-scrolling: touch; removed. This provided us with the cool inertia scrolling in the zoom on iOS, but is totally effed up when a) loaded with javascript and/or b) used in conjunction with a third party iframes loaded with javascript (I'm talking Facebook Like, Tweet, Disqus). Issue: You cannot use the top left hand ¼ of the screen to scroll, until you clear cache again. Yeah weird right.
  • New hover effect on albums = better loading accross the board. You can still download the old one (v0.7.2) here
  • Album Limit data-attribute option and setting default to 20
  • Mobile Safari Lazy Loading Improvements
  • Previous and Next arrows disappear correctly at beginning and end of zoom view.
  • Flickr and Facebook option for Album source
  • Miscellaneous CSS improvements
• < 0.7:
  • Zoom images recenter on screen rotation
  • Lazyload style loading of the zoom images.
  • Toggle display of title bar in single Album mode
  • Swipe functionality Heck Yes! (at least iOS and Chrome Beta)
  • Single Album option
  • Keyboard Navigation

Thanks for checking out +Gallery. Fill out this form if you have any questions suggestions, compliements or beefs. I would also like to see any good implementations. Looking forward to hearing back from you.

Hey, you can also email me