Thumbnail Gallery
WP NextGEN Gallery Template

Getting Started

This NextGEN Template will help you to easily add a thumbnail gallery to your WordPress website or blog. The gallery is completely customizable, resizable and it is compatible with all browsers and devices (iPhone, iPad and Android smartphones).

If you like this plugin, feel free to rate it five stars     at CodeCanyon in downloads section. If you encounter any problems please do not give a low rating but contact us first so we can help you.

Licence

This item is sold under Envato Licences. Please read them and contact Envato Support if you have any questions.

Installation

Make sure you have NextGEN Gallery already installed. Upload the folder nggallery from the zip file to your theme folder /wp-content/themes/[your theme]/. If you already have other templates they will not be overwritten.

How to use it

In the short code you use to add NextGEN Gallery set the template value to dop-thumbnail-gallery.

Example:
[nggallery id=1 template=dop-thumbnail-gallery]

How to customize it

Go to nggallery/gallery-dop-thumbnail-gallery.php @line 41 and modify the settings.

Settings descriptions

General Styles & Settings
  • Width
    (value in pixels). Default value: 900. Set the width of the gallery.

  • Height
    (value in pixels). Default value: 600. Set the height of the gallery.

  • BgColor
    (color hex code). Default value: f1f1f1. Set gallery backgrund color.

  • BgAlpha
    (value from 0 to 100). Default value: 100. Set gallery alpha.

  • ImagesOrder
    (normal, random). Default value: normal. Set images order.

  • ResponsiveEnabled
    (true, false). Default value: true. Enable responsive layout.

Thumbnails Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • ThumbnailsPosition
    (top, right, bottom, left). Default value: bottom. Set the position of the thumbnails in the gallery.

  • ThumbnailsOverImage
    (true, false). Default value: false. If the value is true the thumbnails will be displayed over the big image.

  • ThumbnailsBgColor
    (color hex code). Default value: f1f1f1. Set the color for the thumbnails background.

  • ThumbnailsBgAlpha
    (value from 0 to 100). Default value: 100. Set the transparency for the thumbnails background.

  • ThumbnailsSpacing
    (value from 0 to 100). Default value: 100. Set the transparency for the thumbnails background.

  • ThumbnailsPaddingTop
    (value in pixels). Default value: 0. Set the top padding for the thumbnails.

  • ThumbnailsPaddingRight
    (value in pixels). Default value: 5. Set the right padding for the thumbnails.

  • ThumbnailsPaddingBottom
    (value in pixels). Default value: 5. Set the bottom padding for the thumbnails.

  • ThumbnailsPaddingLeft
    (value in pixels). Default value: 5. Set the left padding for the thumbnails.

Thumbnails Navigation Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • ThumbnailsNavigation
    (mouse, arrows). Default value: mouse. Set the thumbnails navigation type.

  • ThumbnailsNavigationPrev
    (path to image). Upload the image for thumbnails navigation's previous button.

  • ThumbnailsNavigationPrevHover
    (path to image). Upload the image for thumbnails navigation's previous hover button.

  • ThumbnailsNavigationNext
    (path to image). Upload the image for thumbnails navigation's next button.

  • ThumbnailsNavigationNextHover
    (path to image). Upload the image for thumbnails navigation's next hover button.

Styles & Settings for a Thumbnail
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • ThumbnailLoader
    (path to image). Set the loader for the thumbnails.

  • ThumbnailWidth
    (the size in pixels). Default value: 60. Set the width of a thumbnail.

  • ThumbnailHeight
    (the size in pixels). Default value: 60. Set the height of a thumbnail.

  • ThumbnailWidthMobile
    (the size in pixels). Default value: 60. Set the width of a thumbnail on mobile devices.

  • ThumbnailHeightMobile
    (the size in pixels). Default value: 60. Set the height of a thumbnail on mobile devices.

  • ThumbnailAlpha
    (value from 0 to 100). Default value: 50. Set the transparency of a thumbnail.

  • ThumbnailAlphaHover
    (value from 0 to 100). Default value: 100. Set the transparency of a thumbnail when hover.

  • ThumbnailAlphaSelected
    (value from 0 to 100). Default value: 100. Set the transparency of a thumbnail when selected.

  • ThumbnailBgColor
    (color hex code). Default value: f1f1f1. Set the color of a thumbnail's background.

  • ThumbnailBgColorHover
    (color hex code). Default value: 000000. Set the color of a thumbnail's background when hover.

  • ThumbnailBgColorSelected
    (color hex code). Default value: 000000. Set the color of a thumbnail's background when selected.

  • ThumbnailBorderSize
    (value in pixels). Default value: 2. Set the size of a thumbnail's border.

  • ThumbnailBorderColor
    (color hex code). Default value: f1f1f1. Set the color of a thumbnail's border.

  • ThumbnailBorderColorHover
    (color hex code). Default value: 000000. Set the color of a thumbnail's border when hover.

  • ThumbnailBorderColorSelected
    (color hex code). Default value: 000000. Set the color of a thumbnail's border when selected.

  • ThumbnailPaddingTop
    (value in pixels). Default value: 0. Set top padding value of a thumbnail.

  • ThumbnailPaddingRight
    (value in pixels). Default value: 0. Set right padding value of a thumbnail.

  • ThumbnailPaddingBottom
    (value in pixels). Default value: 0. Set bottom padding value of a thumbnail.

  • ThumbnailPaddingLeft
    (value in pixels). Default value: 0. Set left padding value of a thumbnail.

