Introduction

Included Features

  • Multitude of different settings to enable or disable included features
  • Either pull all albums (but exclude the ones you don’t want), predefine the albums you want to be shown or show one single album directly
  • Pagination Feature (smart pagination, set number of thumbnails per page, set number of pages or no pagination)
  • LazyLoad Feature for thumbnails (will only load images when thumbnails are in view)
  • Social share feature for Facebook, Twitter, Google+ and StumbleUpon
  • Includes a tool-tip plugin (ToolTipster) with several design options; although it is possible to use your own tool-tip solution
  • Includes four optional lightbox plugins (fancyBox, photoBox, colorBox and prettyPhoto)
  • Exclude individual images from being shown
  • Possible to translate it into any other language by using provided setting parameters
  • Select between a responsive (fluid width) or static layout (fixed width)
  • Dedicated mobile layout for mobile devices
  • Option to disable gallery on tablet and/or cell phone devices and show message instead
  • Optional two-directional (asc. / desc.) album sorting feature (name / number of images / date album created / date album last updated)
  • Smart filter option to filter albums and photos by age groups
  • Search Feature to search for albums by keywords
  • Set initial sorting direction and sorting criteria
  • Option for floating control bar that follows the user while scrolling through the album selection
  • Option to show dates in “from now” format (i.e. “2 days ago”) instead of standard date format
  • Optional logs (in console) for better debugging (i.e. number of albums or photos retrieved, error codes, etc.)
  • … and much more!

Information

For the purpose of this manual, “Album(s)” refers to the album selection, while “Photo(s)” refers to the actual images within each album.

Please note that the albums you want to pull from Flickr to your website need to be set to public and visible. Private albums will not work with this script.

The script allows you to pull albums and images from Flickr. Obviously, the more albums and images you load, the longer the script will take to pull the required information. Speed is also dependent upon the users internet connection.

In order to limit browser / memory overloads, the script (upon initialization) will only pull the album cover images along with the album information from Flickr. That information will be used to create the actual gallery overview. No actual album content (meaning the actual images within each album) will be loaded during initialization.

Only when a user clicks on the cover image (thumbnail) of a specific album will the images within that one album be pulled from Flickr. Images can then stored in the browser memory for as long as the user session lasts or pulled again if a user views the same album again (depends on settings for cacheAlbumContents being either “true” or “false”). Once a user reloads the page or closes the tab / window, all information will be removed from the memory.

There are currently three approaches to using the script (more information can be found in the subsequent sections):

  • You can pull all albums but exclude certain albums by ID and also set a total (maximum) number of albums to be pulled from Flickr.
  • You can pre-define albums by ID and only these specified albums will be pulled from Flickr.
  • You can show one single album in album detail view.

Setup

Code Generator

We understand that the multitude of settings can be confusing and/or overwhelming, which is why we created a separate “Code Generator”, which will create the required code to initialize the gallery based on your selections in an easy to use questionnaire form.

Otherwise, follow the instructions provided in the subsequent chapters to set up your gallery.

Quick Setup

This script can only be used (initialized) once per page and does not allow for multiple galleries on the same page.

The script requires you to load some .js and .css files in order to work correctly:

Step 1. Set Viewport META Tag (insert at beginning of your page’s HEAD tag)

This META tag is important for the rendering of the mobile layout when viewing the gallery on mobile devices, which utilize different pixel ratios.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
Step 2. Include jQuery (insert into your page’s HEAD tag)

If your page already has jQuery included then you can skip this step.

<!-- Load jQuery (REQUIRED; if not already included in page!!!) -->
<script type="text/javascript" src="js/jquery.1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.migrate.1.2.1.min.js"></script>
Step 3. Include CSS & JS Files for selected Lightbox (insert into your page’s HEAD tag)

Note: Since you can only use one of the four lightboxes at a time, you don’t have to load the files for the three lightbox plugins that you aren’t using.

1. FancyBox Lightbox:
<!-- Load Files for fancyBox Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="plugins/fancybox/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="plugins/fancybox/helpers/jquery.fancybox-buttons.css" />
<link rel="stylesheet" type="text/css" href="plugins/fancybox/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="plugins/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-media.js"></script>
<script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-easing.js"></script>
2. ColorBox Lightbox:
<!-- Load Files for colorBox Plugin (OPTIONAL; only necessary if actually utilized) -->
<link media="all" href="plugins/colorbox/jquery.colorbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="plugins/colorbox/jquery.colorbox.js"></script>
3. prettyPhoto Lightbox:
<!-- Load Files for prettyPhoto Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="plugins/prettyphoto/jquery.prettyPhoto.css" />
<script type="text/javascript" src="plugins/prettyphoto/jquery.prettyPhoto.js"></script>
4. photoBox Lightbox:
<!-- Load Files for photoBox Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="plugins/photobox/photobox/photobox.css">
<script type="text/javascript" src="plugins/photobox/photobox/photobox.js"></script>
Step 4. Include Required CSS & JS Files for Tooltips script (insert into your page’s HEAD tag)
<!-- Load Files for ToolTipster Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="plugins/tooltipster/jquery.tooltipster.css" />
<script type="text/javascript" src="plugins/tooltipster/jquery.tooltipster.min.js"></script>
Step 5. Include Required JS File for Isotope script (insert into your page’s HEAD tag)

The gallery package includes two different versions of the Isotope script; the last release in the v1.x branch of the script, and the last release in the v2.x branch.

At this time, the vast majority of websites are still using the time tested and much more stable v1.x branch, while only some websites already switched to the newer v2.x branch.

The gallery script is able to work with either version of Isotope, although v1.x is NOT compatible with v2.x and you should NEVER load both script versions on the same page.

Depending upon which version you are planning to use, you might have to adjust the script setting “isotopeVersion“, which uses the default value ‘1.0’, meaning the gallery by default is setup to use the v1.x branch of Isotope. If you are planning to use the v2.x branch, you need to change that setting to ‘2.0’

1. To use the v1.x family of Isotope:
<!-- Load Files for Metafizzy Isotope v1.x Plugin (REQUIRED!!!) -->
<script type="text/javascript" src="plugins/isotope/jquery.isotope1.min.js"></script>
2. To use the v2.x family of Isotope:
<!-- Load Files for Metafizzy Isotope v2.x Plugin (REQUIRED!!!) -->
<script type="text/javascript" src="plugins/isotope/jquery.isotope2.min.js"></script>
Step 6. Include Required CSS & JS Files for Gallery itself (insert into your page’s HEAD tag)

The following files are the ones actually controlling / rendering the gallery, while all other files before are external files, required for some features of the script.

<!-- Load Files for Flickr Gallery Plugin (REQUIRED!!!) -->
<link rel="stylesheet" type="text/css" href="css/jquery.flickr-iconfont.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.flickr-album.min.css" />
<script type="text/javascript" src="js/jquery.flickr-album.min.js"></script>
Step 7. Initialize jQuery Flickr Gallery (insert into your page’s HEAD tag)

Your first step should be to find the numeric Flickr User ID of your acount. You can use this service to find your ID by simply entering the link to your Flickr page and press the button “Find”. The number listed is the number you need to use for the most important setting of the script – “flickrID”.

You also need to create a Flickr APP in order to receive a Flickr Key. Please follow the steps and instructions listed here in order to get the necessary key, which the script will use for the setting “flickrKeyAPI”.

There a multitude of different settings available when you initialize the gallery. Some settings (Album + Image ID’s) can be helpful in identifying album and/or individual images that you would like to pre-define or exclude from showing. Please see “Optional Settings” for more information about all available settings.

