HTML, CSS और JavaScript का उपयोग करके एक साधारण इमेज गैलरी कैसे बनाएं

HTML, CSS और JavaScript का उपयोग करके एक साधारण छवि गैलरी बनाना वेब विकास की मूल बातें सीखने का एक शानदार तरीका है। छवि गैलरी में, आप वेबपृष्ठ पर छवि को बड़ा करने के लिए थंबनेल का चयन करके छवियों के माध्यम से फ़्लिक करने में सक्षम होंगे।

गैलरी बनाने के लिए, आप वेबपृष्ठ सामग्री जोड़ने के लिए HTML और शैली जोड़ने के लिए CSS का उपयोग कर सकते हैं। जब उपयोगकर्ता किसी भी थंबनेल पर क्लिक करता है तो आप गैलरी को इंटरैक्टिव बनाने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

इमेज गैलरी के लिए UI कैसे बनाएं

HTML और CSS का उपयोग करके इमेज गैलरी के लिए UI जोड़ें। इसमें वेबपृष्ठ के केंद्र में एक बड़ी छवि जोड़ना शामिल है, जो चयनित थंबनेल के आधार पर बदल जाएगी। आप पूरा उदाहरण भी देख सकते हैं GitHub पर स्रोत कोड.

1. "index.html" नामक एक नई फ़ाइल बनाएँ।
2. इस फ़ाइल के अंदर, मूल HTML कोड संरचना जोड़ें:

   एचटीएमएल>
   <एचटीएमएललैंग="एन-यूएस">
   <सिर>
   <शीर्षक>छवि गैलरीशीर्षक>
   सिर>
   <शरीर>
   <डिवकक्षा="परिचय">
   <एच 2>छवि गैलरीएच 2>
   <पी>छवि देखने के लिए नीचे एक थंबनेल चुनेंपी>
   डिव>
   शरीर>
   एचटीएमएल>

3. "छवियां" नामक सबफ़ोल्डर बनाएं। इसे कई छवियों के साथ पॉप्युलेट करें, और उन्हें "image1.jpg" से "image10.jpg" नाम दें।
4. अपनी HTML फ़ाइल में, इमेज गैलरी के लिए एक div जोड़ें:

   <डिवपहचान="छवि गैलरी">
   डिव>

5. छवि गैलरी डिव के अंदर, बढ़े हुए चयनित छवि को प्रदर्शित करने के लिए एक छवि टैग जोड़ें। डिफ़ॉल्ट रूप से, "छवियों" फ़ोल्डर के अंदर पहली छवि प्रदर्शित करें:

   <आईएमजीपहचान="वर्तमान छवि"स्रोत="इमेज/इमेज1.जेपीजी"alt="छवि 1">

6. आपकी HTML फ़ाइल के समान फ़ोल्डर में, निम्न CSS के साथ "styles.css" नामक एक नई फ़ाइल जोड़ें। जोड़ने के लिए CSS को बेझिझक संशोधित करें न्यूमोर्फिक डिजाइन घटक या अन्य डिज़ाइन का उपयोग करके ट्वीक करें ये सीएसएस टिप्स और ट्रिक्स.

7. परिचय { 
   पाठ संरेखित: केंद्र; 
   फुहारा परिवार: एरियल;
   }
   एच 2 { 
   फ़ॉन्ट आकार: 36पिक्सल;
   }
   पी { 
   फ़ॉन्ट आकार: 14पं;
   }
   #छवि गैलरी { 
   चौड़ाई: 600पिक्सल; 
   अंतर: 0 ऑटो;
   }
   #वर्तमान छवि { 
   चौड़ाई: 100%;
   } 

8. अपनी HTML फ़ाइल के हेड टैग में अपनी CSS फ़ाइल का लिंक जोड़ें:

   <जोड़नासंबंधित="शैली पत्रक"प्रकार="पाठ/सीएसएस"href="शैलियाँ.सीएसएस">

गैलरी में अन्य छवियों के लिए थंबनेल कैसे जोड़ें

वर्तमान में, छवि गैलरी केवल पहली छवि प्रदर्शित करती है। चयनित छवि के नीचे, थंबनेल की एक सूची जोड़ें। ये थंबनेल "छवियों" फ़ोल्डर के अंदर सभी छवियों का पूर्वावलोकन प्रदर्शित करेंगे।

1. HTML फ़ाइल में छवि गैलरी div के अंदर, अन्य छवियों के लिए थंबनेल प्रदर्शित करने के लिए एक और div जोड़ें:

   <डिवपहचान="छवि-अंगूठे">डिव>