Image Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • ImageLoader
    (path to image). Set the loader for the big image.

  • ImageBgColor
    (color hex code). Default value: afafaf. Set the color for the image background.

  • ImageBgAlpha
    (value from 0 to 100). Default value: 100. Set the transparency for the image background.

  • ImageDisplayType
    (fit, full). Default value: fit. Set image display type. The fit value will display the all image. The full value will display the image on the all stage, padding and margin values will not be taken into consideration.

  • ImageDisplayTime
    (time in miliseconds). Default value: 1000. Set image display duration.

  • ImageMarginTop
    (value in pixels). Default value: 20. Set top margin value for the image.

  • ImageMarginRight
    (value in pixels). Default value: 20. Set right margin value for the image.

  • ImageMarginBottom
    (value in pixels). Default value: 20. Set bottom margin value for the image.

  • ImageMarginLeft
    (value in pixels). Default value: 20. Set top left value for the image.

  • ImagePaddingTop
    (value in pixels). Default value: 5. Set top padding value for the image.

  • ImagePaddingRight
    (value in pixels). Default value: 5. Set right padding value for the image.

  • ImagePaddingBottom
    (value in pixels). Default value: 5. Set bottom padding value for the image.

  • ImagePaddingLeft
    (value in pixels). Default value: 5. Set left padding value for the image.

Navigation Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • NavigationEnabled
    (true, false). Default value: true. Enable navigation buttons.

  • NavigationOverImage
    (true, false). Default value: true. Show navigation buttons over or outside the image.

  • NavigationPrev
    (path to image). Upload the image for navigation's previous button.

  • NavigationPrevHover
    (path to image). Upload the image for navigation's previous hover button.

  • NavigationNext
    (path to image). Upload the image for navigation's next button.

  • NavigationNextHover
    (path to image). Upload the image for navigation's next hover button.

  • NavigationLightbox
    (path to image). Upload the image for navigation's lightbox button.

  • NavigationLightboxHover
    (path to image). Upload the image for navigation's lightbox hover button.

  • NavigationTouchDeviceSwipeEnabled
    (true, false). Default value: true. Enable swipe navigation on touch devices.

Image Caption Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • CaptionWidth
    (value in pixels). Default value: 900. Set caption width.

  • CaptionHeight
    (value in pixels). Default value: 75. Set caption height.

  • CaptionTitleColor
    (color hex code). Default value: 000000. Set caption title color.

  • CaptionTextColor
    (color hex code). Default value: 000000. Set caption text color.

  • CaptionBgColor
    (color hex code). Default value: ffffff. Set caption background color.

  • CaptionBgAlpha
    (value from 0 to 100). Default value: 50. Set caption alpha color.

  • CaptionPosition
    (top, right, bottom, left, top-left, top-right, bottom-left, bottom-right). Default value: bottom. Set caption position.

  • CaptionOverImage
    (true, false). Default value: true. Display caption over image, or not.

  • CaptionScrollScrubColor
    (color hex code). Default value: 777777. Set scroll scrub color.

  • CaptionScrollBgColor
    (color hex code). Default value: e0e0e0. Set scroll background color.

  • CaptionMarginTop
    (value in pixels). Default value: 0. Set caption top margin.

  • CaptionMarginRight
    (value in pixels). Default value: 0. Set caption right margin.

  • CaptionMarginBottom
    (value in pixels). Default value: 0. Set caption bottom margin.

  • CaptionMarginLeft
    (value in pixels). Default value: 0. Set caption left margin.

  • CaptionPaddingTop
    (value in pixels). Default value: 10. Set caption top padding.

  • CaptionPaddingRight
    (value in pixels). Default value: 10. Set caption right padding.

  • CaptionPaddingBottom
    (value in pixels). Default value: 10. Set caption bottom padding.

  • CaptionPaddingLeft
    (value in pixels). Default value: 10. Set caption left padding.

