Diamond Grid jQuery

DIAMOND GRID

JQUERY IMAGE GALLERY PLUGIN

Documentation Buy on CodeCanyon

PLAYGROUND

OVERVIEW
Get Code

Get lucky

Like the legend of the phoenix
Our ends were beginnings
What keeps the planet spinning
The force from the beginning

We`ve come too far
To give up who we are
So let`s raise the bar
And our cups to the stars

She`s up all night `til the sun
I`m up all night to get some
She`s up all night for good fun
I`m up all night to get lucky

We`re up all night `til the sun
We`re up all night to get some
We`re up all night for good fun
We`re up all night to get lucky

For a better day

Paint on a caution wind
`Neath the bleeding sky
I called your name
There was no one there
And in the cold and snow
I saw your face

And we sang that song for the little thing
Magic calm, but the joy you bring
Running it down the line
Wish you could find that love is a fragile thing
Magic gone from a pretty thing
Maybe it might be time
For a better day
For a better day
For a better day

Straight from the path of love
In the road of life
I tumble forward
But I`m going on
I`ma keep it strong
I saw your face

Diamonds

Yellow diamonds in the light
Now we`re standing side by side
As your shadow crosses mine
What it takes to come alive

It`s the way I`m feeling I just can`t deny
But I`ve gotta let it go

We found love in a hopeless place
We found love in a hopeless place
We found love in a hopeless place
We found love in a hopeless place

Shine a light through an open door
Love and life I will divide
Turn away `cause I need you more
Feel the heartbeat in my mind

It`s the way I`m feeling I just can`t deny
But I`ve gotta let it go

Speechless

I remember how it all started
Feeling warm till the summer was over
And our little lives, it felt so big then
We`re only reaching stars
And I am a big black star
And you said to me

If you love me, then say you love me
And you are mine
Hey come on darling, stop the hiding
Speak your mind

Woah, I loved you
But you left me speechles

Not the only one

You and me we made a vow
For better or for worse
I can`t believe you let me down
But the proof is in the way it hurts
For months on end I`ve had my doubts
Denying every tear
I wish this would be over now
But I know that I still need you here

You say I`m crazy
`Cause you don`t think I know what you`ve done
But when you call me baby
I know I`m not the only one

You`ve been so unavailable
Now sadly I know why
Your heart is unobtainable
Even though Lord knows you kept mine

You say I`m crazy
`Cause you don`t think I know what you`ve done
But when you call me baby
I know I`m not the only one

Titanium

You shout it out, but
I can`t hear a word you say
I`m talking loud, not saying much

I`m criticized, but all your bullets ricochet
Shoot me down, but I get up

I`m bulletproof, nothing to lose
Fire away, fire away
Ricochet, you take your aim
Fire away, fire away

You shoot me down, but I won`t fall
I am titanium

You shoot me down, but I won`t fall
I am titanium

Cut me down, but it`s you
Who`ll have further to fall
Ghost town and haunted love
Raise your voice, sticks and
Stones may break my bones
I`m talking loud, not saying much

I`m bulletproof, nothing to lose
Fire away, fire away
Ricochet, you take your aim
Fire away, fire away
You shoot me down, but I won`t fall
I am titanium

You shoot me down, but I won`t fall
I am titanium

Relax

Took a ride to the end of the lane
Where no one ever goes
Ended up on a broken train with nobody I know
But the pain and the longing`s the same
When you`re dyin`
Now I`m lost, and I`m screaming for help alone

Relax, take it easy
For there is nothing that we can do
Relax, take it easy
Blame it on me or blame it on you

It`s as if I`m scared
It`s as if I`m terrified
It`s as if I`m scared
It`s as if I`m playing with fire
Scared
It`s as if I`m terrified
Are you scared?
Are we playing with fire?

Dare

