Thumbnail Gallery
jQuery Plugin

Getting Started

A very customizable jQuery Plugin Thumbnail Gallery, which can be edited from a JSON or XML file. The gallery is completely 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 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

How to use/install it

1. Copy the folder doptg somewhere on your server (preferably in the same folder with the page you want to add the gallery to).

2. Add the following CSS and JS files in the <head></head> section of your website:

Note: The files can be anywhere on your server or web. Just make sure that they are loaded by your web page.

3. Add the plugin to a container (HTML tag, class or id):

Example:

You can add the following options to the plugin:
ID (gallery ID - necessary if you use more then one gallery on page)
SettingsDataType (JSON, XML, HTML)
SettingsFilePath (path to settings file)ContentDataType (JSON, XML, HTML)
ContentFilePath (path to content file)

Example:

Note: If no parameters are given, the default values will be automatically set as following:

How to customize it

You have a JSON example in doptg/json/settings.json and a XML example in doptg/xml/settings.xml.

Image Styles & Settings

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

Auto Hide Settings

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

How to add content

You have a JSON example in doptg/json/content.json and a XML example in doptg/xml/content.xml .

For HTML, you need to add a list with class Content:

View demos/example1/index.html for an example.

Content description

Image

Add path to image (mandatory).

Thumb

Add path to thumbnail (mandatory).

CaptionTitle

Add caption title.

CaptionText

Add caption text.

Media

Add media (HTML, Flash, YouTube, Vimeo, etc.).

IMPORTANTFor Media make sure that all the code is in one html tag. Iframe embedding code will work :).

LightboxMedia

Add media that will be displayed in the lightbox.

FAQ

1. Why does not the gallery appear on my website?

1. The plugin files are not loaded on your page.

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

How to update

Latest Version: 1.8

Please note:
Make a backup of folder doptg from your web server.

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 sources/doptg folder, and after you have all the new files upload them using FTP to the your web server folder overwriting the old ones (this is why it's important to backup any changes you've made to the plugin files).
After, you add the settings and content files from the backup you did earlier.
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.8 - 05 May 2013

Bug Fixes:

SEO fixes.

Responsive Media bug fix.

AddThis fixed.

Version 1.7 - 30 March 2013

Bug Fixes:

Gallery resize on hidden elements bug fix.

Version 1.6 - 31 January 2013

New Features:

Caption can be positioned over the image.

Option to move navigation buttons outside the image.

Remove lightbox margins on mobile devices.

Set thumbnails size when gallery is responsive on mobile devices.

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

Bug Fixes:

Small bugs fixes.

Version 1.4

New Features:

AddThis Social Share added.

Bug Fixes:

Small bugs fixes.

Version 1.3

New Features:

Responsive layout added.

Bug Fixes:

Minor bugs fixes.

Version 1.2

New Features:

Add/Edit content/settings from a JSON or XML file.

Caption allows all characters.

Lightbox added.

Navigation buttons are now images.

Slideshow added.

Swipe image/lightbox on touch devices added.

Thumbnails navigation arrows added.

Thumbnails position changes to show current item thumbnail.

You can HTML, Flash, Youtube & Vimeo videos.

Bug Fixes:

IE 8 thumbnails resize fix.

Version 1.1

New Features:

Use one finger on touchscreen devices to navigate through the thumbnails.

Mousewheel (jQuery Plugin)

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.

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.