Thumbnail Gallery
WordPress Plugin

Getting Started

This Plugin 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). You will be able to insert it in any page or post you want with an inbuilt short code generator.

If you like this plugin, feel free to rate it five stars     at your CodeCanyon account in Downloads section. If you encounter any problems, before rating the item, contact us so we can help you fix them.

Licence

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

Installation

Upload the folder doptg from the zip file to wp-content/plugins/ and activate the plugin in your admin panel or upload doptg.zip in the Add new section. Make sure that folder doptg/uploads/ and all subfolders inside it have the permissions set to 777.

How to use it

After installation, login with the username and password from the 3rd installation step and hover/click the mouse over the Question Mark icons for instructions.

Settings descriptions

General Styles & Settings
  • Name
    Change gallery name.

  • Gallery Data Parse Method
    (AJAX, HTML). Default value: AJAX. Set the method by which the data will be parsed to the gallery.

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

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

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

  • Images Order
    (Normal, Random). Default value: Normal. Set images order.

  • Responsive Enabled
    (Enabled, Disabled). Default value: Enabled. Enable responsive layout.

Thumbnails Styles & Settings
  • Thumbnails Position
    (Top, Right, Bottom, Left). Default value: Bottom. Set the position of the thumbnails in the gallery.

  • Thumbnails Over Image
    (Enabled, Disabled). Default value: Disabled. If the value is true the thumbnails will be displayed over the big image.

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

  • Thumbnails Background Alpha
    (value from 0 to 100). Default value: 100. Set the transparancy for the thumbnails background.

  • Thumbnails Spacing
    (value in pixels). Default value: 5. Set the space between thumbnails.

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

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

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

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

Thumbnails Navigation Styles & Settings
  • Thumbnails Navigation Type
    (Mouse, Arrows). Default value: Mouse. Set the thumbnails navigation type.

  • Thumbnails Navigation Previous Button Image
    (path to image). Upload the image for thumbnails navigation previous button.

  • Thumbnails Navigation Previous Button Hover Image
    (path to image). Upload the image for thumbnails navigation previous hover button.

  • Thumbnails Navigation Next Button Image
    (path to image). Upload the image for thumbnails navigation next button.

  • Thumbnails Navigation Next Button Hover Image
    (path to image). Upload the image for thumbnails navigation next hover button.

Styles & Settings for a Thumbnail
  • Thumbnail Loader
    (path to image). Set the loader for the thumbnails.

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

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

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

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

  • Thumbnail Alpha
    (value from 0 to 100). Default value: 50. Set the transparancy of a thumbnail.

  • Thumbnail Alpha Hover
    (value from 0 to 100). Default value: 100. Set the transparancy of a thumbnail when hover.

  • Thumbnail Alpha Selected
    (value from 0 to 100). Default value: 100. Set the transparancy of a thumbnail when selected.

  • Thumbnail Background Color
    (color hex code). Default value: f1f1f1. Set the color of a thumbnail background.

  • Thumbnail Background Color Hover
    (color hex code). Default value: 000000. Set the color of a thumbnail background when hover.

  • Thumbnail Background Color Selected
    (color hex code). Default value: 000000. Set the color of a thumbnail background when selected.

  • Thumbnail Border Size
    (value in pixels). Default value: 2. Set the size of a thumbnail border.

  • Thumbnail Border Color
    (color hex code). Default value: f1f1f1. Set the color of a thumbnail border.

  • Thumbnail Border Color Hover
    (color hex code). Default value: 000000. Set the color of a thumbnail border when hover.

  • 'Thumbnail Border Color Selected
    (color hex code). Default value: 000000. Set the color of a thumbnail border when selected.

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

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

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

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