Lightbox Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • LightboxEnabled
    (true, false). Default value: true. Enable the lightbox.

  • LightboxWindowColor
    (color hex code). Default value: 000000. Set the color for the lightbox window.

  • LightboxWindowAlpha
    (value from 0 to 100). Default value: 80. Set the transparency for the lightbox window.

  • LightboxLoader
    (path to image). Set the loader for the lightbox image.

  • LightboxBgColor
    (color hex code). Default value: 000000. Set the color for the lightbox background.

  • LightboxBgAlpha
    (value from 0 to 100). Default value: 100. Set the transparency for the lightbox background.

  • LightboxMarginTop
    (value in pixels). Default value: 70. Set top margin value for the lightbox.

  • LightboxMarginRight
    (value in pixels). Default value: 70. Set right margin value for the lightbox.

  • LightboxMarginBottom
    (value in pixels). Default value: 70. Set bottom margin value for the lightbox.

  • LightboxMarginLeft
    (value in pixels). Default value: 70. Set top left value for the lightbox.

  • LightboxPaddingTop
    (value in pixels). Default value: 10. Set top padding value for the lightbox.

  • LightboxPaddingRight
    (value in pixels). Default value: 10. Set right padding value for the lightbox.

  • LightboxPaddingBottom
    (value in pixels). Default value: 10. Set bottom padding value for the lightbox.

  • LightboxPaddingLeft
    (value in pixels). Default value: 10. Set left padding value for the lightbox.

Lightbox Navigation Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • LightboxNavigationPrev
    (path to image). Upload the image for lightbox navigation's previous button.

  • LightboxNavigationPrevHover
    (path to image). Upload the image for lightbox navigation's previous hover button.

  • LightboxNavigationNext
    (path to image). Upload the image for lightbox navigation's next button.

  • LightboxNavigationNextHover
    (path to image). Upload the image for lightbox navigation's next hover button.

  • LightboxNavigationClose
    (path to image). Upload the image for lightbox navigation's close button.

  • LightboxNavigationCloseHover
    (path to image). Upload the image for lightbox navigation's close hover button.

  • LightboxNavigationInfoBgColor
    (color hex code). Default value: 000000. Set the color for the lightbox info background.

  • LightboxNavigationInfoTextColor
    (color hex code). Default value: dddddd. Set the color for the lightbox info text.

  • LightboxNavigationTouchDeviceSwipeEnabled
    (true, false). Default value: true. Enable swipe lightbox navigation on touch devices.

Social Share Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • SocialShareEnabled
    (true, false). Default value: true. Enable AddThis Social Share.

  • SocialShare
    (path to image). Upload the image for social share button.

  • SocialShareLightbox
    (path to image). Upload the image for lightbox social share button.

Tooltip Styles & Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • TooltipEnabled
    (true, false). Default value: false. Enable the tooltip. The gallery item needs to have a title for tooltip to work.

  • TooltipBgColor
    (color hex code). Default value: ffffff. Set tooltip background color.

  • TooltipStrokeColor
    (color hex code). Default value: 000000. Set tooltip stroke color.

  • TooltipTextColor
    (color hex code). Default value: 000000. Set tooltip text color.

Slideshow Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • Slideshow"
    (true, false). Default value: false. Enable or disable the slideshow.

  • SlideshowTime
    (time in miliseconds). Default: 5000. How much time an image stays until it passes to the next one.

  • SlideshowAutostart
    (true, false). Default: true. Set it to true if you want the slideshow to start after imediatly after gallery is displayed.

  • SlideshowLoop
    (true, false). Default: true. Set it to false if you want the slideshow to stop when it reaches the last image.

  • SlideshowPlay
    (path to image). Upload the image for slideshow's play button.

  • SlideshowPlayHover
    (path to image). Upload the image for slideshow's play hover button.

  • SlideshowPause
    (path to image). Upload the image for slideshow's pause button.

  • SlideshowPauseHover
    (path to image). Upload the image for slideshow's pause hover button.

Auto Hide Settings
  • ThumbnailsSpacing
    (value in pixels). Default value: 15. Sets the space between thumbnails.

  • AutoHide
    (true, false). Default: false. Hide the thumbnails and buttons and display them when you hover the gallery.

  • AutoHideTime
    time in miliseconds). Default: 2000. Set the time after which the thumbnails and buttons hide.

