Thumbnail Scroller
jQuery Plugin

Getting Started

A very customizable jQuery Plugin Scroller, that can be edited from a HTML, JSON or XML files. The scroller is completely resizable and it 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 dopts somewhere on your server (preferably in the same folder as of 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 (scroller ID - necessary if you use Social Share)
   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 will find a JSON example in dopts/json/settings.json and a XML example in dopts/xml/settings.xml.

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


View Example 3 for an example.

Settings descriptions

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

  • Height
    (value in pixels). Default value: 128. Set the height of the scroller.")

  • BgColor
    (color hex code). Default value: ffffff. Set scroller background color.

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

  • BgBorderSize
    (value in pixels). Default value: 1. Set the size of the scroller border.

  • BgBorderColor
    (color hex code). Default value: e0e0e0. Set the color of the scroller border.

  • ThumbnailsOrder
    (normal, random). Default value: normal. Set thumbnails order.

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

  • UltraResponsiveEnabled
    (true, false). Default value: false. Enable ultra responsive layout. Resize both width and height. It is a boost to normal response function which you must have enabled.

Thumbnails Styles & Settings
  • ThumbnailsPosition
    (horizontal, vertical). Default value: horizontal. Set the position of the thumbnails.

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

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

  • ThumbnailsBorderSize
    (value in pixels). Default value: 0. Set the size of the thumbnails border.

  • ThumbnailsBorderColor
    (color hex code). Default value: e0e0e0. Set the color of the thumbnails border.

  • ThumbnailsSpacing
    (value in pixels). Default value: 10. Set the space between thumbnails.

  • ThumbnailsMarginTop
    (value in pixels). Default value: 10. Set the top margin for the thumbnails.

  • ThumbnailsMarginRight
    (value in pixels). Default value: 0. Set the right margin for the thumbnails.

  • ThumbnailsMarginBottom
    (value in pixels). Default value: 10. Set the bottom margin for the thumbnails.

  • ThumbnailsMarginLeft
    (value in pixels). Default value: 0. Set the left margin for the thumbnails.

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

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

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

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

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

Thumbnails Navigation Styles & Settings
  • ThumbnailsNavigationEasing
    (linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce). Default value: linear. Set thumbnails navigation easing.

  • ThumbnailsNavigationLoop
    (true, false). Default value: false. Enable thumbnails loop ... scroll will be disabled.

  • ThumbnailsNavigationMouseEnabled
    (true, false). Default value: false. Enable thumbnails mouse navigation.

  • ThumbnailsNavigationScrollEnabled
    (true, false). Default value: false. Enable thumbnails scroll navigation.

  • ThumbnailsScrollPosition
    (bottom/right, top/left). Default value: bottom/right. Set thumbnails scroll position.

  • ThumbnailsScrollSize
    (value in pixels). Default value: 5. Set the scroll size color.

  • ThumbnailsScrollScrubColor
    (color hex code). Default value: 808080. Set the scroll scrub color.

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

  • ThumbnailsNavigationArrowsEnabled
    true, false). Default value: true. Enable thumbnails arrows navigation.

  • ThumbnailsNavigationArrowsNoItemsSlide
    (number of thumbnails). Default value: 1. The number of thumbnails that will slide when you click the arrows.

  • ThumbnailsNavigationArrowsSpeed
    (time in miliseconds). Default value: 600. The time the thumbnails will slide after you click the arrows.

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

  • ThumbnailsNavigationPrevDisabled
    (path to image). Upload the image for thumbnails navigation's previous disabled 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lightbox Styles & Settings
  • LightboxDisplayTime
    (time in miliseconds). Default value: 600. The time the lightbox will be displayed.

  • LightboxWindowColor
    (color hex code). Default value: ffffff. 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: ffffff. Set the color for the lightbox background.

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

  • LightboxBorderSize
    (value in pixels). Default value: 1. Set the size of a lightbox's border.

  • LightboxBorderColor
    (color hex code). Default value: e0e0e0. Set the color of a lightbox's border.

  • LightboxCaptionTextColor
    (color hex code). Default value: 999999. Set the color for the lightbox caption.

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

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

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

  • LightboxMarginLeft
    (value in pixels). Default value: 30. 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 Icons Styles & Settings
  • LightboxEnabled
    (true, false). Default value: true. Enable the lightbox.

  • 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: ffffff. Set the color for the lightbox info background.

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

  • LightboxNavigationDisplayTime
    (time in miliseconds). Default value: 600. The time the lightbox navigation will be displayed.

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

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

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

Tooltip Styles & Settings
  • 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.

Label Styles & Settings
  • LabelPosition
    (bottom, top, under). Default value: bottom. Set label position.

  • LabelAlwaysVisible
    (true, false). Default value: false. On true the label is always visible, on false it will be visible only on hover.

  • LabelUnderHeight
    (the size in pixels). Default value: 50. Set the height only for the label under a thumbnail.

  • LabelBgColor
    (bottom, top). Default value: bottom. Set label position.

  • LabelBgAlpha
    (value from 0 to 100). Default value: 80. Set label background transparency.

  • LabelTextColor
    (color hex code). Default value: ffffff. Set label text color.

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

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

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

How to add content

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

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


View Example 3 for an example.

Content description

  • Image
    Add path to image (mandatory).

  • Thumb
    Add path to thumbnail (mandatory).

  • Title
    Add caption title.

  • Caption
    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 :).

  • LightboxMedia
    Add media that will be displayed in the lightbox.

  • Link
    Add a link to thumbnail. Add none to remove thumbnail events.

  • Target
    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 dopts/http://envato-help.dotonpaper.net/assets/gui/css/jquery.dop.ThumbnailScroller.css in an editor and change or remove border-radius properties.

How to update

Latest Version: 1.6

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

    • New Features:
    • 2 responsive levels added
    • Bug Fixes:
    • SEO fixes.
    • Responsive Media bug fix.
    • AddThis fixed.
  • Version 1.5

    • New Features:
    • Social Share added.
    • You have the option to add the label under the thumbnail.
    • Bug Fixes:
    • Scroller resize on hidden elements bug fix.
  • Version 1.4

    • New Features:
    • Remove lightbox margins on mobile devices.
    • Bug Fixes:
    • Lightbox display bug on Chrome is fixed.
    • * Small bugs fixes.
  • Version 1.3

    • New Features:
    • Loop added.
    • Mouse navigation speed change added.
    • Responsive layout added.
    • Bug Fixes:
    • Minor bugs fixes.
  • Version 1.2

    • New Features:
    • Add/Edit content/settings from a HTML, JSON or XML file.
    • Caption allows all characters.
    • Display thumbnails at random.
    • Lightbox added.
    • Navigation buttons are now images.
    • Scroll Bar added.
    • Thumbnails position changes to show current item thumbnail.
    • You can add HTML to thumbnails.
    • You can HTML, Flash, Youtube & Vimeo videos.
    • Bug Fixes:
    • IE 8 thumbnails resize fix.
    • Other small bug fixes.
  • Version 1.1

    • New Features:
    • Use one finger on touchscreen devices to navigate through the thumbnails.
  • Version 1.0  -  16 March 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   .