Image Styles & Settings
  • Image Loader
    (path to image). Set the loader for the big image.

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

  • Image Background Alpha
    (value from 0 to 100). Default value: 100. Set the transparancy for the image background.

  • Image Display Type
    (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.

  • Image Display Time
    (time in miliseconds). Default value: 1000. Set image display duration.

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

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

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

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

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

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

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

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

Navigation Styles & Settings
  • Enable Navigation
    (Enabled, Disabled). Default value: Enabled. Enable navigation buttons.

  • Navigation Over Image
    (Enabled, Disabled). Default value: Enabled. Show navigation buttons over or outside the image.

  • Navigation Previous Button Image
    (path to image). Upload the image for navigation previous button.

  • Navigation Previous Button Hover Image
    (path to image). Upload the image for navigation previous hover button.

  • Navigation Next Button Image
    (path to image). Upload the image for navigation next button.

  • Navigation Next Button Hover Image
    (path to image). Upload the image for navigation next hover button.

  • Navigation Lightbox Button Image
    (path to image). Upload the image for navigation lightbox button.

  • Navigation Lightbox Button Hover Image
    (path to image). Upload the image for navigation lightbox hover button.

  • Swipe Navigation Enabled
    (Enabled, Disabled). Default value: Enabled. Enable swipe navigation on touch devices.

Image Caption Styles & Settings
  • Caption Width
    (value in pixels). Default value: 900. Set caption width.

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

  • Caption Title Color
    (color hex code). Default value: 000000. Set caption title color.

  • Caption Text Color
    (color hex code). Default value: 000000. Set caption text color.

  • Caption Background Color
    (color hex code). Default value: ffffff. Set caption background color.

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

  • Caption Position
    (Top, Right, Bottom, Left, Top-Left, Top-Right, Bottom-Left, Bottom-Right). Default value: Bottom. Set caption position.

  • Caption Over Image
    (Enabled, Disabled). Default value: Enabled. Display caption over image, or not.

  • Caption Scroll Scrub Color
    (color hex code). Default value: 777777. Set scroll scrub color.

  • Caption Scroll Background Color
    (color hex code). Default value: e0e0e0. Set scroll background color.

  • Caption Margin Top
    (value in pixels). Default value: 0. Set caption top margin.

  • Caption Margin Right
    (value in pixels). Default value: 0. Set caption right margin.

  • Caption Margin Bottom
    (value in pixels). Default value: 0. Set caption bottom margin.

  • Caption Margin Left
    (value in pixels). Default value: 0. Set caption left margin.

  • Caption Padding Top
    (value in pixels). Default value: 10. Set caption top padding.

  • Caption Padding Right
    (value in pixels). Default value: 10. Set caption right padding.

  • Caption Padding Bottom
    (value in pixels). Default value: 10. Set caption bottom padding.

  • Caption Padding Left
    (value in pixels). Default value: 10. Set caption left padding.

Lightbox Styles & Settings
  • Enable Lightbox
    (Enabled, Disabled). Default value: Enabled. Enable the lightbox.

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

  • Lightbox Window Alpha
    (value from 0 to 100). Default value: 80. Set the transparancy for the lightbox window.

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

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

  • Lightbox Background Alpha
    (value from 0 to 100). Default value: 100. Set the transparancy for the lightbox background.

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

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

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

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

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

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

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

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

Lightbox Navigation Styles & Settings
  • Lightbox Navigation Previous Button Image
    (path to image). Upload the image for lightbox navigation previous button.

  • Lightbox Navigation Previous Button Hover Image
    (path to image). Upload the image for lightbox navigation previous hover button.

  • Lightbox Navigation Next Button Image
    (path to image). Upload the image for lightbox navigation next button.

  • Lightbox Navigation Next Button Hover Image
    path to image). Upload the image for lightbox navigation next hover button.

  • Lightbox Navigation Close Button Image
    (path to image). Upload the image for lightbox navigation close button.

  • Lightbox Navigation Close Button Hover Image
    (path to image). Upload the image for lightbox navigation close hover button.

  • Lightbox Navigation Info Background Color
    (color hex code). Default value: 000000. Set the color for the lightbox info background.

  • Lightbox Navigation Info Text Color
    (color hex code). Default value: dddddd. Set the color for the lightbox info text.

  • Swipe Lightbox Navigation Enabled
    (Enabled, Disabled). Default value: Enabled. Enable swipe lightbox navigation on touch devices.

Social Share Styles & Settings
  • Social Share Enabled
    (Enabled, Disabled). Default value: Enabled. Enable AddThis Social Share.

  • Social Share Button Image
    (path to image). Upload the image for social share button.

  • Lightbox Social Share Button Image
    (path to image). Upload the image for lightbox social share button.

Tooltip Styles & Settings
  • Tooltip Enabled
    (Enabled, Disabled). Default value: Disabled. Enable the tooltip. The gallery item needs to have a title for tooltip to work.

  • Tooltip Background Color
    (color hex code). Default value: ffffff. Set tooltip background color.

  • Tooltip Stroke Color
    (color hex code). Default value: 000000. Set tooltip stroke color.

  • Tooltip Text Color
    (color hex code). Default value: 000000. Set tooltip text color.

Slideshow Settings
  • Slideshow
    (Enabled, Disabled). Default value: Disabled. Enable or disable the slideshow.

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

  • Slideshow Autostart
    (Enabled, Disabled). Default: true. Set it to true if you want the slideshow to start after imediatly after gallery is displayed.

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

  • Slideshow Play Button Image
    (path to image). Upload the image for slideshow play button.

  • Slideshow Play Button Hover
    Image (path to image). Upload the image for slideshow play hover button.

  • Slideshow Pause Button Image
    (path to image). Upload the image for slideshow pause button.

  • Slideshow Pause Button Hover Image
    (path to image). Upload the image for slideshow pause hover button.

Auto Hide Settings
  • Auto Hide Thumbnails and Buttons
    (Enabled, Disabled). Default: false. Hide the thumbnails and buttons and display them when you hover the gallery.

  • Auto Hide Time
    (time in miliseconds). Default: 2000. Set the time after which the thumbnails and buttons hide.

