Image Zoom On Click In Hindi

Image Zoom On Click In Hindi – जैसा की आप सब जानते हैं की एक Website में Image का कितना बड़ा Role होता है और Image हमारी Website के लिए क्यों महत्वपूर्ण है ?

दोस्तों अगर आपकी कोई Website है या फिर आप कोई Website बनाना चाहते हैं तो आपके दिमाक में एक बात जरुर आई होगी की हम अपनीं Website में वो कौनसे तरीके अपनाएं जिससे हमारी Website दूसरी वेबसाइटों से अलग हो या Unique हो,

तो इसके लिए मैंने पीछे और भी आर्टिकल लिखे थे जहाँ मैंने उन तरीकों के बारे में बताया था जिनके इस्तेमाल से आप एक Unique और अच्छी Website बना सकते हैं, लेकिन Image Zoom On Click In Hindi के आर्टिकल में आज मैं आपको कुछ नए तरीके बताऊंगा जिनकी सहायता से आप किसी भी Website में Image को कुछ नए तरीकों से दिखा सकते हैं |

Image Zoom On Click In Hindi

Image Zoom On Click In Hindi
Image Zoom On Click In Hindi

आपनें पहले कभी Medium.com का नाम सुना होगा जहाँ आप अपना अनुभव दुसरे लोगों के साथ Share कर सकते हैं पोस्ट लिखकर वो भी Free में, जैसे की मैं Web Tutorial Hindi पर पोस्ट लिखकर आपके साथ अपना अनुभव Share करता हूँ (लेकिन ये मेरे लिए Free नहीं है 😁) ठीक इसी प्रकार आप Medium पर कर सकते हैं |

अगर आपनें कभी Medium.com की पोस्ट को ध्यान से देखा हो तो उसमें जो भी Images हैं उन पर Zoom Effect और Scroll Effect जरुर होता है जिसके कारण Medium.com की पोस्ट Users को काफी अच्छी लगती है और User इससे काफी इम्प्रेस भी होते हैं |

दोस्तों आप भी Add कर सकते हैं Cool Image Effects किसी भी Website में, लेकिन कुछ तरीके हैं जिनको Follow करना काफी जरूरी है |

किसी भी Image में Effect लगानें के लिए आप CSS का JavaScript का या फिर कोई बनीं बनाई Library का इस्तेमाल कर सकते हैं |

इनमें सबसे आसान काम है Library का इस्तेमाल करना तो हम एक Library का इस्तेमाल करनें वाले हैं जिसका नाम है Medium Zoom

Medium Zoom library के Features ?

Medium Zoom library के Features की बात करें तो कुछ पॉइंट है जो आप निचे पढ़ सकते है |

Responsive

दोस्तों Medium Zoom library Fully responsive है यानीं की इस लाइब्रेरी के इस्तेमाल से आपको किसी भी डिवाइस में problem नहीं आएगी | Medium Zoom library सभी डिवाइस में अच्छे तरीके से काम करती है |

Performant and lightweight

Medium Zoom library की performance काफी अच्छी है क्योंकि ये काफी ज्यादा lightweight है जिसके कारण website में फाइल की साइज़ कम होगी और फाइल साइज़ कम होनें से website की स्पीड बरकरार रहती है |

High definition support

दोस्तों अगर आपकी website पर HD image publish है तो Medium Zoom library उस image की quality के साथ कोई छेड़छाड़ नहीं करती है यानीं की किसी भी image की quality Medium Zoom library के कारण खराब नहीं होगी क्योंकि Medium Zoom library image को उसकी original साइज़ में लोड करती है |

Mouse, keyboard and gesture friendly

Medium Zoom library के इस्तेमाल से आप image के किसी भी एरिया पर क्लिक करते हैं या फिर किसी specific कीबोर्ड के बटन पर क्लिक करते हैं तो image का effect proper तरीके से काम करेगा |

Customization 