We`re a million lonely people
All together on this needle in the sky
Afraid of heights
And your dreams were made illegal
By the laws of lesser evil
We call I, but not tonight

I dare you to love
I dare you to cry
I dare you to run
I dare you to try
I dare you to fall

And lay on the ground
I dare you to feel
I dare you to be

You`re an outline of a vision
That you had when we were children
Yesterday
You watch it fade
Let your heart be your religion
Let it break you out of this prison
You became It`s not too late.

Get lucky

Like the legend of the phoenix
Our ends were beginnings
What keeps the planet spinning
The force from the beginning

We`ve come too far
To give up who we are
So let`s raise the bar
And our cups to the stars

She`s up all night `til the sun
I`m up all night to get some
She`s up all night for good fun
I`m up all night to get lucky

We`re up all night `til the sun
We`re up all night to get some
We`re up all night for good fun
We`re up all night to get lucky

Playground is an effective way to understand all features of the plugin. The playground section above is divided into two parts: settings panel on the left and preview on the right. All changes made in the settings panel are displayed in the preview realtime

The presets block on top of the settings panel is designed to present the global styling features of the plugin. Each value: Diamond, Tile, Ellipse and Hexagon has its own set of settings

The settings block is located in the middle of the settings panel. It presents a set of plugin options, divided into logical blocks with own navigation structure

Clicking the Get code button at the bottom of the settings panel will open a popup window with "jQuery" and "HTML" tabs. Plugin initialization code with initially preset or personally chosen settings is displayed in the jQuery tab. The HTML markup of the grid is provided in the HTML tab

MOCKUPS

CAPACITY

MOCKUP 1

Blank items are used in the grid structure.

The grid is centered inside the parent div using CSS

Click and Hover effects are disabled via plugin settings

Get Code

MOCKUP 2

Blank item is used in the grid to form the arrow shape

Grid width is set dynamically using jQuery. Additional text is positioned inside the parent div using CSS

Click and Hover effects are disabled via plugin settings

Get Code
SOME CONTENT

MOCKUP 3

Blank item is used in the grid to form an empty space in the center of the grid.

Additional text is centered inside the parent div using CSS. The width and height of the text block are set using the plugin properties

Click and Hover effects are disabled via plugin settings

Get Code

HI

MOCKUP 4

Blank items are used in the grid structure.

The grid is centered inside the parent div using CSS

Click and Hover effects are disabled via plugin settings

Get Code

MOCKUP 5

Blank items are used in the grid structure.

The grid is centered inside the parent div using CSS

Click and Hover effects are disabled via plugin settings

Get Code

MOCKUP 6

Blank items are used in the grid structure.

The grid is centered inside the parent div using CSS

Additional content blocks are positioned over the grid and sized using the plugin properties

Click and Hover effects are disabled via plugin settings

Get Code
1
2
3
4

Diamond Grid is not just a gallery with uniquely shaped images. Using the built-in functionality, it can be used in different ways as a design element of your pages. The mockups above give some ideas on how to do this

Each mockup block is divided into two sections: info panel and preview

Presets block at the top of each info panel allows to change the shape of the grid images for a better overview of the mockup

Clicking the Get code button at the bottom of each info panel will open a popup window with three tabs. jQuery code of the current mockup will be displayed in the jQuery tab. The HTML tab will display the HTML markup of the mockup. Styles of the current mockup will be displayed in the CSS tab

FEATURES

ESSENTIAL

LAZY LOADING

Optionally, grid images can be loaded as they appear in the user viewport. This feature will improve page load speed

BLANK ITEMS

Using the blank items in the grid, you can build different geometric shapes, as shown in the mockups section

MOBILE FRIENDLY

This plugin is fully responsive and touch-friendly. The breakpoints option will help you fine-tune the grid and lightbox for different screen sizes

LIGHTBOX

The lightbox can display full-size grid images with captions attached to them. It also contain customizable navigation and close buttons

CLICK EVENTS

Clicking on a grid image can trigger three types of actions: open a lightbox, redirect to a specified URL, or click events can be disabled

CUSTOMIZATION

70 settings and 30 animation types were designed to perfectly integrate the gallery plugin into the design of any web page

TECHNOLOGY

The gallery grid is based on Canvas technology to achieve a stunning look, smooth animations and cross-browser support

INCLUDES

The plugin package comes with source code, full HTML documentation, a playground file and a mockups file with a code generator