Gridzy.Gallery

webತುಳು

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

ಎಂಕ್ ತೂಯಿನ ಅತ್ಯಂತ ಅದ್ಭುತ ಫೋಟೋ ಅನುಭವ. ಅಂಚನೆ ಒರಿ ಈ ಸರಿಯಾದ್ ಎಂಚ ಮಲ್ಪೊಡು ಪನ್ಪಿನೆನ್ ಅರ್ಥ ಮಲ್ತೊನುವೆರ್!

ಮಿಲೋ ಪರ್ಸಿಕ್ – ಲೈಬ್ರರಿದ ಒರಿ ಬಳಕೆದಾರೆರ್
ಜಾಸ್ತಿ ತೆರಿಯೊನೊಡು
ಇತ್ತೆ ದೆತೊನ್ಲೆ

ತ್ವರಿತ ಒಳನೋಟ

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

ವಿಡಿಯೋ ಟ್ಯುಟೋರಿಯಲ್ ಪ್ಲೇ ಮಲ್ಪುಲೆ

ಒಂಜಿ ನಿಮಿಷ ಮಾತ್ರ

ಒಂಜಿ ನಿಮಿಷೊಡು ಉಂದೆನ್ ತೆರಿಯೊನೊಡು:

ಮೂಲ ಬಳಕೆ

ಸಂರಚನೆ

ಫಿಲ್ಟರ್ ಲು

ತೋಜುನು

ದಿನೊನು ಆಚರಣೆ ಮಲ್ಪುಲೆ
ನಿಕ್ಲೆನ ಮೋಕೆದಕುಲೆನ್ ಮುತ್ತು ಕೊರ್ಲೆ
ನಿಕ್ಲೆನೊಟ್ಟುಗು ಶುದ್ಧವಾದ್ ಉಪ್ಪುಲೆ
ಮೋಜಿನ್ ಮರಪಂದೆ
ಪ್ರಕೃತಿನ್ ಅನುಭವಿಸೊಡು|

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

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

ಕಾನ್ಫಿಗರ್ ಮಲ್ತಿನ ಶೀರ್ಷಿಕೆ ಶೈಲಿನ್ ತೂಯೆರೆ ಚಿತ್ರೊಲೆನ್ ಹಾವರ್ ಮಲ್ಪುಲೆ. ತೋಜಿದ್ ಬತ್ತಿನ ಅಂತರ್ನಿರ್ಮಿತ ಶೈಲಿನ್ ಕಾನ್ಫಿಗರ್ ಮಲ್ಪರೆ ಬಟನ್ ಲೆನ್ ಬೊಕ್ಕ ಬಣ್ಣದ ಆಯ್ಕೆಲೆನ್ ಆಟ ಆಡೊಡು.

ದಾಖಲೆ – ಶೀರ್ಷಿಕೆಲು ಬೊಕ್ಕ ಚರ್ಮೊಲು

ಟ್ಯಾಗ್ ಲು ಬೊಕ್ಕ ಫಿಲ್ಟರ್ ಲು

ನಿಕ್ಲೆನ ಚಿತ್ರೊಲೆನ್ ಒಂಜಿ ರಚನೆದ ರೀತಿಡ್ ತೋಜಾವುನ

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

ದಾಖಲೆ – ಫಿಲ್ಟರ್ ಲು

ಮಸ್ತ್ ಹೊಂದಾಣಿಕೆ ಆಪುಂಡು

ಮಸ್ತ್ ಲೈಟ್ ಬಾಕ್ಸ್ ಲೆನೊಟ್ಟುಗು ಬಳಕೆ ಮಲ್ಪೊಲಿ

ಗ್ಯಾಲರಿನ್ ಏತ್ ಲೈಟ್ ಬಾಕ್ಸ್ ಡ್ ಲಾ ಒಟ್ಟು ಮಲ್ಪುಲೆ. ಉಂದು ಹೊಂದಾಣಿಕೆ ಆಪುನ ಸಾಧ್ಯತೆ ಸುಮಾರ್ 100% ಉಂಡು. ಫೋಟೋಸ್ವೈಪ್ ಲೈಟ್ಬಾಕ್ಸ್ ನ್ ಉದಾಹರಣೆ ಆದ್ ತೂಯೆರೆ ಚಿತ್ರೊಲೆನ್ ಕ್ಲಿಕ್ ಮಲ್ಪುಲೆ.

ರೆಡಿಮೇಡ್ ಕೋಡ್ ಸ್ನಿಪ್ಪೆಟ್ಸ್ ದ ಬ್ಲಾಗ್ ಲೇಖನೊಲು ಉಂಡು:

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

ಮಸ್ತ್ ಫ್ಲೆಕ್ಸಿಬಲ್

ದಿನೊನು ಆಚರಣೆ ಮಲ್ಪುಲೆ
ನಿಕ್ಲೆನ ಮೋಕೆದಕುಲೆನ್ ಮುತ್ತು ಕೊರ್ಲೆ
ನಿಕ್ಲೆನೊಟ್ಟುಗು ಶುದ್ಧವಾದ್ ಉಪ್ಪುಲೆ
ಮೋಜಿನ್ ಮರಪಂದೆ
ಪ್ರಕೃತಿನ್ ಅನುಭವಿಸೊಡು|

ಕಸ್ಟಮ್ ಶೈಲಿಲೆನ್ ರಚನೆ ಮಲ್ಪುಲೆ

ಈರ್ ಸಿಎಸ್ಎಸ್ ಗ್ ಪರಿಚಿತರಾಂಡ, ಈರ್ ಗ್ಯಾಲರಿದ ಐಟಂಲೆನ್ ಈರ್ ಬಯಕೆ ಮಲ್ಪುನ ರೀತಿಡ್ ಶೈಲಿ ಮಲ್ಪೊಲಿ.

ತೋಜಿದ್ ಬತ್ತಿನ ಉದಾರ್ಮೆದ ಸಿಎಸ್ಎಸ್:

/* 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 ನ್ ಲಾ ಬಳಕೆ ಮಲ್ಪೊಲಿ. ಮಸ್ತ್ ಕಮ್ಮಿ ನಿರ್ಬಂಧೊಲು ಮಾತ್ರ ಉಂಡು. ಮುಲ್ಪ ತೋಜಾದ್ ಕೊರ್ತಿನ ಉದಾರ್ಮೆಲು ಒಂಜೇ ದೃಶ್ಯ ಫಲಿತಾಂಶೊನು ಕೊರ್ಪುಂಡು.

ದಾಖಲಾತಿ – ಸೆಮ್ಯಾಂಟಿಕ್ ಎಚ್ ಟಿಎಂಎಲ್

ಉದಾಹರಣೆ ೧:

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

ಉದಾಹರಣೆ ೨:

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

ಜಾಸ್ತಿ ಉಪಯುಕ್ತ ಲಕ್ಷಣೊಲು

ಸೋಮಾರಿ ಲೋಡ್ ಆವೊಂದುಂಡು

ನಿಕ್ಲೆನ ತೂಯಿನ ಚಿತ್ರೊಲೆನ್ ತ್ವರಿತವಾದ್ ಲೋಡ್ ಮಲ್ಪುಂಡು

ಉಂದು ತೋಜುನ ಪ್ರದೇಶೊಗು ಸಮೀಪೊಡು ಉಪ್ಪುನ ಚಿತ್ರೊಲೆನ್ ಮಾತ್ರ ಲೋಡ್ ಮಲ್ಪುಂಡು. ಅಂಚಾದ್ ತೋಜುನ ಚಿತ್ರೊಲೆಗ್ ಜಾಸ್ತಿ ಬ್ಯಾಂಡ್ ವಿಡ್ತ್.

ದಾಖಲಾತಿ – ಸೋಮಾರಿ ಲೋಡಿಂಗ್

ಎಪಿಐ

ನಿಕುಲು ಮಸ್ತ್ ಮಲ್ಪೆರೆ ಅನುವು ಮಲ್ಪುಂಡು

ಉಂದು ನಿಕುಲೆಗ್ ಚಿತ್ರೊಲೆನ್ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ರೀತಿಡ್ ಸೇರಾವುನ ಬೊಕ್ಕ ತೆಗೆಯೆರೆ, ಆಯ್ಕೆಲೆನ್ ಬದಲಾವರೆ ಅತ್ತಂದೆ ಘಟನೆಲೆಗ್ ಪ್ರತಿಕ್ರಿಯೆ ಕೊರರೆ ಅನುವು ಮಲ್ಪುಂಡು.

ದಾಖಲೆ – ಎಪಿಐ

ವಿಸ್ತರಣೆಲು

ವೈಯಕ್ತಿಕ ಸನ್ನಿವೇಶೊಲೆಗ್ ನಿಕುಲೆಗ್ ಪರಿಹಾರೊಲೆನ್ ಒದಗಾವುಂಡು

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

ವಿಸ್ತರಣೆಲು

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

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

ವ್ಯವಹಾರೊಗು ಸುರು ಮಲ್ಪುಗ!

ಯೋಜನೆಲೆನ್ ತೂಯೆರೆ ಬಟನ್ ಕ್ಲಿಕ್ ಮಲ್ಪುಲೆ!

ಯೋಜನೆಲೆನ್ ತೂಲೆ!