Wall/Grid Gallery
jQuery Plugin

Getting Started

A very customizable jQuery Plugin, which will allow you to add a grid gallery which can be edited from a HTML, JSON or XML files. The gallery is completely resizable and is compatible with all browsers and devices (compatible with iOS & Android).

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.

How to use/install it

In sources/index.html you have an example:

1. Copy the folder dopwgg somewhere on your server (preferably in the same folder as the page you want to add the scroller 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 set:

How to customize it

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

For HTML you add in the container a list with class Settings:


View Example 2 for an example.

Settings descriptions

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

  • Height
    (value in pixels). Default value: 0. Sets the height of the gallery. If you set the value to 0 all thumbnails are going to be displayed.

  • BgColor
    (color hex code). Default value: f1f1f1. Sets gallery’s background color.

  • BgAlpha
    (value from 0 to 100). Default value: 100. Sets gallery’s background alpha.

  • NoLines
    (auto, number). Default value: 3. Sets the number of lines for the grid.

  • NoColumns
    (auto, number). Default value: 4. Sets the number of columns for the grid.

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

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

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

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

  • ThumbnailsPaddingRight
    (value in pixels). Default value: 0. Sets the right padding for the thumbnails.

  • ThumbnailsPaddingBottom
    (value in pixels). Default value: 0. Sets the bottom padding for the thumbnails.

  • ThumbnailsPaddingLeft
    (value in pixels). Default value: 0. Sets the left padding for the thumbnails.

  • ThumbnailsNavigation
    (mouse, scroll). Default value: mouse. Sets how you navigate through the thumbnails.

  • ThumbnailsScrollScrubColor
    (color hex code). Default value: 777777. Sets the scroll scrub color.

  • ThumbnailsScrollBarColor
    (color hex code). Default value: e0e0e0. Sets the scroll bar color.

  • ThumbnailsInfo
    (none, tooltip, label). Default value: none. Displays a small info text on the thumbnails, a tooltip or a label on bottom.

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

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

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

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

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

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

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

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

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

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

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

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

  • ThumbnailPaddingTop
    (value in pixels). Default value: 3. Sets the top padding value of a thumbnail.

  • ThumbnailPaddingRight
    (value in pixels). Default value: 3. Sets the right padding value of a thumbnail.

  • ThumbnailPaddingBottom
    (value in pixels). Default value: 3. Sets the bottom padding value of a thumbnail.

  • ThumbnailPaddingLeft
    (value in pixels). Default value: 3. Sets the left padding value of a thumbnail.

Lightbox Styles & Settings
  • LightboxPosition
    (document, gallery). Default value: document. If the value is document the lightbox is displayed over the web page, fitting in the browser's window, else the lightbox is displayed in the gallery's container.

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

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

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

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

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

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

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

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

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

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

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

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

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

Lightbox Navigation Icons Styles & Settings
  • LightboxNavigationPrev
    (path to image). Uploads the image for lightbox navigation's previous button.

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

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

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

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

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

Caption Styles & Settings
  • CaptionHeight
    (value in pixels). Default value: 75. Sets caption’s height.

  • CaptionTitleColo
    (color hex code). Default value: eeeeee. Sets caption’s title color.

  • CaptionTextColor
    (color hex code). Default value: dddddd. Sets caption’s text color.

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

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

Social Share Styles & Settings
  • SocialShareEnabled
    (true, false). Default value: true. Enables AddThis Social Share.

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

Tooltip Styles & Settings
  • TooltipBgColor
    (color hex code). Default value: ffffff. Sets tooltip background color.

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

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

Label Styles & Settings
  • LabelPosition
    (bottom, top). Default value: bottom. Sets label’s position.

  • LabelTextColor
    (color hex code). Default value: 000000. Sets label’s text color.

  • LabelTextColorHover
    (color hex code). Default value: ffffff. Sets label’s text hover color.

How to add content

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

For HTML, you must add in the container a list with class Content:


View Example 2 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.).

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

  • Link
    Add a link to thumbnail.

  • LinkTarget
    The target the link opens in.

FAQ

  • 1. Why does not the gallery appear in 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 dopwgg/assets/gui/css/jquery.dop.WallGridGallery.css in an editor and change or remove border-radius properties.

How to update

Latest Version: 1.9

Please note:
Make a backup of folder dopwgg 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/dopwgg 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.9  -  05 May 2013

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

    • Bug Fixes:
    • Change caption colors bug fix.
    • Gallery resize on hidden elements bug fix.
    • Setting number of columns bug fix.
  • Version 1.7  -  31 January 2013

    • New Features:
    • 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.
  • Version 1.6

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

    • New Features:
    • AddThis Social Share added.
    • Bug Fixes:
    • Small bugs fixes.
  • Version 1.4

    • New Features:
    • Responsive layout added.
    • Bug Fixes:
    • Minor bugs fixes.
  • Version 1.3

    • New Features:
    • Caption added.
    • Edit the gallery from HTML or XML/JSON file(s).
    • Navigation buttons are now images.
    • Transition between lightbox items changed to fade.
    • You can add Youtube & Vimeo videos, HTML, Flash ...
    • You can display thumbnail's info in a tooltip or label.
  • Version 1.2

    • New Features:
    • Use one finger on touchscreen devices to navigate through the gallery.
  • Version 1.1

    • New Features:
    • You can add links to thumbnails.
    • Bug Fixes:
    • Height bug fixed.
  • Version 1.0  -  20 February 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   .