أفضل CSS و jQuery Image Captions مفتوحة المصدر

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

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

CSS Image Captions

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

هذه الأمثلة هي مجرد أفضل الحلول التي وجدتها والتي توفر تأثيرًا سلسًا لتسمية الصور تم تطويره على خصائص CSS2 والرسوم المتحركة الانتقالية لـ CSS.

Label.css

أريد أن أبدأ بتقديم label.css كواحدة من أفضل مكتبات التسميات التوضيحية للصور في CSS. يتيح لك ذلك إضافة أسماء فئات إلى الصور التي تم تسميتها والتي سيتم تحديثها بعد ذلك في HTML. يمكنك فرض التسميات التوضيحية للظهور في أي مكان فوق الصورة ، حتى في الزوايا.

بالإضافة إلى أن مكتبة label.css تجعل من السهل إخفاء التسميات التوضيحية حتى يقوم المستخدم بالمرور فوق الصورة. تعد هذه التقنية رائعة لأنك في بعض الأحيان تريد عرض التسميات التوضيحية كنص ثابت على الصفحة ، بينما تكون تأثيرات الرسوم المتحركة المخفية في أوقات أخرى أكثر أهمية.

هونغكيات تعليق الصور

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

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

تعليقات HTML5 متحركة

مثال HTML5 figcaption من Coalmarch عبارة عن برنامج تعليمي بسيط بشكل جميل لتعليقات الصور على CSS. يمكنك اتباع الخطوات في بضع دقائق فقط والحصول على تخطيط رائع يعرض التسميات التوضيحية المخفية عند التمرير. يحتوي النص البرمجي نفسه على قدر صغير من jQuery ، ولكن من المعقول تمامًا استبداله واستخدام تأثيرات انتقال CSS بدلاً من ذلك.

الشرح في صورة توضيحية

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

jQuery Image Captions

أكبر فائدة لاستخدام jQuery هي النسبة المئوية الأعلى لدعم المتصفح. يجب على أي شخص تم تمكين JavaScript أن يشاهد تعليقات الصور الخاصة بك تمامًا مثل أي متصفح آخر. CSS أسهل لأن بعض المطورين يفضلون عدم الدخول في البرمجة النصية. لكن هذه الحلول لا تقل أهمية وتساهم بشكل كبير في تجربة الواجهة الأمامية.

Caption.js

لقد عثرت للتو على Caption.js منذ فترة وجيزة وقد برزت هذه المكتبة كمصدر ممتاز لمطوري الويب. سيستهدف البرنامج النصي الصور بناءً على محدد jQuery الخاص بك (الفئات والمعرفات وما إلى ذلك) وسيتضمن تلقائيًا عناصر الشكل والتسمية التوضيحية. هذا أمر بالغ الأهمية لأنه سيتم عرض الصفحة النهائية بشكل صحيح ، إلى جانب مساعدة بعض مواضع CSS. Caption.js مفتوح المصدر ومجاني للمساهمة أو التنزيل من Github.

jQuery.imageCaption

الآن أود أن أقول إن jQuery.imageCaption هو الحل الأمثل للمطورين الذين يقومون بتشغيل محرك CMS. هذا البرنامج المساعد سهل التخصيص ويسحب بسرعة التسميات التوضيحية بناءً على النص البديل للصورة. وبالمثل ، سيؤدي ذلك إلى عرض عناصر الشكل والتعليق ، وهو أمر رائع لفوائد تحسين محركات البحث.

باستدعاء الوظيفة imageCaption() ، لا تحتاج إلى تمرير أي معلمات إلى المكالمة. سيستمر عرض هذا بشكل صحيح على الصفحة ويمكنك تطبيق ذلك في أي منشور مدونة على WordPress. وبالمثل ، فإن أي فئات تمت إضافتها إلى عنصر img ستنقل إلى عنصر <figure> ، مما يعني أن لديك قدرًا أكبر من التحكم عبر CSS.

التسمية التوضيحية

Captionate هو بالتأكيد مشروع مفتوح المصدر تم التقليل من قيمته بسبب جميع الحلول الأخرى المتاحة. تم تطويره بواسطة North Krimsly لاستخدامه في محركات CMS المختلفة. يمكنك العثور على دليل تعليمي يشرح عملية تنفيذ Captionate في موقع الويب الخاص بك.

في الأساس ستكتب عنصر HTML5 img مع الصنف .caption وسيتم التقاط هذا بواسطة سكربت jQuery. ثم يتم نقل نص السمة alt إلى عنصر figcaption وكتابته في HTML. تصفح صفحة المثال ويمكنك أن ترى أن بناء جملة Captionate بسيط إلى حد ما مقارنة بالحلول الأخرى.

hcaptions

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

إغلاق

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