FAQ

  • 1. How do I install the plugin with FTP?

    Please watch this video.

  • 2. How do I install the plugin with Upload Manager?

    Please watch this video.

  • 3. How do I create a gallery and add images to it?

    Please watch this video.

  • 4. How do I create a new thumbnail?

    Please watch this video.

  • 5. How do I add media to a gallery item? (Embed videos - YouTube, Vimeo - , add HTML code etc.)

    Please watch this video.

  • 6. How do I change gallery settings? (Some examples)

    Please watch this video.

  • 7. How do I add the gallery in my theme (header, footer, etc.)?

    Add the following code in your theme files:


    where x is the id.

  • 8. Why cannot I upload images to my gallery?

    Make sure that folders doptg/uploads with all subfolders inside it & doptg/data/ have the permissions set to 777. If the folder has the right permissions, try another upload method from the ones provided (AJAX, Uploadify, FTP).

  • 9. Why do I receive an IO Error when I upload images using Uploadify?

    The IO Error is a Flash error caused when the upload connection gets cut short. This usually happens with slow internet connections.

  • 10. 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. 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 (your add it into your theme's header):

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

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

  • 12. How do I change the language?

    You can change the translation in the file doptg/views/lang.php.

Known issues

1. On localhost servers, depending on the configuration admin might be slow, you will not be able to upload media files as pictures or videos.

2. Uploadify will not display the progress bar and image processing will go slower if you have a firewall enabled.

3. On some servers the images names that contain other characters different from alphanumeric ones will not be uploaded. Change the names in order for them to work.

4. The Back End section has some display issues in IE 7 (please update to a new version).

How to update

Latest Version: 2.4

Please note:
Make a backup of the Plugin inside your WordPress installation folder /wp-content/plugins/doptg/

Warning:
DO NOT DELETE THE OLD FILES BECAUSE IT IS POSSIBLE TO LOSE ALL YOUR DATA.

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 extracted plugin folder, and after you have all the new files upload them using FTP to the /wp-content/plugins/doptg/ folder overwriting the old ones (this is why it's important to backup any changes you've made to the plugin files).
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 2.4  -  01 October 2013

    • New Features:
    • Admin interface changes.
    • Delete/Enable/Disable multiple images.
    • Help tooltip updated.
    • Translation structure has changed.
    • Bug Fixes:
    • CSS fixes.
    • Small bugs fixed.
  • Version 2.3  -  05 May 2013

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

    • New Features:
    • Database is deleted when you delete the plugin.
    • Display a list with default settings & all settings you created.
    • Small Admin changes.
    • Update notification added.
    • Bug Fixes:
    • Gallery resize on hidden elements bug fix.
    • Slow admin bug fix.
    • Uploading Settings Images on MU bug fix.
  • Version 2.1  -  11 January 2013

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

    • Bug Fixes:
    • Small bugs fixes.
  • Version 1.9  -  11 October 2012

    • New Features:
    • Data can be parsed in the gallery using HTML.
    • Upload methods script changes.
    • Bug Fixes:
    • Small bugs fixes.
  • Version 1.8  -  20 June 2012

    • New Features:
    • AddThis Social Share added.
    • Bug Fixes:
    • Small bugs fixes.
  • Version 1.7  -  17 June 2012

    • Bug Fixes:
    • Uploadify security fix.
  • Version 1.6  -  25 April 2012

    • New Features:
    • Responsive layout added.
    • Bug Fixes:
    • Minor bugs fixes.
  • Version 1.5  -  25 January 2012

    • New Features:
    • Slideshow Play/Pause added.
    • Swipe image/lightbox on touch devices added.
    • Thumbnails navigation arrows added.
    • Bug Fixes:
    • Small navigation fixes.
  • Version 1.4  -  07 January 2012

    • New Features:
    • FTP upload added.
    • Integrate AJAX+JSON in Back End section.
    • Jcrop updated.
    • Lightbox added.
    • Navigation buttons are now images.
    • Thumbnails position changes to show current item thumbnail.
    • Update system removed (the Envato API didn't support the number of connections made and it become confusing for users).
    • Use WordPress native file upload system.
    • Bug Fixes:
    • Captions will now show over media.
    • Edit image area fixes.
    • IE 8 thumbnails resize fix.
    • Settings Edit fixes.
    • Simple AJAX file upload fix.
  • Version 1.3  -  13 October 2011

    • New Features:
    • Simple AJAX file upload added.
  • Version 1.2  -  31 August 2011

    • New Features:
    • Admin sprite updated.
    • Caption allows all characters.
    • Initial thumbnails have better quality.
    • Integrate AJAX+JSON in Front End gallery.
    • You can add Youtube & Vimeo videos, HTML, Flash ...
    • You can disable/enable images/media.
    • Use WordPress native jQuery.
    • Bug Fixes:
    • Caption "new line" bug fixed.
    • Change tables prefix fixed.
    • Install plugin by uploading fixed.
    • Plugin update notifications added.
    • Slideshow "Fast Speed" fixed.
  • Version 1.1  -  27 June 2011

    • Bug Fixes:
    • Compatibility bug fixed.
    • Sorting bug fixed.
  • Version 1.0  -  05 June 2011

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