FAQ

  • 1. How do I add the gallery template?

    Please watch this video.

  • 2. How do I add media to the gallery template?

    You need to create 2 Image Custom Fields using NextGEN Custom Fields Plugin, Media & LightboxMedia.

    Media (HTML, Flash, videos, etc.)
    LightboxMedia (HTML, Flash, videos in lightbox)

    Please watch this video.

  • 3. How do I edit gallery options?

    Open nggallery/gallery-dop-thumbnail-gallery.php file and edit the options @line 41.

  • 4. Why only a limited number of images appear in the gallery?

    In order to solve this problem you must go to WP Admin -> Gallery (sidebar) -> Gallery Settings -> NextGEN Basic Thumbnails > Images per page.

  • 5. Why does not the main image show?

    In order to solve this issue, you must to go to WP Admin -> Gallery (sidebar) -> Gallery Settings -> NextGEN Basic Slideshow -> Set Enable flash slideshow to No.

  • 6. How do I remove rounded corners from thumbnails & images?

    Open file nggallery/assets/gui/css/jquery.dop.NextGENThumbnailGallery.css in an editor and change or remove border-radius properties.

  • 7. Why does not the gallery appear in my website?

    1. If the gallery does not appear, it might be because there is a problem with the JavaScript in your website. If you cannot identify the problem, contact us, including in the message a link to the page where the problem appears. We will identify and fix the issue for you. However, we will not fix the problems that are not caused by this plugin.

    2. If you use a child theme, you need to copy the files both in parent and child theme.

    3. Another reason might be that you load more than one jQuery file into your theme. The proper way to load jQuery into your theme or plugin is the following:

How to update

Latest Version: 1.6

Please note:
Make a backup of the Plugin inside your WordPress installation folder /wp-content/themes/[your theme]/nggallery/.

To update the Plugin, login to CodeCanyon, head over to your Downloads section and re-download the plugin like you did when you bought it.

Extract the zip's contents, look for the nggallery folder, and after you have all the new files upload them using FTP to the /wp-content/themes/[your theme]/nggallery/ folder overwriting the old ones (this is why it's important to backup any changes you've made to the plugin files).
If you changed the settings in the template file (gallery-dop-thumbnail-gallery.php), use the one you backed up. If new settings are added you will need to redo the template file (view Changelog).
If you didn't make any changes to the plugin files, you are free to overwrite them with the new ones without the risk of losing any plugins settings, and backwards compatibility is guaranteed.

Changelog

  • Version 1.6  -  05 May 2013

    • Bug Fixes:
    • SEO fixes.
    • Responsive Media bug fix.
    • AddThis fixed.
  • Version 1.5  -  30 March 2013

    • Bug Fixes:
    • Gallery resize on hidden elements bug fix.
  • Version 1.4  -  31 January 2013

    • New Features:
    • Caption can be positioned over the image (new setting).
    • Option to move navigation buttons outside the image (new setting).
    • Remove lightbox margins on mobile devices.
    • Set thumbnails size when gallery is responsive on mobile devices (new setting).
    • Vertical thumbnails now position correctly after loading.
    • You can navigate the gallery with arrows + enter to open the lightbox.
    • Bug Fixes:
    • Lightbox display bug on Chrome is fixed.
  • Version 1.3

    • Bug Fixes:
    • Small bugs fixes.
  • Version 1.2

    • New Features:
    • AddThis Social Share added (new setting).
    • Bug Fixes:
    • Small bugs fixes.
  • Version 1.1

    • New Features:
    • Responsive layout added.
    • Bug Fixes:
    • Minor bugs fixes.
  • Version 1.0  -  01 March 2012

    • Initial release.

Assets

Support

If you did not find the answer you were looking for in the given documentation, please access our Support Forums. If you cannot find the answer to your issue, post a new topic, describing the problem you are having. Please add in your message a link to where you use the item or any other stuff that might be relevant (don’t include any passwords or any confidential information).

Note:
On our Support Forums you need to login and confirm the Item Purchase Code for the item you need help with.

Work time:
07:00 (07:00 AM) – 16:00 (04:00 PM) GMT | Working days only (Monday – Friday)

We do NOT provide support in comments section. Please use it for presale questions only.

Disclaymer

If you buy an Envato item, according to Envato rules, you are not entitled to support or free customizations.
WE WILL OFFER FREE SUPPORT only for bugs, item related issues and very small modifications(a few minutes of work). Everything else will be considered as custom work, for which we charge $35/hour.
Offering support will help us improve and fix the bugs in our products and a great way to do this is to see what problem appear when people use them.
If your request for a feature has been made by other people is it possible, but not a rule, to add that feature in a future update. Please don't buy the item if a feature doesn't exist and you need it. We will not add it for you in record time. If you are not sure if the feature exists please ask first.

PS: Do not forget to rate this item   .