1. For a responsive layout, use the following settings:
<!-- Initialize jQuery Flickr Gallery with minimum settings -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        // Change ID to your Flickr ID
        flickrID:               '24662369@N07',
        // Change Key to your Flickr API Key
        flickrKeyAPI:           'c07f724ab7ed6a1b01b799fe753c6d13',
        // Enable responsive layout (enabled by default)
        responsiveGallery:      true,
        // Set width for responsive layout (90% = default value)
        responsiveWidth:        90
    });
});
</script>
2. For a static / fixed layout, use the following settings:
<!-- Initialize jQuery Flickr Gallery with minimum settings -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        // Change ID to your Flickr ID
        flickrID:               '24662369@N07',
        // Change Key to your Flickr API Key
        flickrKeyAPI:           'c07f724ab7ed6a1b01b799fe753c6d13',
        // Disable responsive layout
        responsiveGallery:      false,
        // Set width in pixel for static layout (800 = default value)
        fixedWidth:             800
    });
});
</script>
Step 8. Create DIV in which gallery will be shown (insert into your page’s BODY tag)
<!-- Create DIV with matching ID as used in Step 5 -->
<div id="Flickr_Album_Frame"></div

The script should now be fully functional using pre-defined settings. However, if you need to make further adjustments (i.e. width of thumbnails, number of albums or images, turn on/off animations and effects, use different tooltip or lightbox plugins, and much more, continue reading.

Otherwise CONGRATULATIONS, because you are done with the setup!
Isotope
Lightboxes
Mobile
Tooltips

Optional Settings

This script provides a variety of settings that allow you to style the script to your liking and to enable / disable certain features. Please pay attention to the spelling of each setting parameter since they are case sensitive! A listing of all available settings is provided in the chapter “Setting Options” below.

Example for calling script with additional settings:
<!-- Initialize jQuery Flickr Gallery with additional settings -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        flickrID:               '24662369@N07',
        flickrKeyAPI:           'c07f724ab7ed6a1b01b799fe753c6d13',
        excludeAlbums:          ['99394368305', '10152141397378306'],
        excludeImages:          ['10152143269448306'],
        maxNumberGalleries:     18,
        maxNumberImages:        100,
        innerImageScaler:       false,
        responsiveGallery:      false,
        fixedWidth:             1024
    });
});
</script>

Isotope Version

As explained in the section “Quick Setup”, the gallery script is designed to work with either Isotope v1.x or v2.x. By default, the script expects the v1.x branch of the Isotope script and if you are loading that version, no further adjustments to the gallery settings are required.

If you are planning on using the newer (but still much less used) v2.x branch of the Isotope script and are loading that newer version, you need to add an additional setting parameter when initializing the gallery:

<!-- Initialize jQuery Flickr Gallery with Isotope v2.x -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Switch gallery to Isotope v2.x
        isotopeVersion:           	'2.0',
        ...
    });
});
</script>
Isotope

Responsive vs. Static Layout

This script gives you the option to select either a static layout with a fixed with that will not adjust itself to smaller or larger screen sizes, and a responsive version that will take screen size into account and readjust the number of thumbnail columns when necessary.

By default, the responsive design is enabled and you can switch to the static version by setting “responsiveGallery” from “true” to “false”.

Both layouts allow you to set the width of the gallery, either as a number of pixels (px) for the static version, or a percentage (%) for the responsive version:

“responsiveWidth”– Width of gallery for responsive layout in % (default: 90)
“fixedWidth”– Width of gallery for static layout in px (default 800)

Mobile Layout

Starting with v4.0.0 of the script, the gallery now includes a dedicated mobile layout, whenever it is viewed on any mobile and/or tablet device. The main differences to the responsive or static / fixed layouts used on desktop devices are as follows:

  • No usage of Isotope for rendering of columns
  • Allows for basic pagination only, or all albums / photos at once
  • No search, sort or filter features
  • Thumbnail hover animations are disabled

By nature, the gallery script uses images extensively, which can significantly increase data volume usage on mobile devices, particularly when connected to cell phone networks, instead of wireless networks based on broadband connections.

As such, the gallery can also be completely disabled on mobile and/or tablet devices, with an alternative message text for viewers.

<!-- Initialize jQuery Flickr Gallery with disabled mobile view -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Disable mobile layout on tablets and phones
        disableOnTablet:      	true,
        disableOnPhone:      	 true,        
        mobileMessage:          'For performance reasons, this gallery has been disabled on mobile devices.',
        ...
    });
});
</script>
Mobile

Pagination Options

Starting with version 3.x, the script provides a pagination feature, which is particularly useful for galleries with many albums and/or albums with many photos. By paginating (i.e. breaking the display in several pages), scrolling can be kept to a minimum. In return, the user has a much more pleasant experience viewing your albums and photos.

There are four different ways of applying pagination to your gallery:

Smart Pagination (Default)

This is the default setting for pagination. The script will detect the users screen dimensions and calculate how many thumbnails can be shown per row (based on the width of your gallery), and how many rows can be shown without causing the user to scroll. The number of items per row multiplied with the number of possible rows will then be used as the total number of items per page. Smart Pagination can be set for album thumbnails and photo thumbnails individually.

<!-- Initialize jQuery Flickr Gallery with Smart Pagination -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Enable Pagination
        paginationLayout:           true,
        // Allow for Smart Pagination for Album Thumbnails
        smartAlbumsPerPageAllow:    true,
        // Allow for Smart Pagination for Photo Thumbnails
        smartPhotosPerPageAllow:    true,
        ...
    });
});
</script>
Pagination by setting the Number of Items per Page

Another way to paginate is to manually set the total number of items per page, without taking into account any screen dimensions.

<!-- Initialize jQuery Flickr Gallery with set Number of Thumbnails per Page -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Enable Pagination
        paginationLayout:           true,
        // Disable Smart Pagination for Album Thumbnails and manually set # items per page
        smartAlbumsPerPageAllow:    false,
        setAlbumsByPages:           false,
        numberAlbumsPerPage:        9,
        // Disable Smart Pagination for Photo Thumbnails and manually set # items per page
        smartPhotosPerPageAllow:    false,
        setPhotosByPages:           false,
        numberPhotosPerPage:        16,
        ...
    });
});
</script>
Pagination by setting the total Number of Pages

If you prefer to limit the number of pages, you can manually set that number. In that case, the script will divide the total number of albums or photos with the set number of pages in order to determine the number of items per page.

<!-- Initialize jQuery Flickr Gallery with set Number of Pages -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Enable Pagination
        paginationLayout:           true,
        // Disable Smart Pagination for Album Thumbnails and manually set # items per page
        smartAlbumsPerPageAllow:    false,
        setAlbumsByPages:           true,
        numberPagesForAlbums:       3,
        // Disable Smart Pagination for Photo Thumbnails and manually set # items per page
        smartPhotosPerPageAllow:    false,
        setPhotosByPages:           true,
        numberPagesForPhotos:       6,
        ...
    });
});
</script>
No Pagination at all

Lastly, you can disable pagination completely, which means that all album or photo thumbnails will be shown at once without splitting them into pages.

<!-- Initialize jQuery Flickr Gallery with No Pagination -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Disable Pagination (Albums and Photos are controlled individually)
        paginationLayoutAlbums:     false,
        paginationLayoutPhotos:     false,
        ...
    });
});
</script>

Album Scope / Limitations

The script gives you several different options to show albums. Please have in mind that there is a maximum of 500 albums and 500 images per album that the script is designed to handle, so create your albums accordingly.

Show All Albums (with Exclusions)

This is the default mode, which allows to show all existing albums, while you have the option to exclude some albums you don’t want to show.

<!-- Initialize jQuery Flickr Gallery to show All Albums (with Exclusions) -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Specify number of maximum albums to be shown (set to "0" if you want all)
        maxNumberGalleries:     0,
        // Define ID's for albums you want to exclude
        excludeAlbums:          ['10152360235878306', '10152342601763306', '10152354445348306'],
        ...
    });
});
</script>
Predefine / Selective Albums

In this mode, you can predefine several albums that you want to show. All albums not matching the pre-defined ones will automatically be excluded. Predefine at least two different albums, otherwise, the script will set itself to “Single Album Mode”.

<!-- Initialize jQuery Flickr Gallery to show only predefined Albums -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Set script to pre-define album mode
        showSelectionOnly:      true,
        // Define ID's for desired albums here
        includeAlbums:          ['10152360235878306', '10152342601763306', '10152354445348306'],
        ...
    });
});
</script>
Show One Single Album