इस लाइब्रेरी में आप अपना खुद का मार्जिन सेट कर सकते हैं और बैकग्राउंड सेट कर सकते हैं, इसके आलावा ऑफसेट स्क्रॉल भी सेट कर सकते हैं |

Image Zoom On Click के फायदे

दोस्तों अगर आप Image Zoom On Click जैसे तरीकों का इस्तेमाल अपनीं website पर करते हैं तो इससे आपको और आपकी website को काफी फायदे होंगे क्योंकि इस तरह के काम करनें से website को visit करनें वाले लोगों का एक तरह से विस्वास बढ़ता है और इससे website का ट्रैफिक भी increase होता है |

एक उदहारण के तौर पर बात करें तो जैसे की मैं एक user के तौर पर आपकी website पर visit करता हूँ और आपकी website में किसी image पर क्लिक करता हूँ, मेरे क्लिक करते ही image पॉपअप type से मेरे सामने open हो जाएगी जिससे उस image की जानकारी detail से सामनें निकलकर आएगी और मैं उस जानकारी को आसानीं से देख सकता हूँ और समझ सकता हूँ |

उम्मीद है इस उदहारण से आपको कुछ सहायता मिली होगी |

इस तरह की website को google भी रैंक करता है क्योंकि Image Zoom On Click जैसे तरीके user फ्रैंडली होते हैं और जितनीं ज्यादा आपकी website user फ्रेंडली होगी उतनें ही ज्यादा chance है आपकी website रैंक होनें के |

Image Zoom On Click कैसे add करें

(Image Zoom On Click In Hindi) – दोस्तों इस effect को add करनें के लिए Image Zoom On Click In Hindi के आर्टिकल में हम इस्तेमाल करेंगे Medium Zoom लाइब्रेरी का जिसके बारे में आपको मैंने ऊपर भी बताया था |

Medium Zoom लाइब्रेरी का इस्तेमाल आप 2 तरीकों से कर सकते हैं जिसमें पहला तरीका है Medium Zoom CDN के इस्तेमाल से और दूसरा तरीका है Manually अपनें कंप्यूटर में save कर के |

Medium Zoom CDN को इस्तेमाल करनें के लिए आपको निचे दिया गया लिंक add करना है <body> tag close होनें से पहले

<script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script>

और अगर आप CDN का इस्तेमाल नहीं करते हैं तो आप इस लाइब्रेरी को save कर के लिंक कर सकते हैं कुछ इस तरह से

<script src="medium-zoom.min.js"></script>

लाइब्रेरी add करनें के बाद आपको कुछ script का code डालना होगा जिसमें आप अलग-अलग तरह से setting कर सकते हैं जैसे –

<script>
	mediumZoom('.zoom', {
		margin: 50,
		scrolloffset: 400
	})
	mediumZoom('.zoom-black', {
		background: '#000',
		scrolloffset: 200
	})
</script>

दोस्तों अगर आप ध्यान से देखेंगे तो यहाँ .zoom और .zoom-black नाम से आपको selector दिख रहा होगा जो की एक क्लास है जिसको image में add किया जायेगा जिस भी image में इफेक्ट add करना है उसमें कुछ इस तरह से

<img class="zoom" src="Image Url">

<img class="zoom-black" src="Image Url">

अगर आप इस तरह से काम करते हैं तो जरुर आप Image Zoom On Click का effect add कर पाएंगे किसी भी image पर |

दोस्तों अगर फिर भी आपके मन में कोई सवाल है तो आप मुझे comment कर सकते हैं |

Conclusion

उम्मीद है दोस्तों Image Zoom On Click In Hindi के आर्टिकल से आपकी कुछ Help हुई होगी | अगर आपको Image Zoom On Click In Hindi का ये आर्टिकल Helpful लगा है तो इसे अपनें दोस्तों के साथ Share जरुर करें और ताज़ा जानकारी पानें के लिए आप मेरे साथ Social Media से जुड़ सकते हैं.

Leave a Comment