عرض شرائح جافا سكريبت مع CSS

• أبريل 30, 2024

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

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



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

#largeImage {
الحدود: 2px الصلبة السوداء.
العرض: 544 بكسل ؛
الارتفاع: 408 بكسل ؛
}

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

img.thumbs {
الحدود: لا شيء ؛
العرض: 40 بكسل ؛
الارتفاع: 40 بكسل ؛
}

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

.slideshow {
الارتفاع: 408 بكسل ؛
أقصى ارتفاع: 408 بكسل ؛
}

أخيرًا ، قمتُ بإنشاء نمط للصورة المصغرة المحددة. قررت أنني أريد أن يكون مصغري المحدد شبه شفاف وأن يكون له حدود حمراء ضيقة. نظرًا لأنه سيتم اختيار صورة واحدة فقط في وقت قررت استخدام معرف يسمى "الحالي" لهذا الغرض. ميزة استخدام CSS هي أنه يمكنني تغيير شكله في أي وقت دون تغيير الرمز. النمط يشبه هذا:

قيمه img # الحالية {
الحدود: 1px الصلبة الأحمر.
فلتر: ألفا (التعتيم = 50)؛
-moz-التعتيم: 0.5.
التعتيم: 0.5 ؛
}

نرى هنا بعض التعليمات البرمجية لمعالجة اختلافات المتصفح مرة أخرى ، والمكالمات القياسية لاستخدام عنصر العتامة ، ولكن لا تدعم كل من المتصفحات المستندة إلى IE و Mozilla ذلك حتى الآن.

أخيرًا ، قمت بتغيير HTML للصور المصغرة لاستخدام الأنماط واستدعاء وظيفتي. يشبه HTML لعرض الشرائح الآن ما يلي:









لم نقم بتغيير جافا سكريبت الخاص بنا ، لذلك لا يزال عرض الشرائح يعمل ، لكن لدينا الآن المزيد من التصميم والعرض التقديمي منفصل عن HTML و JavaScript. ومع ذلك ، لدينا مشكلة واحدة ، في حين أن الصورة المصغرة التي تم تحديدها في البداية تكون شبه شفافة بحدود حمراء ، فإنها تظل هكذا عند تغيير الصور. لإصلاح ذلك ، نحتاج إلى الرجوع إلى صديقنا القديم JavaScript.

يمكنك أن ترى مثالاً فعالاً للرمز حتى الآن هنا.

تعليمات الفيديو: #1 طريقة إنشاء معرض للصور المتحركة باستخدام html و jQuery - الجزء الأول (أبريل 2024).