In this mode, the script will show just one pre-defined album, without providing an album selection first. Instead, the album content will be shown right away.

<!-- Initialize jQuery Flickr Gallery to show only one album -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Set script to single album mode
        singleAlbumOnly:        true,
        // Define ID for desired album here
        singleAlbumID:          '10152360235878306',
        ...
    });
});
</script>

Initial Sorting

Sorting of Album Thumbnails

By default, the script will sort the album preview thumbnails by album title in ascending order. You can, however, change that by providing the following parameters when you call the script:

In order to change from “ascending” to “descending” order, change the parameter “defaultSortDirectionASC” from “true” to “false”.

To do the intitial sorting by a different criteria other than “Album Title”, use the following settings. Have in mind that only one sorting criteria can be active at the same time. If the script detects that more than one sorting criteria has been enabled, it will revert to the default setting of “Album Title”. That means you have to disable the default sorting criteria “defaultSortByAlbumTitle” first and then enable your new criteria:

  • defaultSortByAlbumTitle
    – Set to “true” if the default sorting criteria should be the album title
  • defaultSortByNumberImages
    – Set to “true” if the default sorting criteria should be the number of images per album
  • defaultSortByDateCreated
    – Set to “true” if the default sorting criteria should be the date at which album was created
  • defaultSortByDateUpdated
    – Set to “true” if the default sorting criteria should be the date at which album was last updated
  • defaultSortByFlickrOrder
    – Set to “true” if the default sorting criteria should be the order at which Flickrdelivered data
  • defaultSortByFlickrID
    – Set to “true” if the default sorting criteria should be the numeric album ID assigned by Flickr
Sample for Sorting Album Thumbnails by Date Created in Descending Order
<!-- Initialize jQuery Flickr Gallery with Different Sorting Setup -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Set sorting to Descending Mode
        defaultSortDirectionASC:    false,
        // Disable sorting by Album Title
        defaultSortByAlbumTitle:    false,
        // Enable sorting by Date Created
        defaultSortByDateCreated:   true
        ...
    });
});
</script>
Sorting of Photo Thumbnails

By default, the script will sort the photo preview thumbnails by date added to the album in ascending order. You can, however, change that by providing the following parameters when you call the script:

In order to change from “ascending” to “descending” order, change the parameter “defaultPhotoDirectionsASC” from “true” to “false”.

To do the intitial sorting by a different criteria other than “Date Added”, use the following settings. Have in mind that only one sorting criteria can be active at the same time. If the script detects that more than one sorting criteria has been enabled, it will revert to the default setting of “Date Added”. That means you have to disable the default sorting criteria “defaultPhotoSortAdded” first and then enable your new criteria:

  • defaultPhotoSortAdded
    – Set to “true” if the default sorting criteria should be the date the photo was added to the album
  • defaultPhotoSortUpdated
    – Set to “true” if the default sorting criteria should be the date at which the photo was last updated
  • defaultPhotoSortOrder
    – Set to “true” if the default sorting criteria should be the order at which Flickr delivered data
  • defaultPhotoSortID
    – Set to “true” if the default sorting criteria should be the numeric photo ID assigned by Flickr
Sample for Sorting Photo Thumbnails by ID in Descending Order
<!-- Initialize jQuery Flickr Gallery with Different Sorting Setup -->
<script type="text/javascript">
$(document).ready(function($){
    $('#Flickr_Album_Frame').Flickr_Album({
        ...
        // Set sorting to Descending Mode
        defaultPhotoDirectionsASC:     false,
        // Disable sorting by Album Title
        defaultPhotoSortAdded:         false,
        // Enable sorting by Date Created
        defaultPhotoSortID:            true
        ...
    });
});
</script>

Thumbnail Lazyload

A large percentage of the gallery load time is taken up by downloading the images to populate the thumbnails. In order to improve performance, the script provides the option to “lazy load” all images. What that means is that an image will only be loaded if and when it is actually shown on the screen. All images currently not on the screen will remain blank and show a loader animation instead. Once the user scrolls up/down and new images become visible, these images will be loaded and the loader animation disappears.

By default, the lazy load feature is enabled. You can disable it by setting imageLazyLoad from “true” to “false”. When disabled, all images will be loaded immediately.

Caching of Album Contents

The script provides the option to cache individual album contents for the duration of the session. That means, if a user revisits an album s/he already viewed during the same session, all data already loaded during the 1st viewing will be reused. The caching can be enabled by setting cacheAlbumContents to “true”.

By default, caching is disabled in order to keep memory usage to a minimum. As a result, album data will be loaded from Flickr every time the album will be viewed during that session.

The more albums you are showing, the more browser memory is necessary to cache the information, which can slow down the overall browser performance or even cause memory overflow problems. If you are only showing a few albums, there shouldn’t be any performance issues with caching enabled.

Caching will automatically be disabled when viewing the gallery on mobile devices via the mobile layout.

Image Thumbnail Scaling

In order to create thumbnails for the preview of album cover images and the actual images within each album, this script will scale each picture received from Flickr to a size that has been defined in the settings (see “Optional Settings”). If there is no cover image assigned to an album, the script will show a generic “No Cover Available” sign instead (will only work when on live server, not on localhost or stationary).

  • albumThumbWidth
    – Width for each Album Cover Image
  • albumThumbHeight
    – Height for each Album Cover Image
  • photoThumbWidth
    – Width for each Image Preview
  • photoThumbHeight
    – Height for each Image Preview

The settings you defined will be used by either an external (cloud based) scaling services (Sencha or WeServ), or internally via basic CSS3 scaling (default).

In order to switch from the internal CSS3 to one of the external cloud based scaler, you need to change either the setting “weservImageScaler” from “true” to “false”, or the setting “senchaImageScaler“, but not both.

Translation of Text Strings

The script outputs only a few text elements, which can be translated into any language by using the optional settings. Obviously, the content that is delivered by Flickr can not be translated by this script.

You can translate all utilized text blocks by using and changing the settings as listed in the corresponding section “Translation Settings” inside the chapter “Setting Options”.

For some of the placeholders that are filled with these settings, you can also change the corresponding CSS settings for each class in “jquery.flickr-album.css“.

Translations

Setting Options

General Settings

Setting:

flickrID

Function:

Your Flickr ID (REQUIRED!)

This is your numericFlickr ID which can be found by following the directions here. The script will not work if no valid ID has been provided.

Default:

Null

Setting:

flickrKeyAPI

Function:

Your Flickr API Key (REQUIRED!)

This is your alpha-numeric Flickr Api Key which can be generated by following the directions here. The script will not work if no valid Flickr API Key has been provided.

Default:

Null

Setting:

excludeAlbums

Function:

ID’s of albums that are to be exclude from showing (only applies if “showSelectionOnly” is set to “false”); separate by comma and warp each ID in apostrophes (single quotes)

Default:

[ ]

Setting:

singleAlbumOnly

Function:

Set to “true” if you want to show only one specified albums; will show in album detail view)

Default:

FALSE

Setting:

singleAlbumID

Function:

Single ID of the album that you want to be shown (only applies if “singleAlbumOnly” is set to “true”);

Default:

[ ]

Setting:

showSelectionOnly

Function:

Set to “true” if you want to show only specified albums; otherwise all albums will be pulled (minus the ones marked to be excluded)

Default:

FALSE

Setting:

includeAlbums

Function:

ID’s of albums that you want to be shown (only applies if “showSelectionOnly” is set to “true”); seperate by comma and warp each ID in apostrophes (single quotes)

Default:

[ ]

Setting:

maxNumberGalleries

Function:

Define how many galleries should be pulled from Flickr; set to “0” (zero) for all albums (script will only pull up to 500 albums)

Default:

20

Setting:

maxNumberImages

Function:

Define how many images per gallery should be pulled from Flickr; set to “0” (zero) for all photos in album (script will only pull up to 500 images)

Default:

50

Setting:

excludeImages

Function:

ID’s of images that are to be exclude from showing; seperate by comma and warp each ID in apostrophes (single quotes).

Default:

[]

Setting:

weservImageScaler

Function:

