Demo | Diamond Gallery jQuery

DIAMOND

TILE

ELLIPSE

HEXAGON

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

GLOBAL

CAROUSEL ITEM

CAROUSEL NAVIGATION

LIGHTBOX

SHADOW

Carousel Columns

The number of columns in the carousel.

Carousel BG Color

Carousel background color. Only HEX format is allowed

Carousel Autoslide

Time interval in ms for automatic carousel sliding.

If set to 0, auto sliding is disabled. Set to 1000 and the carousel will slide automatically every second, up to 5000 - every 5 seconds respectively.

The interval will be broken after the user interacts: tap, click or swipe

Keyboard Control

Enables carousel and lightbox navigation using the keyboard. Set to false to disable keyboard control

False True

Transition Speed

Global transitions speed. Value is in ms

Transition Animation

The type of the easing function for transition events.

The easing functions specify the rate of change of a parameter over time. More information can be found in the documentation

Hover Speed

Global hover speed. Value is in ms

Hover Animation

The type of the easing function for hover events.

The easing functions specify the rate of change of a parameter over time. More information can be found in the documentation

Item Size

Item size, in % of the maximum available size.

This option allows to control margins between items. The less the value, the larger margin will be.

This value will also be applied to the carousel navigation buttons

Item Aspect Ratio

Value set to 1 means that the width and height of the carousel items and navigation buttons will be equal.

Value less than 1 means that the items and navigation buttons will be stretched vertically, more than 1 - horizontally.

Item Border Radius

Item border radius, in px.

This value will also be applied to the carousel navigation buttons

IMG Scale on Hover

Initial scale level of the item image, in %.

If the value is less than 0, the initial image size will be enlarged and reduced to the original size while hovering. If set to more than 0, image size will remain original and will be enlarged on hover

IMG Grayscale

Grayscale level of the item image, in %.

A value of 0 leaves the image full color saturated. Set it to 100 and the image will be black and white

IMG Grayscale on Hover

Grayscale level for item image while hovering, in %.

A value of 0 leaves the image full color saturated. Set it to 100 and the image will be black and white

Hover Text Scale

Initial scale level of the hover text, in %.

If the value is less than 0, the text size will decrease, more than 0 - will increase.

If set to -100, then the text will be enlarged from half the original size to full size on hover. Set it to 100 and the text will be reduced from double the size to the original on hover

Hover Text

Carousel item hover text

Arrow Height

This value sets the line height for navigation button arrows, in px.

If set to 0, the navigation arrows will be completely removed and the navigation texts will be centered

Background Color

Background color of the carousel navigation buttons.

Only HEX format is allowed

Text Color

Carousel navigation buttons text color. This color will also be applied to the navigation arrows.

Only HEX format is allowed

Disabled Text Color

Disabled navigation button text color. This color will also be applied to the navigation arrows.

Only HEX format is allowed

Gradient Color

Carousel navigation buttons gradient color.

Only HEX format is allowed

Gradient Opacity

The level of opacity of the carousel navigation buttons gradient layer. Value is in %.

"Prev" Button Text

The text of the carousel Previous navigation button

"Next" Button Text

The text of the carousel Next navigation button

Content Scale

Lightbox content block scale level, in %.

If the value is less than 0, the size of the lightbox content block will be increased from the set value to the original size during the opening animation and vice versa if the value is greater than 0

Buttons Color

Color of the navigation and close buttons of the lightbox. Only HEX format is allowed

Buttons Size

The size of the navigation and close buttons of the lightbox.

This value sets buttons size in % of maximum available space for them

Buttons Line Width

This value sets the line thickness for navigation and close buttons of the lightbox in px.

Background Color

Color of the lightbox background layer.

Only HEX format is allowed

Background Opacity

The level of opacity of the lightbox background layer, in %.

Caption Bg Color

Background color of the lightbox caption.

Only HEX format is allowed

Caption Text Color

Text color of the lightbox caption. By default, text color settings of the <body> tag will be applied.

Only HEX format is allowed

Item Shadow Color

Color of the item shadow layer. Only HEX format is allowed

Item Shadow Size

Size of the item shadow, in px

Item Shadow Opacity

Opacity level of the item shadow layer, in %

LB Shadow Color

Color of the lightbox content block shadow. Only HEX format is allowed

LB Shadow Size

Size of the lightbox content block shadow, in px

LB Shadow Opacity

Opacity level of the lightbox content block shadow, in %

Documentation

DIAMOND GALLERY

IMAGINE DIAMOND

UNIQUE

DISCLOSURE

RESPONSIVE

PLAYGROUND