nanoGALLERY - image gallery simplified

Apr 13, 2014 in Slideshow 10534 views

Download

Overview
Documents

User Rating: 4.4/5 ( 8 votes)

Your Rating:

nanoGALLERY - Touch enabled, responsive, fast and it supports pulling in Flickr/Picasa/Google+ photo albums among others.

Features

Image Gallery

Display thumbnails with title and description. Galleries are displayed with smooth animation. Support pagination. Images are displayed in full view via a modal popup window.

Flickr, Picasa, Google+

New published photos to Flickr/Picasa/Google+ are automatically displayed in the gallery. No need to upload images manually to your site. Display photos on your homepage with your custom design.

Mobile Friendly

Touchscreen enabled and responsive. Download small images on small display (Flickr/Picasa/Google+).

Hover Effects

Easy setup of thumbnail hover animation. Effects can be combined for more possibilities. 2D/3D effects available. Touchscreen friendly.

Multi-Level Navigation

Breadcrumb to navigate in photo albums. Unlimited number of sub-levels.

CSS3 Acceleration

Support CSS3 acceleration on modern browser. Compatible with older browser too.

User Friendly

Easy to use. Support browser BACK button or browser BACK/FORWARD navigation. Can be controlled using mouse, keyboard or touchscreen.

Easy Setup and Highly Customizable

Designed to be really as simple as possible to setup and to use. Many options are available to advanced users to tweak the gallery.

Color Scheme

Allows to change layout without editing any CCS file. Can be used with pre-defined or custom ones.

Front-end Frameworks

Successfully tested with Boostrap (Twitter), Foundation (Zurb) and Gumby.

Link to URLs

Thumbnails can be used to open an URL instead of displaying an image.

Live Preview

Easy and quick customization with the integrated demonstration panel. Define the settings and view the result directly on the screen.

Slideshow, fullscreen, pagination, image lazy load, themes, deep linking, data caching, image pre-loading, i18n, ...

Why another jQuery Gallery?

There are many excellent galleries (for jQuery, or other frameworks), but for one my projects I couldn't find one that really fits my main requirements:

        - responsive and mobile friendly,
        - ability to easily and quickly publish new photos,
        - organise photos in albums.

I didn't want to spend time for rich publishing features. So I chose to use an online storage service like Flickr. Flickr has already great upload features on desktop and on mobile devices. You can add titles, descriptions, tags and you can arrange photos in photosets. One part of the project was done...

After this, I was able to focus on the other features. And so I developped this gallery as a jQuery plugin.

1. INCLUDE JS AND CSS FILES

<!-- Add jQuery library (MANDATORY) -->
<script type="text/javascript" src="third.party/jquery-1.7.1.min.js"></script> 

<!-- Add Hammer.js plugin (OPTIONAL - this is only required for swipe support) -->
<script type="text/javascript" src="third.party/hammer.js/hammer.min.js"></script> 

<!-- Add nanoGALLERY plugin files (MANDATORY) -->
<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.nanogallery.js"></script>

2. HTML

<div id="nanoGallery3">
            <a href="demonstration/img_01.jpg" data-ngthumb="demonstration/img_01t.jpg" data-ngdesc="Description1">Image1</a>
            <a href="demonstration/img_02.jpg" data-ngthumb="demonstration/img_02t.jpg"></a>
</div>

3. JAVASCRIPT

 $(document).ready(function () {
          $("#nanoGallery3").nanoGallery();
});

4. OPTIONS