Set to “true” if you want to utilize the external (“cloud”) based images scaling service “weserv.nl” to scale the album and photo thumbnails.

Default:

FALSE

Setting:

senchaImageScaler

Function:

Set to “true” if you want to utilize the external (“cloud”) based images scaling service “sencha.io” to create the album and photo thumbnails.

Default:

FALSE

Setting:

imageLazyLoad

Function:

Define if lazyload for thumbnails should be utilized (images will only be loaded if in view)

Default:

TRUE

Setting:

responsiveGallery

Function:

Define if gallery is supposed to be responsive to window size changes

Default:

TRUE

Setting:

responsiveWidth

Function:

Set percent of window width the responsive frameID container should have; only enter number (no “%”)

Default:

90

Setting:

fixedWidth

Function:

Set window width in px for a fixed size frameID container; only enter number (no “px”)

Default:

800

Setting:

detectIFrame

Function:

if “true” and if the script is embedded via iFrame, the gallery will attempt to auto adjust the height of the gallery frame to fit the gallery height. This will not work with cross-domain iFrames. Set to “false” if you are embedding the gallery with cross-domain iFrames.

Default:

TRUE

Setting:

iFrameHeightAdjust

Function:

Define an adjustment in px that will be used to offset the height adjustment for the iFrame the gallery is embedded in (if applicable)

Default:

24

Setting:

PathNoCoverImage

Function:

Set path to image to be used if Facebook doesn’t provide a Cover Image for an album

Default:

“css/images/no_cover.png”

Setting:

showAlbumDescription

Function:

Set to “true” if you want to show the album description in album view

Default:

TRUE

Setting:

cacheAlbumContents

Function:

Set to “true” if you want to keep albums already loaded in DOM and reuse or “false” for reloading every time

Default:

FALSE

Setting:

albumSearchControls

Function:

Set to “true” if you want to provide a search feature for albums.

Default:

TRUE

Isotope

Mobile Settings

The script includes a basic routine in order to detect what type of device is used to view the gallery. Whenever a mobile device, such as a tablet or cell phone, has been detected, the gallery will automatically render in a scaled down and therefore less demanding mobile layout.

Setting:

forceMobileView

Function:

Define if the gallery should render in its special “mobile layout” when viewed on desktop devices.

Default:

FALSE

Setting:

disableOnTablet

Function:

Define if the gallery should be completely disabled when viewed on tablet devices; otherwise, the mobile layout mode will be used.

Default:

FALSE

Setting:

disableOnPhone

Function:

Define if the gallery should be completely disabled when viewed on cell phone devices; otherwise, the mobile layout mode will be used.

Default:

FALSE

Setting:

mobileMessage

Function:

Define the text message that should be shown when the gallery has been disabled for either tablet or cell phone devices.

Default:

“For performance reasons, this gallery has been disabled on mobile devices.”

Setting:

mobilePagination

Function:

Define if the gallery and image thumbnails should use a basic pagination feature.

Default:

TRUE

Setting:

mobileSizeAdjust

Function:

Define if the gallery and image thumbnails should automatically adjust their size on mobile devices (i.e. screen rotation).

Default:

TRUE

Setting:

mobileBreakspoints

Function:

Define the column breakpoints for mobile devices.

Default:

“360,640,980,1280,1440”

Setting:

mobileRatio

Function:

Define the width/height ratio that should be used for the images on mobile devices (16/9 or 4/3).

Default:

“4/3”

Mobile

Album Thumbnail Settings

General Album Thumbnail Settings

Setting:

albumNameTitle

Function:

Add Name / Title of Album to Album Thumbnail

Default:

TRUE

Setting:

albumNameAbove

Function:

If “true”, the album name will be shown above the thumbnail, otherwise below

Default:

TRUE

Setting:

albumNameShorten

Function:

If “true”, the album name shown will automatically be shortened to avoid unnecessary linebreaks

Default:

TRUE

Setting:

albumImageCount

Function:

Add Image Count per Album Below Album

Default:

TRUE

Setting:

albumDateCreate

Function:

Add Date Created below Album

Default:

FALSE

Setting:

albumCreateFromNow

Function:

Define if date created should be converted into a “from now” period (i.e. 2 days ago)

Default:

TRUE

Setting:

albumDateUpdate

Function:

Add Date Last Updated below Album

Default:

FALSE

Setting:

albumUpdateFromNow

Function:

Define if date last updated should be converted into a “from now” period (i.e. 2 days ago)

Default:

TRUE

Setting:

albumFlickrID

Function:

Add Album ID below Album Thumbnail; ID can be used to exclude album from showing

Default:

FALSE

Setting:

albumShowOrder

Function:

Show Number of album (derived from order as provided by Flickr)

Default:

FALSE

Setting:

albumWrapperWidth

Function:

Define width for each Album Wrapper (should equal albumThumWidth + 2x albumFrameOffset!)

Default:

290

Setting:

albumThumbWidth

Function:

Define width for each Album Thumbnail (deduct at least 2x albumFrameOffset from albumWrapperWidth for frame offset)

Default:

280

Setting:

albumThumbHeight

Function:

Define Height for each Album Thumbnail

Default:

200

Setting:

albumFrameOffset

Function:

Define offset for 2nd Album Thumbnail border to create stacked effect

Default:

5

Setting:

albumWrapperMargin

Function:

Define margin for each Album Wrapper (creates the gutter/space between the individual thumbnails; actual width will equal 2x albumWrapperMargin)

Default:

10

Setting:

albumInfoOffset

Function:

Define additional offset (top) for album information section (name, content, dates)

Default:

0

Setting:

matchAlbumPhotoThumbs

Function:

Set to true if you want to make the album thumbnails look like the photo thumbnails (photo thumbnail settings will be used)

Default:

FALSE

Album Decoration Settings

Setting:

albumShowPaperClipL

Function:

Show a PaperClip on the left

Default:

TRUE

Setting:

albumShowPaperClipR

Function:

Show a PaperClip on the right

Default:

FALSE

Setting:

albumShowPushPin

Function:

Show a Centered Pushin

Default:

FALSE

Setting:

albumShowShadow

Function:

Show Shadow below Album Thumbnail (use only one shadow type below)

Default:

TRUE

Setting:

albumShadowOffset

Function:

Define additional offset (top) for album shadow to fine-tune shadow position

Default:

12

Setting:

albumShadowA

Function:

Show Image Shadow Type 1 (default if none selected)

Default:

TRUE

Setting:

albumShadowB

Function:

Show Image Shadow Type 2

Default:

FALSE

Setting:

albumShadowC

Function:

Show Image Shadow Type 3

Default:

FALSE

Setting:

albumCCS3Shadow

Function:

CSS3 Shadow / Glow Effect on all sides of the thumbnails (adds class “ShadowCSS3” to elements; independent from image shadow types)

Default:

FALSE

Album Hover Effect Settings

Setting:

albumNameThumb

Function:

If “true”, the album name will be shown as overlay on top of the album thumbnail, shortened to the width of the thumbnail.

Default:

FALSE

Setting:

albumThumbOverlay

Function:

Add Magnifier Overlay to Thumbnail (will appear as hover effect)

Default:

TRUE

Setting:

albumThumbRotate

Function:

Add Hover Rotate / Rumble Effect to Album Thumbnail

Default:

FALSE

Setting:

albumRumbleX

Function:

Define Rumble Movement on X-Scale for Album Thumbnails (0 = no rumble on X-Scale)

Default:

3

Setting:

albumRumbleY

Function:

Define Rumble Movement on Y-Scale for Album Thumbnails (0 = no rumble on Y-Scale)

Default:

3

Setting:

albumRumbleSpeed

Function:

Define Speed for Rumble / Rotate Effect for Album Thumbnails

Default:

150

Setting:

albumRotate

Function:

Define Rotation Angle on X+Y-Scale for Album Thumbnails

Default:

3

Photo Thumbnail Settings

General Photo Thumbnail Settings

Setting:

photoThumbWidth

Function:

Define Width for each Photo Thumbnail

Default:

250

Setting:

photoThumbHeight

