Social Gallery Lite

The Free Ultimate Social Lightbox for Wordpress

Created: 07/17/2012
latest Update: 01/12/2013
By: StormGate

Thanks for downloading the Lite (free) version of Social Gallery Pro, if you like the plugin please do rate it on WordPress.org or buy the full version at SocialGalleryPlugin.com.

Thanks for using Social Gallery Lite!

Quick Start Guide

This Quick Start Guide will walk you through the basics of the Social Gallery Wordpress Plugin. By the end of this guide you will have Social Gallery installed and your post images should be showing up in Social Gallery style.

Tip: If you need to take a closer look at any of the images in this quick start guide, you can click on them to see the full size version!

Note: Social Gallery Lite does not come with all the benefits of the full version, some of these options may not be enabled in Social Gallery Lite. To get all of the 50+ options Get Social Gallery Pro.

1. Log into your WordPress blog admin area

2. Once logged in click "Plugins" on the left hand menu (if you don't have a "plugins" option you will have to ask a blog administrator to do this and the following steps!)

3. Once on the "Plugins" page click the "Add New" button in the top middle of the page:

4. On the next page "Install Plugins", click the "Upload" link as indicated by the red arrow in this screenshot:

5. On the next page you will be asked to "Choose File" - Click this button and here you must select the SocialGallery .zip you have downloaded from Code Canyon, once you have selected that .zip file Click "Install Now":

6. The next page will be entitled "Installing Plugin From Uploaded File: SocialGallery.zip" on this page click "Activate Plugin":

7. Once you have clicked "Activate plugin" you will see a screen similar to the next image, with a yellow "Plugin Activated" message and a new menu item "Social Gallery" (as highlighted with the two red arrows.)

8. Congratulations, Social Gallery is now installed!

9. Click Social Gallery from the left hand menu, which will load the Social Gallery Lite Install Wizard which will guide you through the required steps to set up Social Gallery.

9.1 - Install Wizard: 1. Your Social Gallery

This first step in the wizard requires you to enter your and email and the choice to get email updates when there's updates. Clicking next step takes you on to the next step.

9.2. Install Wizard: 2. Social Gallery Selectors

This second step tells Social Gallery which images you want it to load for. You can choose from a number of preset modes or you can specify a specific CSS selector. As advised on the page, its often best to start with a preset mode - and only use a Custom CSS selector if your themes customisations cause issues. Click Next Step.

9.3. Install Wizard: 3. Social Gallery Pages

Only available in the Full Version.

Installing the Plugin Via FTP

It’s very quick and easy to install the Social Gallery Wordpress Plugin, simply follow these 4 steps:

1. Unzip your download and put the “SocialGalleryLite” folder somewhere memorable

2. Upload the “SocialGalleryLite” folder into your Wordpress plugins folder

3. Once fully uploaded you will see the Social Gallery Lite plugin on your plugin’s screen, click “Activate” under its title.

4. After activating Social Gallery Lite a new menu item will be added to your side bar. Clicking “Social Gallery” from your side bar will let you configure the plugin.

5. That's it. You can now follow the wizard and then you're good to go!

If you have any problems installing our plugin please do read this great guide from Wordpress or alternatively read our Quick Start Guide

Configuring the plugin

The Social Gallery Lite Plugin starts working as soon as you have installed it, for a lot of users no configuration will ever be necessary. However if you want to turn off or on specific parts of the plugin or tweak it you have several options.

Before we look at each of the options please take a look at this key, it explains the names we will use to refer to each part of the Social Gallery viewer.

Social Gallery Key:

The options are discussed in more detail below, all of the following options are available for tweaking on the “Social Gallery” admin page, accessible by clicking Social Gallery from the admin screen:

For your ease the settings are split up into sections, each section has a corresponding help guide. Please click through the help guides using the navigation to the left. You will find more resources on Social Gallery Plugin.com and in the forums [pro users only.]

Social Gallery v2.0 Settings

General
Style
Social
Comments
Adverts (Adsense)

Settings: General

Social Gallery: Settings: General

1. Mode & CSS Selectors

The first option on the configuration screen lets you choose which images Social Gallery should work on (images which when clicked should load into Social Gallery.) Here you have several options:

“All Content Images” matches any image wrapped inside a link in your post. That is any linked image inside a WordPress content wrapper, if you have a custom theme this option may or may not work, if it does not try one of the other modes which are more adapted for multi-theme compatibility.

"Post Images" - This setting activates Social Gallery for any linked image within a WordPress post. As with the previous option this will work if your theme has a standardised WordPress selector.

"Page Images" - This setting activates Social Gallery for any linked image within a WordPress page. As with the previous option this will work if your theme has a standardised WordPress selector.

"Compatibility Mode" - Designed to integrate with over 100 of the most popular custom WordPress themes, Social Galleries Compatibility Mode adapts to apply Social Gallery to the linked images within your posts and pages. If the other options do not work you can use this mode to enable Social Gallery.

"Gallery Compatibility Mode" - Only available in the Full Version.

"Justified Image Grid" - Only available in the Full Version.

"NextGen Compatibility Mode" - Only available in the Full Version.

"NextGen Thumbnails" - Only available in the Full Version.

"NextGen Widget Only" - Only available in the Full Version.

"NextGen Gallery Overview" - Only available in the Full Version.

“Specific CSS Selector” – Choosing this option allows you to specify a specific CSS selector to apply Social Gallery too. If you only want a specific image or number of images to work with Social Gallery then this setting lets you specify these. An example of use would be if you had a specific gallery you wanted to enable the Social Gallery Plugin for then you could assign each linked image with the class “socialGalleryThis”, adding that class to this option would then enable Social Gallery for this class only.

A linked image HTML in this example:

A Linked Image HTML Example

…the corresponding option in the Social Gallery Configuration:

Adding a CSS selector Example

You can read more about this later in this document under “Anatomy of Social Gallery”

"Disclude CSS Selector" - Only available in the Full Version.

2. General Settings

There are a number of general settings here, covering several aspects of Social Gallery. For most users the default selections will work fine.

"Facebook Admin ID's CSV" - Entering your Facebook ID(s) in this box will allow you administration rights over the comments put against your images.

"Include Swipe Gestures" - Only available in the Full Version.

"Fullscreen Mode" - Only available in the Full Version.

"Always Fullscreen Mode" - Only available in the Full Version.

"Enlarge Images By" - Social Gallery can allow your images to be enlarged by a factor, this setting defines the maximum enlargement allowed. This does not affect the way Social Gallery frames images, simply by what factor it will enlarge them if there is space to.

"Fallback URL Type" - Only available in the Full Version.

"Share my options" - Only available in the Full Version.

3. Social Gallery Pages

Only available in the Full Version.

4. Earn 30% Commision

Only available in the Full Version.

Settings: Style

Social Gallery: Settings: Style

1. Social Gallery Theme

Only available in the Full Version.

2. Margins and Navigation

"Gallery Margin" - This setting allows you to set the minimum margin between the Social Gallery viewer and the edge of the users screen.

"Show Previous/Next Navigation" - This switch enables/disables the visual navigation icons and navigation features of Social Gallery.

3. Social Header

Un-ticking “Show Social Header” hides the header.

The drop down allows you to select:

· Site Img & Link – this is the default, showing a small logo, the blog name and the blog bi-line underneath it.

· Site Link – this allows you to show just the blog name at the top of the sidebar.

· Custom HTML – this setting shows another text box and allows you to specify your own html to be shown in the header of the sidebar. *Note adding your own HTML may affect the way the plugin appears; please do check your changes after adding.

4. Show Image Title as Description

"Show Image Title as Description" - This tick box allows you to control whether or not the image title is shown as a “Picture Description”. For example, if this box is ticked (default) and the following image HTML was in a post:

Post HTML example

…the description shown against the image would be “Your Image Title”. Note that if you are using Social Gallery with Justified Image Grid, this setting is overriden.

5. Picture Bar

"Show Picture Bar" - This switch enables/disables the visibility of the bar at the bottom of the images seen in Social Gallery.

"Picture Bar Title" - Only available in the Full Version.

"Show Image Download Link" - Only available in the Full Version.

6. Lightbox Background

Here you can set the background colour with any HTML HEX colour. You can generate the code for this here. The default for this plugin is black (000000.)

You can also set the opacity of the background. You can use any value between 0 and 1. 0 = transparent, 1 = non-transparent. The default for this plugin is 0.8.

7. CSS 3 Animation Effects

Only available in the Full Version.

Settings: Social

Social Gallery: Settings: Social

1. Share Buttons

Note: Social Gallery Lite only has the Facebook options from the above

Social Gallery Pro:

Social Gallery now ships with the capacity to share your images via Facebook, Twitter, Pinterest, Stumble Upon, Google Plus, Linked In & Tumblr. You can enable/disable each of these share buttons on this screen.

As of v2.0 it's not possible to re-arrange these buttons, this however has already been put in as a feature request and will be available for voting on in the forums.

2. Include Scripts

Note: Social Gallery Lite only has the option of including/discluding the facebook script here.

If you un-tick any of these while leaving the corresponding previous option ticked, you will need to include the appropriate script yourself (e.g. if you un-tick Facebook JavaScript here but you want to include Facebook like/send buttons or Facebook comments then you will need to have the Facebook connect JavaScript included elsewhere in your theme/blog.)

If you already have Facebook like/tweet/pin buttons on your website you may need to uncheck these. Otherwise you will not need to change anything here.

Settings: Comments

Social Gallery: Settings: Comments

1. Comments Settings: Facebook

To set up Social Gallery to use Facebook Comments (recommended) simply make sure the first switch is enabled. As it stands Social Gallery will now work.

To get administration / moderation rights over your comments you can choose to enter a Facebook App ID here, or otherwise you can also enter your personal Facebook ID under General Settings.

2. Comment Settings: Disqus

Only available in the Full Version.

Settings: Adverts

Social Gallery: Settings: Adverts

Using Adsense with Social Gallery

Only Social Gallery Pro is compatible with Adsense read about it here.

Upgrading Social Gallery

If you want to upgrade to the latest version of Social Gallery you can do so by following these 5 steps:

1. Download the latest Version from WordPress.org [Lite] or Code Canyon [Pro].

2. Log into your wordpress dashboard and click "Plugins" on the left hand menu, then click "Deactivate" next to "Social Gallery Plugin"

3. The plugin is now deactivated, next click "Delete" underneath the plugin - don't worry - this wont delete your settings.

4. When prompted click "Yes, Delete these files" to delete the plugin

5. That's the old version removed - now all thats left is to add the new version you downloaded in the first step. Jump to the Quick Start Guide which will walk you through uploading the latest version! You can start at point 3 as you are already logged in! Click here to go to the Quick Start Guide.

Note on upgrading to v2: If you have set up Social Gallery before all of your custom settings will be preserved, even through the deletion above.

CSS Selector Examples

If you want to use the Social Gallery plugin with specific images then you may want to specify a CSS selector (as in B.1. of this guide.) The following show some examples of this feature in action:

A specific link class: “.socialGalleryThis”

A single image (by ID): “#socialGalleryThis”

All linked images within a classed object: “.yourClass a:has(img)”

Anatomy of Social Gallery

We used the following example earlier in this help document:

Social Gallery Typical Linked Image

Here you will see the basic HTML which represents a linked image (<img/> element inside a <a></a>)

By default this plugin takes any linked image within wordpress content (wordpress wraps this content in a div with the class “.entry-content”) and includes it within the Social Gallery for that page. This should mean that out-of-the-box the plugin should work with your wordpress blog/theme. Occasionally theme’s may change the class associated with wordpress content (which isn’t best practice) – in this situation you may need to use CSS selectors as described in the following section of this help document.

Key things to note about the above HTML and how Social Gallery works:

The “title” attribute of the image element is the “Description” shown in the gallery.
The “href” attribute link around the image points to the image to display in the Social Gallery when clicked (often a higher resolution version of the image’s “src” attribute.

Further Help & Support

Support:

Note: No support available for Social Gallery Lite, this free plugin comes without any support guaranteed.

For Social Gallery Pro users support is available in the Social Gallery support forums, please do post any problems/questions you have there.

Useful Links:

News, Updates and Improvements:

You can also read more about the plugin and subscribe to the updates newsletter @ SocialGalleryPlugin.com

Please do not hesitate to get in touch and tell us what you think of the plugin, we are always looking to improve our plugins and will take any improvement ideas you have into serious consideration.

Thanks again for using Social Gallery Lite.

Change Log

Here you will find changes between versions of the Social Gallery Lite plugin.

v2.0 - 12/01/2013 - Original Release

Compatible Plugins & Themes

Here you will find a growing list of plugins and themes which work with Social Gallery. Some of these will be themes and plugins that the Social Gallery community has recommended for use with Social Gallery, others will be ones thoroughly tested with Social Gallery. Please note that 99.9% of themes will work with Social Gallery, this list is simply tested themes and plugins.

Justified Image Grid v1.2 - This fantastic gallery is very popular for good reason. As of V1.4 Social Gallery has full integration with Justified Image Grid.

NextGen Gallery - Probably the most popular gallery plugin, NextGen offers a lot out of the box. As of V1.4 Social Gallery has a good chunk of integration with NextGen.

Compatible Themes

Sprout Magazine Theme v1.1