Option	Type	Default	Description
thumbnailHeight	integer string	154	Thumbnails height in pixels, or 'auto' Value 'auto' requires the imagesloaded.js plugin: <script type="text/javascript" src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
thumbnailWidth	integer	230	Thumbnails width in pixels
maxItemsPerLine	integer	0	Maximum number of thumbnails per line
viewer	string	'internal'	Image display method: 'internal', 'fancybox'
thumbnailLabel	object		Display options for the image label (title and description) default: {position:'overImageOnBottom', display:true, displayDescription:true, hideIcons:false } parameters: - position (string): 'overImageOnBottom', 'overImageOnTop', 'overImageOnMiddle', 'onBottom' - display (boolean): display the label - displayDescription (boolean): display the description - titleMaxLength (integer): title maximum length to display - descriptionMaxLength (integer): description maximum length to display - hideIcons (boolean): hide thumbnails icons - align (string): horizontal text alignment (possible values: 'right', 'center', 'left')
thumbnailHoverEffect	string object array	'none'	Thumbnail mouse hover effect Possible values: 'slideUp', 'slideDown', 'slideLeft', 'slideRight', 'imageSlideUp', 'imageSlideDown', 'imageSlideLeft', 'imageSlideRight', 'labelAppear', 'labelAppear75', 'labelSlideDown', 'labelSlideUp', 'labelOpacity50', 'imageOpacity50', 'borderLighter', 'borderDarker' 'imageInvisible', 'descriptionSlideUp', 'labelSplitVert', 'labelSplit4', 'labelAppearSplitVert', 'labelAppearSplit4', 'imageSplitVert', 'imageSplit4' Transit jQuery plugin is required for following additional values: 'imageScale150', 'imageScale150Outside', 'scale120', 'overScale', 'overScaleOutside', 'scaleLabelOverImage', 'rotateCornerBR', 'rotateCornerBL', 'imageRotateCornerBR', 'imageRotateCornerBL', 'imageFlipHorizontal', 'imageFlipVertical' Include it in your <head>: <script type="text/javascript" src="third.party/transit/jquery.transit.min.js"></script>
theme	string	'default'	Name of the theme the corresponding css-file must also be included in the html file Possible values: 'default', 'clean', 'light')
colorScheme	string object	'none'	Gallery color scheme (breadcrumb and thumbnails) Possible values: 'none', 'dark','darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light', 'lightBackground' Custom color schemes are supported.
colorSchemeViewer	string object	'none'	Image viewercolor scheme Possible values: 'none', 'dark','darkRed', 'darkGreen', 'darkBlue', 'darkOrange', 'light' Custom color schemes are supported.
touchAnimation	boolean	true	Enable animation on touch event
galleryToolbarWidthAligned	boolean	true	Toolbar is automatically resized to the width of the thumbnails area
galleryToolbarHideIcons	boolean	false	Hide icons in toolbar (breadcrumb)
slideshowDelay	integer	3000	Photo autoplay speed in milliseconds (slideshow)
paginationMaxItemsPerPage	integer	0	Maximum number of thumbnails per page (pagination) 0= pagination is disabled
paginationMaxLinesPerPage	integer	0	Maximum number of thumbnail lines per page (pagination) 0= pagination is disabled
thumbnailDisplayInterval	integer	30	Interval in ms between the display of 2 thumbnails
thumbnailDisplayTransition	boolean	true	Transition animation before displaying one thumbnail
thumbnailLazyLoad	boolean	true	Lazy load of thumbnails image (images are loaded only when displayed in the viewport)
thumbnailLazyLoadTreshold	integer	100	Extend the viewport area (in pixel) for thumbnails image lazy load
i18n	object		UI string translations
locationHash	boolean	false	Browser back/forward navigation and Deep Linking of images and photo albums. Note: only one gallery per page should use this feature.
viewerDisplayLogo	boolean	false	Display logo over images (defined in CSS file)
viewerToolbar	object		Display options for the viewer toolbar (navigation buttons and captions) Default: {position:'bottom', style:'innerImage'} Parameters: - position: 'top', 'bottom' - style: 'innerImage', 'stuckImage', 'fullWidth'

5. Flickr Storage

HTML

<div id="nanoGallery1"></div>

JAVASCRIPT

$(document).ready(function () {
          $("#nanoGallery1").nanoGallery({
            kind:'flickr',
            userID:'34858669@N00'
          });
 });

OPTIONS

Option	Type	Default	Description
kind	string		Storage type (mandatory). Must be set to 'flickr'
userID	string		User ID of the Flickr account (mandatory) To retrieve your Flickr user ID, use this page: Flickr userID
photoset	string		Photoset ID - to display only the specified photoset
displayBreadcrumb	boolean	true	Display the navigation breadcrumb
blackList	string		List of keywords to ignore - albums containing one of the keywords in the title will be ignored. Keyword separator is \|
whiteList	string		List of keywords to authorize - albums must contain one of the keywords to be displayed. Keyword separator is \|
albumList	string		List of albums to display. Separator is \|
photoSorting	string	'standard'	Albums sort order: 'standard', 'reversed', 'random'
albumSorting	string	'standard'	Photos sort order: 'standard', 'reversed', 'random'

6. Picasa/Google+ Storage

HTML

<div id="nanoGallery2"></div>

JAVASCRIPT

$(document).ready(function () {
          $("#nanoGallery2").nanoGallery({
            kind:'picasa',
            userID:'[email protected]',
            blackList:'Scrapbook|forhomepage|profil'
          });
});

OPTIONS

Option	Type	Default	Description
kind	string		Storage type (mandatory). Must be set to 'picasa'
userID	string		User ID of the Picasa/Google+ account (mandatory)
album	string		Album ID - to display only the specified album
displayBreadcrumb	boolean	true	Display the navigation breadcrumb
blackList	string	'scrapbook\|profil'	List of keywords to ignore - albums containing one of the keywords in the title will be ignored. Keyword separator is \|
whiteList	string		List of keywords to authorize - albums must contain one of the keywords to be displayed. Keyword separator is \|
albumList	string		List of albums to display. Separator is \|
photoSorting	string	'standard'	Albums sort order: 'standard', 'reversed', 'random'
albumSorting	string	'standard'	Photos sort order: 'standard', 'reversed', 'random'

7. Helpers

Helpers provide a simple mechanism to extend the capabilities of nanoGALLERY. Helpers are implemented since nanoGALLERY v4.3.1

Helper	Description
thumbnailInit	Called once after one thumbnail's build.
thumbnailHoverInit	Called once to initialize the thumbnail hover effect. Example: thumbnailHoverInit: function ($elt, item) { $elt.find('.labelDescription').css({'opacity':'0'}); }
thumbnailHover	Called on thumbnail hover. Example: thumbnailHover: function ($elt, item) { $elt.find('.labelDescription').delay(150).animate({'opacity':'1'},400); }
thumbnailHoverOut	Called on thumbnail hover out. Example: thumbnailHoverOut: function ($elt, item) { $elt.find('.labelDescription').animate({'opacity':'0'},300); }

JS Tutorial

nanoGALLERY - image gallery simplified

Features

Why another jQuery Gallery?

Related Articles