Function:

Define Height for each Photo Thumbnail

Default:

155

Setting:

photoThumbMargin

Function:

Define Margin (top-left-bottom-right) for each Photo Thumbnail

Default:

10

Setting:

photoShowNumber

Function:

AddFlickr Image ID Number below Thumbnail

Default:

FALSE

Setting:

photoShowOrder

Function:

Show Number of photo (derived from order as provided by Flickr)

Default:

FALSE

Photo Decoration Settings

Setting:

photoShowClearTape

Function:

Add Clear Tape on Top of Photo Thumbnail

Default:

TRUE

Setting:

photoShowYellowTape

Function:

Add Yellow Tape on Top of Photo Thumbnail

Default:

FALSE

Setting:

photoShowPushPin

Function:

Add Centered Pushin on Top of Photo Thumbnail

Default:

FALSE

Photo Hover Effect Settings

Setting:

photoThumbOverlay

Function:

Add Magnifier Overlay to Photo Thumbnail (will appear as hover effect)

Default:

TRUE

Setting:

photoThumbRotate

Function:

Add Hover Rotate / Rumble Effect to Photo Thumbnail (will not work in IE 8 or less)

Default:

TRUE

Setting:

photoRumbleX

Function:

Define Rumble Movement on X-Scale for Photo Thumbnails

Default:

5

Setting:

photoRumbleY

Function:

Define Rumble Movement on Y-Scale for Photo Thumbnails

Default:

5

Setting:

photoRumbleSpeed

Function:

Define Speed for Rumble / Rotate Effect for Photo Thumbnails

Default:

150

Setting:

photoRotate

Function:

Define Rotation Angle on X+Y-Scale for Photo Thumbnails

Default:

5

Pagination Settings

Setting:

paginationLayoutAlbums

Function:

Set to “true” if you want to use pagination for the album thumbnails

Default:

TRUE

Setting:

smartAlbumsPerPageAllow

Function:

If “true”, the script will auto paginate the album thumbnails based on screen dimensions

Default:

TRUE

Setting:

setAlbumsByPages

Function:

If “true”, you can manually set the total number of pages for album thumbnails

Default:

FALSE

Setting:

numberAlbumsPerPage

Function:

Set the number of albums that should be shown per page (if paginationLayout = true)

Default:

9

Setting:

numberPagesForAlbums

Function:

Set the number of pages for album thubmnails that should be shown (if setAlbumsByPages = true)

Default:

3

Setting:

paginationLayoutPhotos

Function:

Set to “true” if you want to use pagination for the photo thumbnails

Default:

TRUE

Setting:

smartPhotosPerPageAllow

Function:

If “true”, the script will auto paginate the photo thumbnails based on screen dimensions

Default:

TRUE

Setting:

setPhotosByPages

Function:

If “true”, you can manually set the total number of pages for photo thumbnails

Default:

FALSE

Setting:

numberPhotosPerPage

Function:

Set the number of photos that should be shown per page (if paginationLayout = true)

Default:

9

Setting:

numberPagesForPhotos

Function:

Set the number of pages for photo thubmnails that should be shown (if setPhotosByPages = true)

Default:

6

Setting:

showTopPaginationBar

Function:

If “true”, a pagination control bar (first / prev / next / last page) will be shown above the thumbnails

Default:

TRUE

Setting:

showBottomPaginationBar

Function:

If “true”, a pagination control bar (first / prev / next / last page) will be shown below the thumbnails

Default:

TRUE

Setting:

showThumbInfoInPageBar

Function:

If “true”, thumbnail count (i.e. Album 1 to 6 out of 20) will be shown in Pagination Bars

Default:

TRUE

Setting:

floatingControlBar

Function:

If set to “true”, the control bar will follow the user while scrolling up/down (only if gallery has not been embedded via iFrame!)

Default:

TRUE

Setting:

controlBarTopOffset

Function:

Allows for an offset in px from top of screen for the floating controlbar in order to account for menus or other top-fixed elements

Default:

10

Setting:

showFloatingReturnButton

Function:

If “true”, a return button will be shown in album detail view

Default:

FALSE

Setting:

showFloatingToTopButton

Function:

If “true”, a Go-To-Top button will be shown in the floating control bar

Default:

TRUE

Filter Control Settings

Setting:

albumsFilterAllow

Function:

If “true”, provides a filter to filter albums by either dates created or last updated

Default:

TRUE

Setting:

albumsFilterAllEnabled

Function:

If “true”, all album filter selections will be unchecked by default

Default:

TRUE

Setting:

useAlbumsUpdated

Function:

If “true”, filter will use date last updated; if “false”, filter will use date created

Default:

TRUE

Setting:

photosFilterAllow

Function:

If “true”, provides a filter to filter photos by dates last added to the album

Default:

TRUE

Setting:

photosFilterAllEnabled

Function:

If “true”, all photo filter selections will be unchecked by default

Default:

TRUE

Setting:

sortFilterNewToOld

Function:

If “true”, all filter criteria will be sorted from newest to oldest or reverse when “false”

Default:

TRUE

Sort Control Settings

Setting:

albumSortControls

Function:

Allow for Sorting of Album Thumbnails

Default:

TRUE

Setting:

albumAllowSortName

Function:

Allow for Sorting by Album Name

Default:

TRUE

Setting:

albumAllowSortItems

Function:

Allow for Sorting by Number of Images per Album

Default:

TRUE

Setting:

albumAllowSortCreated

Function:

Allow for Sorting by Date Album has been created

Default:

TRUE

Setting:

albumAllowSortUpdate

Function:

Allow for Sorting by Date Album has last been updated

Default:

FALSE

Setting:

albumAllowSortFlickr

Function:

Allow for Sorting by the same order as albums were provided by Flickr.

Default:

FALSE

Setting:

albumAllowSortID

Function:

Allow for Sorting by the unique numeric Album Flickr ID that has been assigned to each album.

Default:

FALSE

Setting:

photoSortControls

Function:

Allow for Sorting of Photo Thumbnails

Default:

TRUE

Setting:

photoAllowSortAdded

Function:

Allow for Sorting by Date Photo has been added to album

Default:

TRUE

Setting:

photoAllowSortUpdate

Function:

Allow for Sorting by Date Photo has last been updated

Default:

FALSE

Setting:

photoAllowSortFacebook

Function:

Allow for Sorting by the same order as photos were provided by Flickr.

Default:

FALSE

Setting:

photoAllowSortID

Function:

Allow for Sorting by the unique numeric Photo Flickr ID that has been assigned to each photo.

Default:

FALSE

Initial Sort Order Settings

Setting:

defaultSortDirectionASC

Function:

Set to “true” for ascending and “false” for descending default sort direction for album thubmnails

Default:

TRUE

Setting:

defaultSortByAlbumTitle

Function:

Set to “true” if the default sorting criteria should be the album title. This is the default setting for the script. In order to sort by any other criteria, this setting MUST be set to “FALSE” first.

Default:

TRUE

Setting:

defaultSortByNumberImages

Function:

Set to “true” if the default sorting criteria should be the number of images per album

Default:

FALSE

Setting:

defaultSortByDateCreated

Function:

Set to “true” if the default sorting criteria should be the date at which album was created

Default:

FALSE

Setting:

defaultSortByDateUpdated

Function:

Set to “true” if the default sorting criteria should be the date at which album was last updated

Default:

FALSE

Setting:

defaultSortByFacebookOrder

Function:

Set to “true” if the default sorting criteria should be the order at which Flickr delivered data.

Default:

FALSE

Setting:

defaultSortByFacebookID

Function:

Set to “true” if the default sorting criteria should be the album ID as assigned by Flickr.

Default:

FALSE

Setting:

defaultPhotoDirectionsASC

Function:

Set to “true” for ascending and “false” for descending default sort direction for photo thumbnails

Default:

TRUE

Setting:

defaultPhotoSortAdded

Function:

Set to “true” if the default sorting criteria should be the date at which photo was added to the album. This is the default setting for the script. In order to sort by any other criteria, this setting MUST be set to “FALSE” first.

