كيفية إنشاء معرض صور بسيط باستخدام HTML و CSS وجافا سكريبت

يعد إنشاء معرض صور بسيط باستخدام HTML و CSS و JavaScript طريقة رائعة لتعلم أساسيات تطوير الويب. في معرض الصور ، ستتمكن من النقر فوق الصور عن طريق تحديد الصور المصغرة لتكبير الصورة على صفحة الويب.

لإنشاء المعرض ، يمكنك استخدام HTML لإضافة محتوى صفحة الويب و CSS لإضافة التصميم. يمكنك استخدام JavaScript لجعل المعرض تفاعليًا عندما ينقر المستخدم على أي من الصور المصغرة.

كيفية إنشاء واجهة المستخدم لمعرض الصور

أضف واجهة المستخدم لمعرض الصور باستخدام HTML و CSS. يتضمن ذلك إضافة صورة كبيرة في وسط صفحة الويب ، والتي ستتغير بناءً على الصورة المصغرة المحددة. يمكنك أيضًا مشاهدة المثال الكامل شفرة المصدر على جيثب.

1. قم بإنشاء ملف جديد يسمى "index.html".
2. داخل هذا الملف ، أضف بنية كود HTML الأساسية:
   instagram viewer

   لغة البرمجة>
   <لغة البرمجةلانج="en-US">
   <رأس>
   <عنوان>معرض الصورعنوان>
   رأس>
   <جسم>
   <شعبةفصل="مقدمة">
   <h2>معرض الصورh2>
   <ص>حدد الصورة المصغرة أدناه لعرض الصورةص>
   شعبة>
   جسم>
   لغة البرمجة>

3. قم بإنشاء مجلد فرعي يسمى "الصور". املأها بعدة صور ، وقم بتسميتها من "image1.jpg" إلى "image10.jpg".
4. في ملف HTML الخاص بك ، أضف div لمعرض الصور:

   <شعبةبطاقة تعريف="معرض الصور">
   شعبة>

5. داخل معرض الصور div ، أضف علامة صورة لعرض الصورة المحددة المكبرة. عرض الصورة الأولى افتراضيًا داخل مجلد "الصور":

   <IMGبطاقة تعريف="الصورة الحالية"src="images / image1.jpg"بديل="الصورة 1">

6. في نفس المجلد مثل ملف HTML الخاص بك ، أضف ملفًا جديدًا يسمى "styles.css" باستخدام CSS التالي. لا تتردد في تعديل CSS لإضافته مكونات تصميم نيومورفيك أو إجراء تعديلات أخرى على التصميم باستخدام هذه النصائح والحيل حول CSS.

7. .intro { 
   محاذاة النص: مركز; 
   خط العائلة: اريال;
   }
   h2 { 
   حجم الخط: 36مقصف;
   }
   ص { 
   حجم الخط: 14نقطة;
   }
   #معرض الصور { 
   عرض: 600مقصف; 
   هامِش: 0 آلي;
   }
   #الصورة الحالية { 
   عرض: 100%;
   } 

8. أضف رابطًا إلى ملف CSS الخاص بك في علامة الرأس لملف HTML الخاص بك:

   <وصلةrel="ورقة الأنماط"يكتب="text / css"href="styles.css">

كيفية إضافة الصور المصغرة للصور الأخرى في المعرض

حاليًا ، يعرض معرض الصور الصورة الأولى فقط. أسفل الصورة المحددة ، أضف قائمة بالصور المصغرة. ستعرض هذه الصور المصغرة معاينة لجميع الصور الموجودة داخل مجلد "الصور".

1. داخل معرض الصور div في ملف HTML ، أضف div آخر لعرض الصور المصغرة للصور الأخرى:

   <شعبةبطاقة تعريف="إبهام الصورة">شعبة>

2. داخل ملف CSS ، أضف بعض الأنماط لقائمة الصور المصغرة:

   # صورة إبهام { 
   عرض: ثني; 
   تبرير المحتوى: مركز; 
   الهامش العلوي: 20مقصف;
   }

3. في نفس المجلد مثل ملفات HTML و CSS ، أضف ملفًا جديدًا يسمى "script.js".
4. أضف رابطًا إلى ملف جافا سكريبت في الجزء السفلي من علامة نص HTML:

   <جسم>
    الكود الخاص بك هنا 
   <النصيsrc="script.js">النصي>
   جسم>

5. داخل ملف JavaScript ، احصل على عنصر HTML الخاص بـ div الذي سيخزن قائمة الصور المصغرة:

   فار imageThumbs = وثيقة.getElementById ("إبهام الصورة");

6. أضف حلقة للتكرار خلال كل صورة من الصور العشر في المعرض:

   ل (فار أنا = 1; أنا <= 10; أنا ++) {
   }

7. داخل الحلقة ، أنشئ عنصر img جديدًا لكل صورة:

   فار الإبهام = وثيقة.createElement ("img");

8. أضف قيمًا لسمتي "src" و "alt". في هذه الحالة ، فإن السمة "src" هي مسار الملف إلى الصورة في نفس الفهرس داخل مجلد "images":

   thumb.src = "صور / صورة" + أنا + ".jpg";
   thumb.alt = "صورة " + ط ؛

9. داخل ملف CSS الخاص بك ، أضف فئة جديدة لتصميم الصورة المصغرة للصورة. يمكنك أيضًا إضافة أنماط تحوم أخرى أو أنماط CSS انتقالية للصور المصغرة إلى اجعل موقع الويب الخاص بك مستجيبًا وتفاعليًا.

   .إبهام { 
   عرض: 80مقصف; 
   ارتفاع: 80مقصف; 
   الكائن المناسب: غطاء; 
   الهامش الأيمن: 10مقصف; 
   المؤشر: المؤشر;
   }

10. داخل ملف JavaScript ، أضف الفئة أعلاه إلى الصورة المصغرة الجديدة:

    thumb.classList.add ("إبهام");

11. أضف الصورة المصغرة الجديدة إلى عنصر HTML الذي يحتوي على قائمة الصور المصغرة:

    imageThumbs.appendChild (الإبهام) ،

كيفية تغيير الصورة عندما ينقر المستخدم على صورة مصغرة

عندما ينقر المستخدم على إحدى الصور المصغرة ، قم بتغيير الصورة المكبرة في وسط الصفحة إلى الصورة المحددة. يمكنك إضافة هذه الوظيفة داخل ملف JavaScript.

1. في الجزء العلوي من ملف JavaScript ، احصل على عنصر HTML للصورة المحددة حاليًا:

   فار CurrentImage = وثيقة.getElementById ("الصورة الحالية");

2. داخل الحلقة ، إضافة معالج الحدث يتم تشغيله عندما يحدد المستخدم أيًا من الصور المصغرة أسفل الصفحة:

   thumb.addEventListener (
   "انقر", وظيفة() {
    }
   );

3. داخل معالج الأحداث ، قم بتغيير السمة "src" للصورة الحالية إلى الصورة المحددة حديثًا. يمكنك أيضًا تحديث السمة "alt":

   currentImage.src = هذا.src؛
   currentImage.alt = هذا.alt؛

4. انقر فوق ملف "index.html" لفتحه في متصفح الويب.
5. حدد أي من الصور المصغرة لعرض الصورة.

استمر في توسيع معرفتك بـ JavaScript

بغض النظر عن تجربتك ، من المهم الاستمرار في بناء المشاريع لتوسيع نطاق معرفتك. استمر في استكشاف مشاريع أخرى مثل بناء لعبة شطرنج أو آلة حاسبة أو قائمة مهام.