Gridzy.Gallery

webಕನ್ನಡ

Gridzy.Gallery
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿ

ನಾನು ಕಂಡುಕೊಂಡ ಅತ್ಯಂತ ಅದ್ಭುತವಾದ ಫೋಟೋ ಅನುಭವ. ಅಂತಿಮವಾಗಿ ಇದನ್ನು ಹೇಗೆ ಮಾಡಬೇಕೆಂದು ಯಾರಾದರೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತಾರೆ!

ಮಿಲೋ ಪರ್ಸಿಕ್ - ಗ್ರಂಥಾಲಯದ ಬಳಕೆದಾರ
ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ
ಈಗಲೇ ಪಡೆಯಿರಿ

ತ್ವರಿತ ಒಳನೋಟ

1 ನಿಮಿಷದ ವೀಡಿಯೊ ಟ್ಯುಟೋರಿಯಲ್

ವೀಡಿಯೊ ಟ್ಯುಟೋರಿಯಲ್ ಪ್ಲೇ ಮಾಡಿ

ಕೇವಲ 1 ನಿಮಿಷ

ಕೇವಲ ಒಂದು ನಿಮಿಷದಲ್ಲಿ ಇದನ್ನು ಕಲಿಯಿರಿ:

ಮೂಲ ಬಳಕೆ

ಸಂರಚನೆ

ಶೋಧಕಗಳು

ಗೋಚರತೆ

ದಿನವನ್ನು ಆಚರಿಸಿ
ನಿಮ್ಮ ಪ್ರೀತಿಪಾತ್ರರನ್ನು ಚುಂಬಿಸಿ
ನಿಮ್ಮೊಂದಿಗೆ ಶುದ್ಧರಾಗಿರಿ
ವಿನೋದವನ್ನು ಮರೆಯಬೇಡಿ
ಪ್ರಕೃತಿಯನ್ನು ಅನುಭವಿಸಿ

ಶೀರ್ಷಿಕೆ ಶೈಲಿಗಳು

ಸುಲಭವಾದ ತ್ವರಿತ ಪರಿಹಾರಗಳಿಗಾಗಿ ಪೂರ್ವನಿರ್ಧರಿತ ಶೀರ್ಷಿಕೆ ಶೈಲಿಗಳು

ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ಶೀರ್ಷಿಕೆ ಶೈಲಿಯನ್ನು ನೋಡಲು ಚಿತ್ರಗಳನ್ನು ಸುಳಿದಾಡಿ. ತೋರಿಸಿದ ಅಂತರ್ನಿರ್ಮಿತ ಶೈಲಿಯನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಬಟನ್‌ಗಳು ಮತ್ತು ಬಣ್ಣ ಪಿಕ್ಕರ್‌ಗಳೊಂದಿಗೆ ಪ್ಲೇ ಮಾಡಿ.

ದಾಖಲೆ - ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಚರ್ಮಗಳು

ಟ್ಯಾಗ್‌ಗಳು ಮತ್ತು ಫಿಲ್ಟರ್‌ಗಳು

ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಹೆಚ್ಚು ರಚನಾತ್ಮಕ ರೀತಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು

ಅಂತರ್ನಿರ್ಮಿತ ಫಿಲ್ಟರ್ ವ್ಯವಸ್ಥೆಯು ಅತ್ಯಂತ ಮೃದುವಾಗಿರುತ್ತದೆ. ಸಿಎಸ್ಎಸ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಫಿಲ್ಟರಿಂಗ್‌ಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ ಎಂಬುದು ವಾಸ್ತವವಾಗಿ ಯಾವುದೇ ರೀತಿಯ ಫಿಲ್ಟರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.

ದಾಖಲೆ - ಶೋಧಕಗಳು

ಹೆಚ್ಚು ಹೊಂದಾಣಿಕೆಯಾಗುತ್ತದೆ

ಅನೇಕ ಲೈಟ್‌ಬಾಕ್ಸ್‌ಗಳೊಂದಿಗೆ ಬಳಸಬಹುದಾಗಿದೆ

ಯಾವುದೇ ಲೈಟ್ಬಾಕ್ಸ್ನೊಂದಿಗೆ ಗ್ಯಾಲರಿಯನ್ನು ಸಂಯೋಜಿಸಿ. ಇದು ಹೊಂದಾಣಿಕೆಯಾಗುವ ಸಂಭವನೀಯತೆ ಸುಮಾರು 100% ಆಗಿದೆ. ಫೋಟೋಸ್ವೈಪ್ ಲೈಟ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಉದಾಹರಣೆಯಾಗಿ ನೋಡಲು ಚಿತ್ರಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.