Default:

TRUE

Setting:

defaultPhotoSortUpdated

Function:

Set to “true” if the default sorting criteria should be the date at which photo was last updated

Default:

FALSE

Setting:

defaultPhotoSortOrder

Function:

Set to “true” if the default sorting criteria should be the order at which photos were received from Flickr

Default:

FALSE

Setting:

defaultPhotoSortID

Function:

Set to “true” if the default sorting criteria should be the photo ID assigned by Flickr

Default:

FALSE

Social Share Settings

Setting:

albumShowSocialShare

Function:

Define if social share links for the complete album should be shown.

Default:

FALSE

Setting:

albumThumbSocialShare

Function:

If “true”, the Social Share button will be shown as overlay in the Album Thumbnail, otherwise, below

Default:

FALSE

Setting:

albumShortSocialShare

Function:

If “true”, the Album Share URL will be shortened, using the http://safe.mn URL Shortener Service

Default:

FALSE

Setting:

photoShowSocialShare

Function:

Define if social share links for each image inside an album should be shown.

Default:

TRUE

Setting:

photoThumbSocialShare

Function:

If “true”, the Social Share button will be shown as overlay in the Photo Thumbnail, otherwise, below

Default:

FALSE

Setting:

photoShortSocialShare

Function:

If “true”, the Photo Share URL will be shortened, using the http://safe.mn URL Shortener Service

Default:

FALSE

Tooltip Settings

For the internal tooltip routine to work, additional JS/CSS files have to be loaded on your page. See “Setup – Quick Setup” for more information.

Setting:

tooltipUseInternal

Function:

Define if the internal tooltip script (ToolTipster) should be utilized. If enabled, tooltips will be store via “data-tooltip” attribute, otherwise via simple “title” attribute.

Default:

TRUE

Setting:

tooltipDesign

Function:

Define the style for the tooltip. Options are:

  • tooltipster-white
  • tooltipster-gray
  • tooltipster-blue
  • tooltipster-green
  • tooltipster-red
  • tooltipster-orange
  • tooltipster-purple
  • tooltipster-pink
  • tooltipster-yellow
  • tooltipster-black
  • tooltipster-noir
  • tooltipster-punk

Default:

“tooltipster-black”

Setting:

tooltipAnimation

Function:

Define the entry animation for the tooltip. Options are:

  • fade
  • grow
  • swing
  • slide
  • fall

Default:

“fade”

Setting:

tooltipPosition

Function:

Define the tooltip position. Options are:

  • right
  • left
  • top
  • top-right
  • top-left
  • bottom
  • bottom-right
  • bottom-left

Default:

“top”

Setting:

createTooltipsAlbums

Function:

Add Tooltip class “TipGallery” to Album Thumbnails

Default:

TRUE

Setting:

createTooltipsPhotos

Function:

Add Tooltip class “TipPhoto” to Photo Thumbnails

Default:

TRUE

Setting:

createTooltipsSocial

Function:

Add Tooltip class “TipSocial” to Social Share Links

Default:

TRUE

Setting:

createTooltipsLightbox

Function:

Add Tooltip class “TipLightbox” to Description Text in Lightbox (applies to ColorBox Lightbox Only)

Default:

TRUE

Setting:

customTooltipsClass

Function:

Add a Custom Class Name to all Elements that contain Tooltip Content (can be used to target tooltip elements with a different plugin than the one that is part of the script)

Default:

Null

Tooltips

Lightbox Settings

For any of the lightboxes to work, the corresponding JS and CSS files have to be loaded (see “Setup – Quick Setup”). Only one lightbox can be used per gallery (page) so make sure you are only loading the files for that one lightbox and not for any of the other ones.

Setting:

fancyBoxAllow

Function:

Add fancyBox (Lightbox) to Photo Thumbnails; if not, images will open up in new tab / window. This is the default lightbox for the gallery. In order to use a different one, you have to disable this one by setting it to “FALSE”.

Default:

TRUE

Setting:

colorBoxAllow

Function:

Add colorBox (Lightbox) to Photo Thumbnails; if not, images will open up in new tab / window

Default:

FALSE

Setting:

prettyPhotoAllow

Function:

Add prettyPhoto (Lightbox) to Photo Thumbnails; if not, images will open up in new tab / window

Default:

FALSE

Setting:

photoBoxAllow

Function:

Add photoBox (Lightbox) to Photo Thumbnails; if not, images will open up in new tab / window

Default:

FALSE

Setting:

lightboxCustomClass

Function:

Add a Custom Class Name to all Elements that contain Lightbox Content (can be used to target lightbox elements with a different plugin than the ones that arepart of the script)

Default:

Null

Setting:

lightboxFullSizeImage

Function:

Define if the Lightbox should use the largest (original) image available (will increase load times)

Default:

TRUE

Lightboxes

Translation Settings

1. Control Elements

Setting:

PagesButtonText

Function:

Define Text for Page Switch Button

Default:

“Change Page”

Setting:

SortNameText

Function:

Define Text for Sorting Option (Sort by Album Name)

Default:

“Album Name”

Setting:

SortItemsText

Function:

Define Text for Sorting Option (Sort by Number Items)

Default:

“Number Images”

Setting:

SortAddedText

Function:

Define Text for Sorting Option (Sort by Date Photo Added to Album)

Default:

“Date Added”

Setting:

SortCreatedText

Function:

Define Text for Sorting Option (Sort by Date Created)

Default:

“Date Created”

Setting:

SortUpdatedText

Function:

Define Text for Sorting Option (Sort by Date Updated)

Default:

“Last Update”

Setting:

SortFlickrText

Function:

Define Text for Sorting Option (Sort by Order as provided by Flickr).

Default:

“Flickr Order”

Setting:

SortIDText

Function:

Define Text for Sorting Option (Sort by Flickr)

Default:

“Flickr ID”

Setting:

FilterButtonTextAlbums

Function:

Define Text for Filter Button (Albums)

Default:

“Last Updated”

Setting:

FilterButtonTextPhotos

Function:

Define Text for Filter Button (Photos)

Default:

“Last Added”

Setting:

SearchButtonTextAlbums

Function:

Define Text for Search Button (Albums)

Default:

“Search Albums”

Setting:

SearchButtonTextPhotos

Function:

Define Text for Search Button (Photos)

Default:

“Search Photos”

Setting:

SearchDefaultText

Function:

Define Text for Default Search Term

Default:

“Search …”

2. Album Overview

Setting:

AlbumContentPreText

Function:

Define the text shown before the number of photos per album. Adjust width of CSS class .albumCount if necessary.

Default:

“Content:”

Setting:

AlbumCreatedPreText

Function:

Define the text shown before the date a album has been created.  Adjust width of CSS class .albumCreate if necessary

Default:

“Created:”

Setting:

AlbumUpdatedPreText

Function:

Define the text shown before the date a album has been last updated.  Adjust width of CSS class .albumUpdate if necessary

Default:

“Updated:”

Setting:

AlbumShareMePreText

Function:

Define text shown before “Share Album” Links.

Default:

“Share Albums:”

Setting:

AlbumNumericIDPreText

Function:

Define the text shown before the numeric album ID.  Adjust width of CSS class .albumNumber if necessary

Default:

“Album ID:”

Setting:

OutOfTotalImagesPreText

Function:

Define the text shown when there are more images in album that the script is allowed to pull. For example, the script is set to pull 20 images but the album actually contains 40 images. The gallery would output the following “20 Images out of 40″.

Default:

“out of”

Setting:

SingleImageWord

Function:

Define word used for a single Image.

Default:

“Image”

Setting:

MultiImagesWord

Function:

Define word used for multiple Images.

Default:

“Images”

3. Single Album View

Setting:

AlbumBackButtonText

Function:

Define text for back button in album preview.

Default:

“Back”

Setting:

AlbumTitlePreText

Function:

Define text shown before album name.

Default:

“Album Name:”

Setting:

AlbumLinkButtonText

Function:

Define text shown for text link to original Flickr Album.

Default:

“Click here to view Album on Flickr”

Setting:

AlbumNoDescription

