What is +Gallery?

The Short Answer:

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

Just Show me some examples!

+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.

Top

How to use +Gallery

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

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.

Data Attribute

Javascript Property

Description

data-userid*
userId
example: JayZ or 11122122212
The unique User ID of your online gallery. Google Example, Facebook Example, Flickr Api Explorer (Login to Flickr you'll see it in the top right).
data-type*
type
Values: google, facebook or flickr
Determines which api endpoint (feed) to access. Facebook is in development right now (Album images are too low res).
data-album-id
albumId
adding the album id puts plus gallery into single album mode where you cannot navigate between albums. See example here
data-album-title
albumTitle
Values: true or false
If using single album mode this Data attribute can be declared to show and hide the Album Title. Defaults to false when using single album mode.
data-api-key
apiKey
Necessary for Flickr to load images. Please don't use mine. Get your own here and be sure to read their Flickr API Terms of Use. Note that if your site is high traffic this solution is probably not right for you, as Flickr will limit the amount of requests.
data-album-limit
albumLimit
Value: integer
An integer to limit the number of albums intially loaded. defaults to 20.
data-limit
limit
Value: integer
An integer to limit individual Gallery results by. Defaults to 30. As a best practice keep the size of the galleries around this size. Especially on mobile devices, as they don't have the power to load lots of large images in the zoom mode and you will just make them mad. (Flickr also makes you agree to not load more than 30 at a time).
data-exclude
exclude
Example: 111111111,222222222
A comma separated list (no spaces) of gallery IDs to exclude from the album start page.
data-include
include
Example: 111111111,222222222
A comma separated list (no spaces) of gallery IDs to include that limits the results to the specified albums.
data-image-path
imagePath
Example: /path/to/images
Path to where the spacer images referenced in the javascript reside if different from 'images/plusgallery'
data-credit
credit
Values: true or false
Defaults to 'true'. If set to false the credit is hidden.

*Required fields

Top

Road Map

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
Top

Feedback

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

Top
comments powered by Disqus