ರೆಡಿಮೇಡ್ ಕೋಡ್ ತುಣುಕುಗಳೊಂದಿಗೆ ಬ್ಲಾಗ್ ಲೇಖನಗಳಿವೆ:

ವಿಸ್ತರಣೆ - ಫೋಟೋಸ್ವೈಪ್
ವಿಸ್ತರಣೆ - ಮ್ಯಾಗ್ನಿಫಿಕ್ ಪಾಪ್ಅಪ್

ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ

ದಿನವನ್ನು ಆಚರಿಸಿ
ನಿಮ್ಮ ಪ್ರೀತಿಪಾತ್ರರನ್ನು ಚುಂಬಿಸಿ
ನಿಮ್ಮೊಂದಿಗೆ ಶುದ್ಧರಾಗಿರಿ
ವಿನೋದವನ್ನು ಮರೆಯಬೇಡಿ
ಪ್ರಕೃತಿಯನ್ನು ಅನುಭವಿಸಿ

ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ರಚಿಸಿ

ನಿಮಗೆ CSS ಪರಿಚಯವಿದ್ದರೆ, ನೀವು ಗ್ಯಾಲರಿ ಐಟಂಗಳನ್ನು ನಿಮಗೆ ಬೇಕಾದ ರೀತಿಯಲ್ಲಿ ಶೈಲಿ ಮಾಡಬಹುದು.

ತೋರಿಸಿರುವ ಉದಾಹರಣೆಯ CSS:

/* CSS class: "gridzySkin-custom-sepia" */

@property --gridzySkin-custom-sepia--filter-sepia {
	initial-value: 1;
	inherits: true;
	syntax: "<number>";
}
@property --gridzySkin-custom-sepia--filter-contrast {
	initial-value: 1;
	inherits: true;
	syntax: "<number>";
}

.gridzySkin-custom-sepia > .gridzyItem {
	position: relative;
	overflow: unset;
	margin: -10px;
	border: 10px solid #fff;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	border-radius: 10px;
}

.gridzySkin-custom-sepia > .gridzyItem *:not(.gridzyCaption) {
	display: inline;
}