2. CSS फ़ाइल के अंदर, थंबनेल की सूची के लिए कुछ स्टाइलिंग जोड़ें:

   #छवि-अंगूठे { 
   दिखाना: मोड़ना; 
   औचित्य-सामग्री: केंद्र; 
   मार्जिन टॉप: 20पिक्सल;
   }

3. आपकी HTML और CSS फ़ाइलों के समान फ़ोल्डर में, "script.js" नामक एक नई फ़ाइल जोड़ें।
4. HTML बॉडी टैग के नीचे अपनी JavaScript फ़ाइल में एक लिंक जोड़ें:

   <शरीर>
    आपका कोड यहाँ 
   <लिखी हुई कहानीस्रोत="स्क्रिप्ट.जेएस">लिखी हुई कहानी>
   शरीर>

5. JavaScript फ़ाइल के अंदर, div का HTML तत्व प्राप्त करें जो थंबनेल की सूची संग्रहीत करेगा:

   वर छविअंगूठे = दस्तावेज़.getElementById("छवि-अंगूठे");

6. गैलरी में 10 छवियों में से प्रत्येक के माध्यम से लूप में फॉर-लूप जोड़ें:

   के लिए (वर मैं = 1; मैं <= 10; मैं++) {
   }

7. लूप के अंदर, प्रत्येक इमेज के लिए एक नया img एलिमेंट बनाएं:

   वर अंगूठा = दस्तावेज़.क्रिएट एलिमेंट ("आईएमजी");

8. "Src" और "alt" विशेषताओं के लिए मान जोड़ें। इस मामले में, "src" विशेषता "छवियों" फ़ोल्डर के अंदर एक ही अनुक्रमणिका पर छवि का फ़ाइल पथ है:

   थंब.src = "इमेज/इमेज" + मैं + ".जेपीजी";
   थंब.ऑल्ट = "छवि " + मैं;

9. अपनी CSS फ़ाइल के अंदर, छवि के थंबनेल को शैलीबद्ध करने के लिए एक नया वर्ग जोड़ें। आप थंबनेल के लिए अन्य होवर या संक्रमणकालीन CSS स्टाइल भी जोड़ सकते हैं अपनी वेबसाइट को उत्तरदायी और इंटरैक्टिव बनाएं.

   ।अँगूठा { 
   चौड़ाई: 80पिक्सल; 
   ऊंचाई: 80पिक्सल; 
   वस्तु फिट: ढकना; 
   मार्जिन-सही: 10पिक्सल; 
   कर्सर: सूचक;
   }

10. जावास्क्रिप्ट फ़ाइल के अंदर, उपरोक्त वर्ग को नए थंबनेल में जोड़ें:

    थंब.क्लासलिस्ट.ऐड ("अँगूठा");

11. थंबनेल की सूची वाले HTML तत्व में नया थंबनेल जोड़ें:

    imageThumbs.appendChild (अंगूठा);

जब उपयोगकर्ता थंबनेल पर क्लिक करता है तो छवि को कैसे बदलें I

जब उपयोगकर्ता थंबनेल में से किसी एक पर क्लिक करता है, तो पृष्ठ के केंद्र में बढ़ी हुई छवि को चयनित छवि में बदलें। आप इस कार्यक्षमता को जावास्क्रिप्ट फ़ाइल के अंदर जोड़ सकते हैं।

1. JavaScript फ़ाइल के शीर्ष पर, वर्तमान में चयनित छवि का HTML तत्व प्राप्त करें:

   वर वर्तमान छवि = दस्तावेज़.getElementById("वर्तमान छवि");

2. फॉर-लूप के अंदर, एक ईवेंट हैंडलर जोड़ें यह ट्रिगर करता है जब उपयोगकर्ता पृष्ठ के निचले भाग में किसी भी थंबनेल का चयन करता है:

   thumb.addEventListener(
   "क्लिक करें", समारोह() {
    }
   );

3. ईवेंट हैंडलर के अंदर, वर्तमान छवि की "src" विशेषता को नई चयनित छवि में बदलें। आप "alt" विशेषता को भी अपडेट कर सकते हैं:

   वर्तमान छवि .src = यह.src;
   वर्तमान छवि.alt = यह.alt;

4. इसे वेब ब्राउज़र में खोलने के लिए "index.html" फ़ाइल पर क्लिक करें।
5. छवि देखने के लिए किसी भी थंबनेल का चयन करें।

अपने जावास्क्रिप्ट ज्ञान का विस्तार करना जारी रखें

आपके अनुभव के बावजूद, अपने ज्ञान का विस्तार करने के लिए प्रोजेक्ट बनाते रहना महत्वपूर्ण है। शतरंज का खेल, कैलकुलेटर, या टू-डू सूची बनाने जैसी अन्य परियोजनाओं का पता लगाना जारी रखें।