Function:

Define text to be shown if there is no album description available

Default:

“No Album Description available.”

Setting:

ImageLocationPreText

Function:

Define text shown before image location text (actual location pulled from Flickr; if available).

Default:

“Picture(s) taken at”

Setting:

ImageNumberPreText

Function:

Define text shown before Image ID Number

Default:

“Image ID:”

Setting:

ImageShareMePreText

Function:

Define text shown before “Share Image” Links

Default:

“Share Image:”

Setting:

colorBoxNoDescription

Function:

Define text to be shown in colorBox if no image description available.

Default:

“No Image Description available.”

4. Other Text Strings

Setting:

ProgressMessageTextStep1

Function:

Define text to be shown as step 1 for the progress indicator

Default:

“Setup of Gallery Framework …”

Setting:

ProgressMessageTextStep2

Function:

Define text to be shown as step 2 for the progress indicator

Default:

“Loading Album Information …”

Setting:

SocialShareAlbumText

Function:

Define text to be shown in Twitter Share Text (before Link to Album)

Default:

“Check out this Album on Flickr … “

Setting:

SocialSharePhotoText

Function:

Define text to be shown in Twitter Share Text (before Link to Photo)

Default:

“Check out this Photo on Flickr … “

Setting:

PaginationShowingText

Function:

Define text part in “SHOWING Albums/Photos x to y out of z”

Default:

“Showing”

Setting:

PaginationAlbumsText

Function:

Define text part in “Showing ALBUMS/Photos x to y out of z”

Default:

“Albums”

Setting:

PaginationPhotosText

Function:

Define text part in “Showing Albums/PHOTOS x to y out of z”

Default:

“Photos”

Setting:

PaginationItemsToText

Function:

Define text part in “Showing Albums/Photos x TO y out of z”

Default:

“to”

Setting:

PaginationOutOfTotalText

Function:

Define text part in “Showing Albums/Photos x to y OUT OF z”

Default:

“out of”

Setting:

PaginationPageText

Function:

Define text part in “PAGE x of z”

Default:

“Page”

Setting:

PaginationPageOfText

Function:

Define text part in “Page x OF z”

Default:

“of”

Setting:

InfiniteScrollMoreText

Function:

Define text to be shown below thumbnails if Infinite Scroll is enabled

Default:

“Scroll down to show more Items!”

Setting:

InfiniteScrollLoadText

Function:

Define text to be shown on screen when an Infinite Scroll Event has been triggered

Default:

“Loading …”

Translations

Non-Standard Usage

Word of Advice

Any non-standard usage of the script is not covered by any support we are prepared to provide. Such usage is at your own risk!

While we designed the script to be as flexible as possible, it certainly has its limitation and any attempted usage outside of those limitations is highly discouraged, particularly since we do NOT provide any support for such usage.

To point you in the right direction, we prepared some basic guides about some “out-of-the-box” usage cases, but that is just out of courtesy and without any implication of additional support from our end.

Use Script in WordPress

This is a standalone jQuery / JavaScript based script, to be used on standard HTML websites. It is NOT designed to be used from within WordPress or other Content Management Systems (CMS). Nevertheless, with some effort, the script can be used with WordPress, although we NOT provide any support related to the usage of this script with WordPress or other CMS’s.

While this script is NOT an actual WordPress plugin, it can be used in WordPress as proven on this demo site. In order to utilize the gallery in WordPress, you need to be able to assign some custom CSS and JavaScript to the page that is showing the gallery.

That can be achieved by using 3rd party plugins. Personally, we prefer the “CSS & JS Toolbox Plugin”, which can be found here. But there are many other plugins available that provide the same functionality, but for the purpose of this manual, we will explain the embedding process while using the “CSS & JS Toolbox Plugin”.

As first step, upload all script files in your package to your server/host via FTP and remember/write down where the files are saved on the server.

After that, log in to your WordPress account, create a new page and assign the templates and everything else you would normally do in order to create a new page for your website. Design that page and add the content you require. Once you are finished with designing the page, click on the “Text” tab in your editor and find the place in your page where you want the gallery to appear and add the following:

<div id="Flickr_Album_Frame"></div>

Remember, this has to be done in the “Text” tab, and NOT the “Visual” tab! Publish the page.

As next step, install and activate the “CSS & JS Toolbox” plugin, after which you will find a new item in your WordPress Dashboard, called “CSS & JavaScript Toolbox”.

Click on that menu item and then click on the button “New Code Block” in order to add the CSS and JS content that is necessary for the gallery. Provide a name for the Code Block and set the “Location Hook” from “Header” to “Footer” and the “Initial Block Position” from “First Block” to “Last Block”. That will control where exactly WordPress will insert the Code Block in your page (either at the beginning of the HEAD/BODY section, or the end). Once you’re finished, click the “Create” Button.

Now, you should see a new and empty CodeBlock. As next step, you should select the page you created earlier (the one you want to use the CodeBlock for). On the right side, you will see a listing of all current pages; just check the one that will include the gallery. After that, enter the following code into the CodeBlock and adjust the path names to your actual server/host:

<!-- Load Files for fancyBox Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="...path.../plugins/fancybox/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="...path.../plugins/fancybox/helpers/jquery.fancybox-buttons.css" />
<link rel="stylesheet" type="text/css" href="...path.../plugins/fancybox/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="...path.../plugins/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="...path.../plugins/fancybox/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="...path.../plugins/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="...path.../plugins/fancybox/helpers/jquery.fancybox-media.js"></script>
<script type="text/javascript" src="...path.../plugins/fancybox/helpers/jquery.fancybox-easing.js"></script>

<!-- Load Files for colorBox Plugin (OPTIONAL; only necessary if actually utilized) -->
<link media="all" href="...path.../plugins/colorbox/jquery.colorbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="...path.../plugins/colorbox/jquery.colorbox.js"></script>

<!-- Load Files for prettyPhoto Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="...path.../plugins/prettyphoto/jquery.prettyPhoto.css" />
<script type="text/javascript" src="...path.../plugins/prettyphoto/jquery.prettyPhoto.js"></script>

<!-- Load Files for photoBox Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="...path.../plugins/photobox/photobox/photobox.css">
<script type="text/javascript" src="...path.../plugins/photobox/photobox/photobox.js"></script>

<!-- Load Files for ToolTipster Plugin (OPTIONAL; only necessary if actually utilized) -->
<link rel="stylesheet" type="text/css" href="...path.../plugins/tooltipster/jquery.tooltipster.css" />
<script type="text/javascript" src="...path.../plugins/tooltipster/jquery.tooltipster.min.js"></script>

<!-- Load Files for Metafizzy Isotope Plugin (REQUIRED!!!) -->
<script type="text/javascript" src="...path.../plugins/isotope/jquery.isotope1.min.js"></script>

<!-- Load Files for Flickr Gallery Plugin (REQUIRED!!!) -->
<link rel="stylesheet" type="text/css" href="...path.../css/jquery.flickr-iconfont.min.css" />
<link rel="stylesheet" type="text/css" href="...path.../css/jquery.flickr-album.min.css" />
<script type="text/javascript" src="...path.../js/jquery.flickr-album.min.js"></script>

The added code above will ensure that all files that are required for the script to work are loaded, but you still need to initialize the script. Using the same CodeBlock, add the following additional code:

<script type="text/javascript">
    (function ($) {
        $(document).ready(function($){
            // Initialize Flickr Gallery Script (Responsive Layout)
            $('#Flickr_Album_Frame').Flickr_Album({
                flickrID:               	'24662369@N07',
                flickrKeyAPI:           	'c07f724ab7ed6a1b01b799fe753c6d13',
                excludeAlbums:			[],
                responsiveGallery:		true,
                responsiveWidth:		100
            });
        });
    })(jQuery);
</script>

Please note the following: Most WordPress themes already load the jQuery file, so we have excluded it in the code above. If your theme does NOT load the jQuery file automatically, you need to load it by using the CodeBlock above.

Also, some themes or other plugins already utilized on your page might have loaded the isotope.js file already. If that’s the case, you can remove the reference to it in the CodeBlock above. Loading isotope.js multiple times can cause problems.

