جعلت jQuery إضافة الصور إلى مواقع الويب مهمة سهلة. هناك العديد من البرامج النصية jQuery التي تم إصدارها بموجب تراخيص MIT و / أو GPL. معظمها عبارة عن برامج نصية للتوصيل والتشغيل (المكونات الإضافية) لا تتطلب أي معرفة برمجية لاستخدامها على موقع الويب الخاص بك أو تثبيتها على موقع العميل الخاص بك. قد ترغب في إضافة نصوص jQuery إلى خدمات التصميم الخاصة بك.
واحد من هذه jQuery سيناريو جان Sorgalla هو jCarousel. يمكن أن يحتوي هذا المكون الإضافي على العديد من التطبيقات لكل من الرسومات والنصوص. وتتمثل المهمة الرئيسية للبرنامج النصي في تمرير المحتوى أفقياً أو رأسياً. يمكن أن يكون المحتوى ثابتًا أو محملاً ديناميكيًا عبر Ajax أو JavaScript أو PHP أو Flickr. بالطبع ، يتطلب هذا الخيار الثاني الإلمام بهذه اللغات. يعمل jCarousel أيضًا مع Thickbox 3 بحيث تفتح صورة كبيرة الحجم في Thickbox عند النقر فوق الصورة المصغرة في دائري.
تتم الإشارة إلى معظم رمز البرنامج النصي في قسم الرأس بصفحة الويب. ستحتاج إلى مكتبة jQuery ورمز jCarousel المصدر وملفات ورقة أنماط. ما هو لطيف في هذا المكون الإضافي هو أنه يمكن لـ "CSS" أن يكون "ذو لون" من أجل الحصول على العديد من المظهر. يتم وضع المحتوى الذي سيتم تمريره بواسطة البرنامج النصي في نص صفحة الويب في قائمة UL أساسية.
لديك العديد من الخيارات لتكوين البرنامج النصي بما في ذلك إضافة الرسوم المتحركة المخصصة والتخفيف. يمكن أن تعمل مع أزرار التمرير التلقائي أو التنقل. ميزة أخرى لطيفة هي أن عرض الكاروسيل يتم تغيير حجمه تلقائيًا ليناسب نافذة المتصفح. يمكن تهيئتها لإظهار صور أكثر أو أقل حسب حجم المستعرض أو تهيئتها للحصول على عدد محدد من الصور مع تباعد مرن بين الصور حسب الحاجة. يمكن أن يكون لديك أكثر من دائري واحد على الصفحة ومنح كل منهم بشرة مختلفة.
التكامل مع دفق الصور Flickr و Flickr API هي ميزة لطيفة لا تظهر في معظم النصوص. لقد تم اختباره للعمل في العديد من المتصفحات بما في ذلك برنامج Internet Explorer 6 الشهير.
قد تسأل نفسك عن سبب استخدامك لهذا بدلاً من رسم gif بسيط يمكنك إنشاؤه في Photoshop. السبب الرئيسي هو سهولة تحديث دائري بمجرد تثبيته. من الأسهل تبديل المحتوى في قائمة UL بدلاً من إنشاء صورة gif جديدة في كل مرة تحتاج فيها إلى عرض مجموعة مختلفة من الصور.
//sorgalla.com/projects/jcarousel/
تعليمات الفيديو: jQuery Tutorial #6 - Building a jQuery Image Slider (أبريل 2024).