.gridzySkin-custom-sepia > .gridzyItem .gridzyCaption * {
	display: initial;
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n) {
	transform: rotate(-1deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+1) {
	transform: rotate(-.5deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+2) {
	transform: rotate(1deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+3) {
	transform: rotate(.5deg);
}

.gridzySkin-custom-sepia .gridzyImage {
	position: relative;
	vertical-align: middle;
	border-radius: 3px;

	--gridzySkin-custom-sepia--filter-sepia: 1;
	--gridzySkin-custom-sepia--filter-contrast: .7;
	filter: sepia(var(--gridzySkin-custom-sepia--filter-sepia)) contrast(var(--gridzySkin-custom-sepia--filter-contrast));
	transition: --gridzySkin-custom-sepia--filter-sepia .6s, --gridzySkin-custom-sepia--filter-contrast .6s;
}

.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyImage {
	--gridzySkin-custom-sepia--filter-sepia: 0;
	--gridzySkin-custom-sepia--filter-contrast: 1;
}

.gridzySkin-custom-sepia .gridzyCaption {
	margin: 0;
	padding: .5em;
	position: absolute;
	z-index: 1;
	bottom: -.5em;
	top: auto;
	width: auto;
	max-width: calc(100% - 2em);
	height: fit-content;
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;
	background: rgba(238, 238, 238, .8);
	color: #000;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
	opacity: 0;
	transition: opacity .3s;
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n) .gridzyCaption {
	transform: translateX(1000px) translateX(-50%) rotate(3deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+1) .gridzyCaption {
	transform: translateX(1000px) translateX(-50%) rotate(-3deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+2) .gridzyCaption {
	transform: translateX(1000px) translateX(-50%) rotate(-1deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n) .gridzyCaption {
	left: calc(50% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+1) .gridzyCaption {
	left: calc(54% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+2) .gridzyCaption {
	left: calc(46% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+3) .gridzyCaption {
	left: calc(52% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+4) .gridzyCaption {
	left: calc(48% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyCaption {
	opacity: 1;
}
ದಾಖಲೆ - ಶೈಲಿ ಗ್ರಿಡ್ಜಿ

ಯಾವುದೇ HTML ಅನ್ನು ಬಳಸಿ

ನೀವು ಯಾವುದೇ HTML ಅನ್ನು ಬಳಸಬಹುದು. ಕೆಲವೇ ಕೆಲವು ನಿರ್ಬಂಧಗಳಿವೆ. ಇಲ್ಲಿ ತೋರಿಸಿರುವ ಉದಾಹರಣೆಗಳು ಎರಡೂ ಒಂದೇ ದೃಶ್ಯ ಫಲಿತಾಂಶವನ್ನು ನೀಡುತ್ತವೆ.

ದಾಖಲೆ - ಲಾಕ್ಷಣಿಕ HTML

ಉದಾಹರಣೆ 1:

<ul class="gridzy gridzySkinClassic">
	<li>
		<a href="https://www.example.com/">
			<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
			<span class="gridzyCaption">example caption 1</span>
		</a>
	</li>
	<li>
		<a href="https://www.example.com/">
			<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
			<span class="gridzyCaption">example caption 2</span>
		</a>
	</li>
	...
</ul>

ಉದಾಹರಣೆ 2:

<section class="gridzy gridzySkinClassic">
	<figure>
		<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
		<figcaption class="gridzyCaption">example caption 1</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
		<figcaption class="gridzyCaption">example caption 2</figcaption>
	</figure>
	...
</section>

ಹೆಚ್ಚು ಉಪಯುಕ್ತ ವೈಶಿಷ್ಟ್ಯಗಳು

ಲೇಜಿ ಲೋಡ್

ನೀವು ವೀಕ್ಷಿಸಿದ ಚಿತ್ರಗಳನ್ನು ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡುತ್ತದೆ

ಇದು ಗೋಚರಿಸುವ ಪ್ರದೇಶಕ್ಕೆ ಹತ್ತಿರವಿರುವ ಚಿತ್ರಗಳನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಆದ್ದರಿಂದ ಗೋಚರ ಚಿತ್ರಗಳಿಗೆ ಹೆಚ್ಚು ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್.

ದಾಖಲೆ - ಲೇಜಿ ಲೋಡ್

API

ಹೆಚ್ಚಿನದನ್ನು ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ

ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಮತ್ತು ತೆಗೆದುಹಾಕಲು, ಆಯ್ಕೆಗಳನ್ನು ಬದಲಾಯಿಸಲು ಅಥವಾ ಈವೆಂಟ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಇದು ನಿಮ್ಮನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ದಾಖಲೆ - API

ವಿಸ್ತರಣೆಗಳು

ವೈಯಕ್ತಿಕ ಸನ್ನಿವೇಶಗಳಿಗೆ ಪರಿಹಾರಗಳನ್ನು ನಿಮಗೆ ಒದಗಿಸುತ್ತದೆ

ಇದು ಕಾಲಾನಂತರದಲ್ಲಿ ಬೆಳೆಯುವ ಬ್ಲಾಗ್ ಲೇಖನಗಳ ಸಂಗ್ರಹವಾಗಿದೆ ಮತ್ತು Gridzy.Gallery ಸುಲಭವಾಗಿ ವಿಸ್ತರಿಸಲು ಸಹಾಯಕವಾದ ಕೋಡ್ ತುಣುಕುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

ವಿಸ್ತರಣೆಗಳು

ಲೈಬ್ರರಿಯ ಬಗ್ಗೆ ಬಳಕೆದಾರ

ನಾನು ಗ್ರಿಡ್ಜಿಯನ್ನು ನನ್ನ ಸೈಟ್‌ಗೆ ಸಂಯೋಜಿಸಿದ್ದೇನೆ ಮತ್ತು ಇದು ಅತ್ಯುತ್ತಮ ವಿಷಯವಾಗಿದೆ! ನೀವು ಇದರಲ್ಲಿ ಮಾಡಿದ ಎಲ್ಲಾ ಕೆಲಸಗಳಿಗೆ VIELEN DANK. ಇದು ನಾನು ಕಂಡುಕೊಂಡ ಅತ್ಯಂತ ಅದ್ಭುತವಾದ ಫೋಟೋ ಅನುಭವವಾಗಿದೆ. ಅಂತಿಮವಾಗಿ ಇದನ್ನು ಹೇಗೆ ಮಾಡಬೇಕೆಂದು ಯಾರಾದರೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತಾರೆ!
ಮೂಲ ಭಾಷೆಯನ್ನು ತೋರಿಸಿ (ಇಂಗ್ಲಿಷ್)
5 ರಲ್ಲಿ 5 ನಕ್ಷತ್ರಗಳು
ಉತ್ತರ ಕೆರೊಲಿನಾ - ಯುನೈಟೆಡ್ ಸ್ಟೇಟ್ಸ್
CodeCanyon ವಿಮರ್ಶೆಯಾಗಿ ಬರೆಯಲಾಗಿದೆ
ಇನ್ಕ್ರೆಡಿಬಲ್ ಗ್ರಿಡ್.. ವಾವ್. ವೇಗಕ್ಕಾಗಿ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾಗಿದೆ.. ಹೆಲ್ಮಟ್‌ನ ಹೆಚ್ಚಿನ 'ಕಲೆ' ಕೆಲಸಗಳನ್ನು ಖಂಡಿತವಾಗಿ ಗಮನಿಸುತ್ತಿರುತ್ತದೆ
ಮೂಲ ಭಾಷೆಯನ್ನು ತೋರಿಸಿ (ಇಂಗ್ಲಿಷ್)
5 ರಲ್ಲಿ 5 ನಕ್ಷತ್ರಗಳು
ಸಿಂಗಾಪುರ
CodeCanyon ವಿಮರ್ಶೆಯಾಗಿ ಬರೆಯಲಾಗಿದೆ
ಇದು ಉತ್ತಮವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ justified ಗ್ರಿಡ್ ಗ್ಯಾಲರಿಯಾಗಿದೆ, ಇದುವರೆಗೆ ನಾನು ಕಂಡುಕೊಂಡ ಅತ್ಯುತ್ತಮವಾಗಿದೆ. ಇದು ದಾರಿಯಲ್ಲಿ ಹೋಗದೆ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತದೆ, ಪರದೆಯ ಗಾತ್ರಕ್ಕೆ ಉತ್ತಮವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ, ಅನಗತ್ಯ ಸಾಮಾನು ಸರಂಜಾಮು ಇಲ್ಲದೆ ಸಾಕಷ್ಟು ಉಪಯುಕ್ತ ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಬಳಕೆಯಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಇದಲ್ಲದೆ, ಲೇಖಕರು ಸ್ಪಂದಿಸುತ್ತಾರೆ, ಯಾವಾಗಲೂ ಸಹಾಯಕರು, ವೃತ್ತಿಪರರು, ಸ್ನೇಹಪರರು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೌನ್ ಪ್ಯಾಟ್ ಅನ್ನು ಹೊಂದಿದ್ದಾರೆ.
ಮೂಲ ಭಾಷೆಯನ್ನು ತೋರಿಸಿ (ಇಂಗ್ಲಿಷ್)
5 ರಲ್ಲಿ 5 ನಕ್ಷತ್ರಗಳು
ಲಂಡನ್ - ಯುಕೆ
CodeCanyon ವಿಮರ್ಶೆಯಾಗಿ ಬರೆಯಲಾಗಿದೆ
ಈ ಪ್ಲಗಿನ್ ಅದ್ಭುತವಾಗಿದೆ - ನಾನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಕೆಲವು ಗಂಟೆಗಳ ಕಾಲ ಕಳೆಯಬೇಕಾಗಿದೆ ಎಂದು ನಾನು ಭಾವಿಸಿದೆ ಆದರೆ ಅದು ತಂಗಾಳಿಯಲ್ಲಿತ್ತು. ನನ್ನ ವರ್ಡ್ಪ್ರೆಸ್ ಗ್ಯಾಲರಿಗಳನ್ನು ನಿರ್ವಾಹಕರ ಮೂಲಕ ಹೇಗೆ ರಚಿಸಲಾಗಿದೆ ಎಂಬುದರ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುವ ಸುಧಾರಿತ ಕಸ್ಟಮ್ ಕ್ಷೇತ್ರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ನಾನು ಅದನ್ನು ಅಳವಡಿಸಿಕೊಂಡಿದ್ದೇನೆ. ಧನ್ಯವಾದಗಳು!
ಮೂಲ ಭಾಷೆಯನ್ನು ತೋರಿಸಿ (ಇಂಗ್ಲಿಷ್)
5 ರಲ್ಲಿ 5 ನಕ್ಷತ್ರಗಳು
ಯುನೈಟೆಡ್ ಸ್ಟೇಟ್ಸ್
CodeCanyon ವಿಮರ್ಶೆಯಾಗಿ ಬರೆಯಲಾಗಿದೆ

ವ್ಯವಹಾರಕ್ಕೆ ಇಳಿಯೋಣ!

ಯೋಜನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ!

ಯೋಜನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ!