Gridzy.Gallery

webमराठी

Gridzy.Gallery
JavaScript लायब्ररी

मला सापडलेला सर्वात आश्चर्यकारक फोटो अनुभव. शेवटी कोणीतरी हे योग्य कसे करावे हे समजते!

मिलो पर्सिक – लायब्ररीचा वापरकर्ता
अधिक जाणून घ्या
आता मिळवा

द्रुत अंतर्दृष्टी

1 मिनिट व्हिडिओ ट्यूटोरियल

व्हिडिओ ट्यूटोरियल प्ले करा

फक्त 1 मिनिट

फक्त एका मिनिटात हे जाणून घ्या:

मूलभूत वापर

कॉन्फिगरेशन

फिल्टर

देखावा

दिवस साजरा करा
आपल्या प्रियजनांना चुंबन घ्या
स्वतःशी शुद्ध रहा
मजा विसरू नका
निसर्गाचा अनुभव घ्या

मथळा शैली

सोप्या जलद समाधानांसाठी पूर्वनिर्धारित मथळा शैली

कॉन्फिगर केलेली मथळा शैली पाहण्यासाठी प्रतिमा फिरवा. दर्शविलेली अंगभूत शैली कॉन्फिगर करण्यासाठी बटणे आणि रंग निवडकांसह खेळा.

दस्तऐवजीकरण - मथळे आणि स्किन्स

टॅग आणि फिल्टर

तुमच्या प्रतिमा अधिक संरचित मार्गाने प्रदर्शित करण्यासाठी

अंगभूत फिल्टर प्रणाली अत्यंत लवचिक आहे. CSS निवडक फिल्टरिंगसाठी वापरले जातात ही वस्तुस्थिती प्रत्यक्षात जवळजवळ कोणत्याही प्रकारचे फिल्टर सक्षम करते.

दस्तऐवजीकरण - फिल्टर

अत्यंत सुसंगत

अनेक लाइटबॉक्सेससह वापरण्यायोग्य

कोणत्याही लाइटबॉक्ससह गॅलरी एकत्र करा. ते सुसंगत असण्याची शक्यता जवळजवळ 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;
}
दस्तऐवजीकरण - शैली Gridzy

कोणताही HTML वापरा

तुम्ही जवळजवळ कोणतीही HTML वापरू शकता. फक्त खूप कमी बंधने आहेत. येथे दर्शविलेली उदाहरणे दोन्ही समान दृश्य परिणाम देतात.

दस्तऐवजीकरण - सिमेंटिक 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>

अधिक उपयुक्त वैशिष्ट्ये

आळशी लोडिंग

तुमच्या पाहिलेल्या प्रतिमा जलद लोड करा

हे केवळ दृश्यमान क्षेत्राच्या जवळ असलेल्या प्रतिमा लोड करते. त्यामुळे दृश्यमान प्रतिमांसाठी अधिक बँडविड्थ.

दस्तऐवजीकरण - आळशी लोडिंग

API

तुम्हाला बरेच काही करण्याची अनुमती देते

हे तुम्हाला प्रोग्रॅमॅटिक पद्धतीने इमेज जोडण्याची आणि काढण्याची, पर्याय बदलण्याची किंवा इव्हेंटवर प्रतिक्रिया देण्यास अनुमती देते.

दस्तऐवजीकरण - API

विस्तार

वैयक्तिक परिस्थितींसाठी तुम्हाला उपाय प्रदान करते

हा ब्लॉग लेखांचा संग्रह आहे जो कालांतराने वाढतो आणि Gridzy.Gallery सहजपणे वाढवण्यासाठी उपयुक्त कोड स्निपेट समाविष्ट करतो.

विस्तार

लायब्ररीबद्दल वापरकर्ता

मी नुकतेच माझ्या साइटवर ग्रिडझी समाकलित केले आहे आणि ही आतापर्यंतची सर्वोत्तम गोष्ट आहे! आपण या सर्व कामासाठी VIELEN DANK. मला मिळालेला हा सर्वात आश्चर्यकारक फोटो अनुभव आहे. शेवटी कोणीतरी हे योग्य कसे करावे हे समजते!
मूळ भाषा दाखवा (इंग्रजी)
5 पैकी 5 तारे
उत्तर कॅरोलिना - युनायटेड स्टेट्स
CodeCanyon पुनरावलोकन म्हणून लिहिले
अविश्वसनीय ग्रिड.. व्वा. वेगासाठी अत्यंत अनुकूल.. हेल्मटच्या 'कला'च्या आणखी कामांवर नक्कीच लक्ष ठेवले जाईल
मूळ भाषा दाखवा (इंग्रजी)
5 पैकी 5 तारे
सिंगापूर
CodeCanyon पुनरावलोकन म्हणून लिहिले
ही अतिशय सुरेख रचना केलेली justified ग्रिड गॅलरी आहे, मला आतापर्यंत सापडलेली सर्वोत्तम. ते मार्गात न येता चांगले दिसते, स्क्रीन आकारास चांगला प्रतिसाद देते, अनावश्यक सामानाशिवाय भरपूर उपयुक्त पर्याय आहेत आणि वापरात लवचिक आहे. शिवाय, लेखक प्रतिसाद देणारा, नेहमी उपयुक्त, व्यावसायिक, मैत्रीपूर्ण आहे आणि त्याच्याकडे जावास्क्रिप्ट डाउन पॅट आहे.
मूळ भाषा दाखवा (इंग्रजी)
5 पैकी 5 तारे
लंडन - यूके
CodeCanyon पुनरावलोकन म्हणून लिहिले
हे प्लगइन आश्चर्यकारक आहे - मला वाटले की मला सानुकूलित करण्यासाठी काही तास घालवावे लागतील परंतु ते एक ब्रीझ होते. मी प्रगत सानुकूल फील्डसह कार्य करण्यासाठी ते रुपांतरित केले जे मला प्रशासकाद्वारे माझ्या वर्डप्रेस गॅलरी कशा तयार केल्या जातात यावर पूर्ण नियंत्रण देते. धन्यवाद!
मूळ भाषा दाखवा (इंग्रजी)
5 पैकी 5 तारे
युनायटेड स्टेट्स
CodeCanyon पुनरावलोकन म्हणून लिहिले

चला व्यवसायात उतरूया!

योजना तपासण्यासाठी बटणावर क्लिक करा!

योजना तपासा!