And of course, you should only load the plugins you are actually utilizing. For example, if you are using FancyBox as lightbox, you can remove all references to the other three lightboxes. And if you are not utilizing the ToolTip plugin, you can remove all references to it as well. There is no point in loading files you are not planning on using.

After you have done all that, save the CodeBlock. If you followed the instructions correctly, WordPress will now add the created CodeBlock to the page that is supposed to hold the gallery.

Embedding Gallery via iFrame

There are certain situations where it might be beneficial to embed the gallery via iframe so that it is technically “located outside” the webpage, but still shown as part of it.

While not an official feature of the gallery, the underlying script includes some automatic adjustments when dealing with iFrames. Some features of the script will be impaired when used inside an iFrame and whenever possible, the script will automatically disable those.

The most important thing is that you give the iFrame a specific and unique ID, so that the script can target the iFrame it is located in and adjust its height accordingly, based on the gallery’s content.

Furthermore, in order to avoid cross-domain issues, the page that holds the iFrame (Parent) and the page that hold the actual gallery (Child) MUST be located on the same server.

Also, if you want to utilize any of the included lightbox plugins, you MUST load the plugin files (for that specific lightbox) in the iFrame host page as well. The script will detect the iFrame and will attempt to open the lightbox from the parent page, which his necessary in order to open full screen. If the lightbox files are not loaded in the parent page, no lightbox will open. If you disable all three lighboxes, all images will open in a new tab/window. Please take a look at the included iFrame example in your download package for more information.

We are aware that this kind of negates the whole purpose of the iframe solution if you still have to load some of the files in your parent page, but these are browser limitation and this is the only workaround that will allow the lightboxes to still work. The only other solution would be to fully disable the lightboxes. And we always recommend to include the script directly into a page and NOt to use an iFrame solution.

Sample for iFrame Layout in Host Page with FancyBox Lightbox
<!-- Prepare an iFrame on your main page in order to embed the script -->
<head>
    ...
    <!--  Load Files for fancyBox Lightbox Plugin -->
    <link rel="stylesheet" type="text/css" href="plugins/fancybox/jquery.fancybox.css" />
    <link rel="stylesheet" type="text/css" href="plugins/fancybox/helpers/jquery.fancybox-buttons.css" />
    <link rel="stylesheet" type="text/css" href="plugins/fancybox/helpers/jquery.fancybox-thumbs.css" />
    <script type="text/javascript" src="plugins/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
    <script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-media.js"></script>
    <script type="text/javascript" src="plugins/fancybox/helpers/jquery.fancybox-easing.js"></script>
    ...
</head>

<body>
    ...
    <div id="Flickr_Gallery" style="margin: 0px auto; width: 60%;">
        <!-- This is the iFrame that will show the gallery from a different page -->
        <!-- Set width of iFrame to 100% and use DIV around to set actual width; either in % or px -->
        <iframe
                id="Flickr_Gallery_iFrame"
                src="Gallery_iFrame_Child.html"
                style="width: 100%; margin: 0px auto; padding: 0px; height: 190px; overflow: hidden;"
                frameborder="0"
                scrolling="no">
        </iframe>
    </div>
    ...
</body>

Custom Lightbox

This script comes with four included lightbox plugins (colorBoxfancyBox, prettyPhoto or photoBox). If you prefer to utilize a different lightbox or no lightbox at all, you can disable the usage of the lightbox by setting “colorBoxAllow“, “fancyBoxAllow”, “prettyPhotoAllow” and “photoBoxAllow” from “true” to “false“.

If you do that, you can also remove the corresponding lightbox CSS and JS files in the HEAD section of your website ( see “Setup – Quick Setup”). If none of the included ligtboxes are utilized and no other lightbox plugin is used instead, all images will open in a new tab or window (depending on browser settings).

In order to utilize a different lightbox plugin, you will obviously have to load all required JS and CSS files for the plugin in the HEAD section of your website.

All thumbnail image previews within each album are wrapped in a link with the following properties (see sample link below; links actually contain more information and inner elements but the ones listed are the ones relevant for calling a lightbox):

  • Each individual link / thumbnail has the class “photoThumb”
  • All links / thumbnails that belong to the same album also have the Album ID (i.e. “10150685457618306″) assigned as additional class name
  • The album ID is also stored in the “rel” tag of each link / thumbnail
<!-- Sample link markup for an individual photo thumbnail -->
<!-- ---------------------------------------------------- -->
<a class="photoThumb 10150685457618306 ..." ... target="_blank" href="link_to_full_size_image.jpg" rel="10150685457618306">
    ...
    <!-- This span contains the actual thumbnail image -->
    <span class="photoThumbWrap"></span>
</a>

When calling / initializing a different lightbox plugin, you could use the “rel” attribute to identify all images that belong to the same album and use that information to call the lightbox once someone clicks on the link / thumbnail. Please follow the instructions that come with your lightbox in order to call each full size image corrently, once a user clicks on the generated thumbnails. A basic example would be as follows:

$('a.photoThumb').on("click", function(e){
     e.preventDefault();
     var albumNumber = $(this).attr('rel');
     $('a.' + albumNumber).mylightbox({
     ...
     });
});
Lightboxes

Custom Tooltips

This script is utilizing the ToolTipster plugin (see “Sources and Credits”) to generate tooltips as a live mouseover event. The ToolTipster plugin allows for several different designs and layouts (default = “tooltipster-black”), which can be changed and adjusted in the “jquery.tooltipster.css” file that is part of this script.

Before you change the script to another tooltip plugin, you might want to play around with the different layouts that are already included by using the setting “tooltipDesign” (see “Optional Settings”) and apply one of the classes listed below:

  • tooltipster-white
  • tooltipster-gray
  • tooltipster-blue
  • tooltipster-green
  • tooltipster-red
  • tooltipster-orange
  • tooltipster-purple
  • tooltipster-pink
  • tooltipster-yellow
  • tooltipster-black
  • tooltipster-noir
  • tooltipster-punk

If you still desire to use a different tooltip plugin, you need to change the setting “tooltipUseInternal” to “false“, which disables the usage of the ToolTipster plugin. After you have done that, you can target any tooltip element by using the following four classes:

  • “TipGallery”
    – Tooltips for Album Thumbnails
  • “TipPhoto”
    – Tooltips for Image Thumbnails
  • “TipLightbox”
    – Tooltips for Image description in colorBox (lightbox)
  • “TipSocial”
    – Tooltips for Social Share Links

The anchor that is used to store the actual tooltip information is the default “title” attribute.

<!-- Sample markup for an album thumbnail with tooltip information -->
<!-- ------------------------------------------------------------- -->
<div class="albumThumb ... TipGallery ..." ... title="Some tooltip text">
    ...
    <!-- This span contains the actual thumbnail image -->
    <span class="albumThumbWrap"></span>
</div>

<!-- Sample markup for an image thumbnail with tooltip information -->
<!-- ------------------------------------------------------------- -->
<a class="photoThumb ... TipPhoto ..." ... title="Some tooltip text">
    ...
    <!-- This span contains the actual thumbnail image -->
    <span class="photoThumbWrap"></span>
</a>

The script will assign the four classes listed above only if you told it to do so in the settings:

  • createTooltipsAlbums
    – If “true”, assigns class “TipGallery” to all album thumbnails with tooltip data.
  • createTooltipsPhotos
    – If “true”, assigns class “TipPhoto” to all image thumbnails with tooltip data.
  • createTooltipsLightbox
    – If “true”, assigns class “TipLightbox” to all colorBox overlays with tooltip data.
  • createTooltipsSocial
    – If “true”, assigns class “TipSocial” to all social share links with tooltip data.

Of course, don’t forget to load the corresponding .js and .css files for your tooltip plugin and remove the files for ToolTipster from your HEAD section (see “Setup – Quick Setup”).

Tooltips

Other

Sources and Credits

Credit is due, where credit is due. For the purpose of this script, we have used the following resources as listed:

Isotope
Lightboxes
Tooltips
Top