معرض الصور في مسج. معرض الصور في jQuery مع تأثير مثير للاهتمام. معرض jQuery Swap

يمكن استخدام حل مماثل لعرض أحدث مقالات المدونة أو لتقديم المنتجات.

طريقة فريدة لعرض صورك في معرض jQuery الفاخر.

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

يتم تكبير الصورة عند تحريك الماوس فوقها.

معرض مسج المهنية 2011.

مكون إضافي jQuery عالي الجودة من مطوري Nivo Slider. قم بتكبير الصورة بالضغط على الصورة المصغرة.

معرض مسج جديد لعام 2011. تمتد تغذية الصور على كامل عرض الشاشة. يمكنك التنقل بين الصور بثلاث طرق: استخدام عجلة الماوس، والتمرير في الجزء العلوي من المعرض، واستخدام قالب الصور المصغرة في الأسفل. المعرض يبدو مثيرا للإعجاب للغاية.

يتم تكبير الصور الموجودة في المعرض بشكل عشوائي وتصغيرها مرة أخرى لإنشاء تأثير الفقاعة.

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

البرنامج المساعد من عام 2011. معرض جديد يحتوي على أوصاف للصور، يمتد عبر مساحة نافذة المتصفح بأكملها، بغض النظر عن حجمها. يتم تنفيذ الصور المصغرة للصور بشكل مثير للاهتمام. يتم الانتقال بين الصور باستخدام الأسهم الموجودة بالقرب من الصورة المصغرة وباستخدام عجلة الماوس.

يقوم البرنامج المساعد تلقائيًا بفحص المجلد وإنشاء نسخ صغيرة من الصور.

تأثير مثير للاهتمام عند تحريك الماوس فوق الصورة المصغرة.

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

معرض jQuery جديد لمشاريعك.

ينبثق المعرض على الصفحة عند الضغط على زر. تظهر الصور المصغرة حول الصورة المكبرة. يمكنك التحكم في التغيير التلقائي للصور. التقنيات المستخدمة: jQuery، CSS، PHP.

معرض مسج. تم تنفيذ التغيير التلقائي للشرائح وتمرير الصور المصغرة إذا كان هناك عدد كبير جدًا منها.

البرنامج المساعد لمعرض الصور باستخدام jQuery.

معرض صور مُحسّن للعرض على الأجهزة المحمولة (الهواتف أو الأجهزة اللوحية).

شريط تمرير jQuery جديد. العديد من التأثيرات المتحركة الرائعة عند تغيير الشرائح.

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

تأثير تحوم مثير للاهتمام.

معرض jQyery مع الصور المصغرة. تم تنفيذ القدرة على العرض في نافذة مدمجة وفي نافذة ملء الشاشة، بالإضافة إلى القدرة على تعطيل/تمكين التغيير التلقائي للشرائح.

يتم تمديد شبكة الصور اعتمادًا على عرض نافذة المتصفح. تأثير تمرير مثير للاهتمام: يتم تمييز الصف والعمود النشطين.

معرض jQuery خفيف الوزن في بضعة أسطر من التعليمات البرمجية.

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

معرض مسج مع تعليق الصورة. العديد من تأثيرات انتقال الشرائح. يتم التنقل بين الصور إما باستخدام الأسهم أو من خلال النقر على الصورة المصغرة.

الصورة ومنمنماتها مصنوعة على شكل دوائر.

حل جافا سكريبت الأصلي لتصميم محفظة المصور. يتم التنقل بين الصور باستخدام الأسهم لأعلى/يسار/يمين وباستخدام المربعات الصغيرة (تقليد الحركة في مساحة ثنائية الأبعاد). يمكنك تجميع الصور من جلسات تصوير مختلفة في صفوف رأسية مختلفة والتنقل خلالها باستخدام عناصر التنقل. شاهد العرض التوضيحي.

مكون إضافي لعرض الصور التي تمتد إلى الحجم الكامل لنافذة المتصفح. يمكن استخدامها لعرض الأعمال من محفظة.

معرض متكامل مع خريطة جوجل. يمكنك توسيعه إلى وضع ملء الشاشة من خلال النقر على الأيقونة الموجودة في الزاوية اليمنى السفلية. مثالية لمواقع السفر.

معرض jQuery مع الصور المصغرة.

عرض الشرائح مع الصور المصغرة.

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

العديد من خيارات العرض والإعدادات.

تبدو جميلة وتعمل بشكل رائع في جميع المتصفحات الحديثة

يمكنك التحكم في عرض الشرائح التلقائي (بدء/إيقاف)، وتبديل الشرائح باستخدام أسهم لوحة المفاتيح، والترقيم التلقائي لعناوين الشرائح إذا كان هناك الكثير منها، ودعم معارض متعددة في صفحة واحدة، والتسميات التوضيحية للشرائح، ودعم واجهة برمجة التطبيقات (API) والقدرة على إنشاء معرض خاص بك تأثيرات انتقال الشريحة

هذا ما يجب أن تبدو عليه نتيجة المعرض الذي سنقوم بإنشائه. يمكنك مشاهدة العرض التوضيحي، وإذا كنت ترغب في ذلك، يمكنك تنزيل النتيجة النهائية للمعرض.

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

أقدم مجموعة أخرى من 15 مكونًا إضافيًا من مكونات jQuery التكيفية التي تتوافق مع متصفحات سطح المكتب وتتناسب تمامًا مع شاشات الأجهزة المحمولة المختلفة (أجهزة الكمبيوتر المحمولة والهواتف الذكية والأجهزة اللوحية وما إلى ذلك).

شاهد العرض التوضيحي على مواقع المطورين، وقم بتنزيل البرنامج الإضافي الذي تفضله وقم بإنشاء وإنشاء وإنشاء...

iLighbox عبارة عن مكون إضافي خفيف الوزن لـ jQuery Lightbox مع دعم لمجموعة واسعة من أنواع الملفات المختلفة: الصور ومقاطع الفيديو وFlash/SWF ومحتوى Ajax والإطارات والخرائط المضمنة. يضيف هذا البرنامج الإضافي أيضًا أزرار الوسائط الاجتماعية، مما يسمح للمستخدمين بمشاركة المحتوى عبر Facebook أو Twitter أو Reddit. فرصة ممتازة لتنظيم عروض شرائح مذهلة ومعارض صور ومقاطع فيديو، مع إمكانية المشاهدة في الوضعين العادي وملء الشاشة.

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

• التبعية: مسج
• دعم المتصفح: IE7+، Chrome، Firefox، Safari وOpera
• الترخيص: الشيطان يعلم)))

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

• التبعية: مسج
• دعم المتصفح: IE9+، Chrome، Safari، Firefox، Opera، IOS4+، Android وWindows Phone
• الترخيص: لم يتم تحديده، ربما تكون محظوظًا)))

مكون إضافي معروف ومثبت جيدًا للعرض المبسط يعتمد على jQuery أو Zepto.js. مؤلف البرنامج الإضافي هو Dmitry Semenov، وهو أيضًا مطور البرنامج الإضافي PhotoSwipe، والذي سأتحدث عنه أدناه. يتم تقديمه كملحق jQuery/Zepto، ويحتوي على ميزات أكثر تقدمًا غير موجودة في PhotoSwipe، مثل دعم الفيديو وعرض الخرائط ومحتوى Ajax وتنفيذ النوافذ المشروطة مع النماذج المضمنة. بكل المقاييس، هذه أداة رائعة أخرى لمطور الويب. يوجد مكون إضافي منفصل لـ WordPress ووثائق مفصلة حول الإعداد والاستخدام. الشيء الوحيد المحبط هو عدم وجود توثيق باللغة الروسية، إذا حكمنا من خلال الاسم واللقب، يبدو أن المؤلف روسي، ولم يفهم أبدًا ما إذا كان ضارًا، أو بسبب وعي وهمي بتطوره، ولكن بلاه. حسنًا ، حسنًا ، من يحتاج إلى معرفة ذلك ، نحن أيضًا لم نغلي الشاي مسلوقًا))).

• التبعية: jQuery 1.9.1+، أو Zepto.js
• دعم المتصفح: IE7 (جزئيًا)، IE8+، Chrome، Firefox، Safari وOpera
• الترخيص: رخصة معهد ماساتشوستس للتكنولوجيا

• التبعية: جافا سكريبت أو مسج
• دعم المتصفح
• الترخيص: رخصة معهد ماساتشوستس للتكنولوجيا

مكون إضافي لـ Lightbox بسرعة 6 كيلوبت للمطورين الأذكياء، ومجهز بجميع الوظائف الضرورية. بالإضافة إلى دعم جميع أنواع المحتوى الشائعة (النص، الصور، iframe، Ajax)، هناك إمكانية توصيل نوع إضافي، ويمكنك أيضًا تطوير الامتداد الخاص بك لهذا البرنامج الإضافي، والذي سيلبي احتياجاتك بالكامل عند إنشاء جديد مشروع. لم أدرس حقًا كيفية عمل هذا الأمر برمته (تطوير الامتداد)، ولكن أولئك الذين قاموا بتثبيت هذا البرنامج الإضافي، أعتقد أنهم سيكتشفون ذلك))).

• التبعية: مسج
• دعم المتصفح: IE8+، Chrome، Firefox، Safari وOpera
• الترخيص: رخصة معهد ماساتشوستس للتكنولوجيا

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

باستخدام سمة data-src للصور بالحجم الكامل. الأمر نفسه ينطبق على مقاطع الفيديو من Youtube وVimeo. دعم ممتاز لجميع تنسيقات الفيديو HTML5 وMP4 وWebM وOgg... الصور المصغرة المتحركة والتصميم المستجيب للجوال وتأثيرات الشرائح والانتقالات السلسة عند التبديل بين الصور والمحتويات الأخرى. يتم تشكيل المظهر وتخصيصه بسهولة باستخدام CSS. التحميل المسبق للصورة وتحسين التعليمات البرمجية. التنقل باستخدام لوحة المفاتيح لأجهزة سطح المكتب، بالإضافة إلى إمكانية استخدام أيقونات الخطوط الإضافية. LightGallery هو المكان الذي يوجد فيه "الدمج" الحقيقي، والشيء الرئيسي هو عدم الضياع في وفرة الإعدادات والقدرات الواسعة لهذا البرنامج الإضافي.
بالنسبة لأولئك الذين يحتاجون إلى شريط تمرير لائق، أوصي بالانتباه إلى واحد من نفس المطورين.
• التبعية: مسج
• دعم المتصفح: IE7+، Chrome، Firefox، Safari، Opera، iOS، Android وWindows Phone
• الترخيص: رخصة معهد ماساتشوستس للتكنولوجيا



13. ستريب جي إس

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

• التبعية: مسج
• دعم المتصفح: IE7+، Chrome، Firefox، Safari، Opera، iOS 5+ وAndroid 3+
• الترخيص: رخصة المشاع الإبداعي BY-NC-ND 3.0



14. طبقة خفيفة

مكون إضافي سهل الاستخدام لـ Lightbox يتناسب بشكل جيد مع أي مشروع ويبدو جيدًا أيضًا على أي شاشة. يوفر المكون الإضافي LightLayer التحكم في العديد من الإعدادات، مثل تغيير لون الخلفية ودرجة الشفافية، وموضع الكتلة الأساسية، واختيار تأثيرات الانتقال عند الفتح/الإغلاق، والوظائف التي يمكن للمستخدمين التعامل معها بشكل مستقل. يعمل البرنامج الإضافي بشكل رائع مع محتوى موقع الويب الخارجي ومشغلات الفيديو والخرائط المضمنة.

• التبعية: مسج
• دعم المتصفح: IE9+، Chrome، Firefox، Safari وOpera
• الترخيص: رخصة معهد ماساتشوستس للتكنولوجيا



15. صندوق السوائل

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

• التبعية: مسج
• دعم المتصفح: IE9+، Chrome، Firefox، Safari، Opera
• الترخيص: رخصة معهد ماساتشوستس للتكنولوجيا



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

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

مع كل الاحترام، أندرو

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

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

من.الموقع | تجريبي





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



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

المنظر المنظر



يعد Parallax Slider حلاً مثيرًا للاهتمام لتنظيم عرض الصور في شكل عرض شرائح مع عناصر تحكم يدوية. الموضع الأصلي للصور المصغرة يجذب الانتباه. يحتوي الموقع الرسمي على تفصيل كامل لكيفية دمج شريط التمرير وتكوينه.



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



هذا عرض شرائح بملء الشاشة مع تغيير الصور تلقائيًا، بدون تأثيرات مذهلة، كل شيء بسيط ولذيذ.



يعد Minimit Gallery مكونًا إضافيًا لـ jQuery قابل للتخصيص بدرجة كبيرة مع مجموعة كبيرة من انتقالات الصور. باستخدام معرض Minimit، يمكنك تنظيم عرض الصور على شكل دائري، وعرض شرائح، ودوار بسيط، وأداة تمرير صور عادية.



عبارة عن مكون إضافي صغير الحجم (2 كيلو بايت) من jQuery يوفر طريقة بسيطة وبسيطة لعرض الصور كعرض شرائح.



عبارة عن معرض جافا سكريبت ذو مظهر جميل، مع عناصر تحكم بديهية وتوافق سلس على جميع أجهزة الكمبيوتر وأجهزة iPhone والأجهزة المحمولة. من السهل جدًا التثبيت والتكوين



على عكس العديد من أشرطة تمرير الصور Javascript وjQuery، يعد Slider.js حلاً مختلطًا، مدعومًا بانتقالات CSS3 والرسوم المتحركة.



هذا قالب من صفحة واحدة لإنشاء عروض تقديمية متنوعة في HTML5 وCSS3.



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



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

عرض شرائح جافا سكريبت للتطوير السريع



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



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



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



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



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



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



إنه مكون إضافي لـ jQuery سهل الاستخدام لعرض صورك كعرض شرائح مع تأثيرات الانتقال بين الصور (لقد رأيت صورًا أكثر إثارة للاهتمام). jqFancyTransitions متوافق وتم اختباره على نطاق واسع مع Safari 2+، Internet Explorer 6+، Firefox 2+، Google Chrome 3+، Opera 9+.



هو مكون إضافي لـ jQuery يتم توزيعه مجانًا لعرض الصور والمعلومات الأخرى في نموذج Lightbox. نافذة منبثقة مع عناصر تحكم وخلفية مظللة وكل ذلك، بسيطة ولذيذة.



مكون إضافي آخر لـ jQuery من سلسلة Lightbox، على الرغم من أن وزنه صغير للغاية (9 كيلو بايت)، إلا أنه يحتوي على الكثير من الوظائف. هناك واجهة مصممة بشكل جيد يمكنك دائمًا تحسينها أو تخصيصها باستخدام CSS.



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



دوار الصورة مع أنواع مختلفة من التحولات. إنه يعمل تلقائيًا وعن طريق النقر، كما أنه من السهل جدًا إعداده.



- معرض صور كامل وليس مجرد شريط تمرير. معاينة الصور المصغرة والقدرة على تحديد تأثيرات الانتقال، والدعم الكامل لجميع المتصفحات، ووصف تفصيلي للتكامل في مشروع ويب والتوزيع المجاني.



هذا هو تطبيق عروض الشرائح الجاهزة للاستخدام باستخدام scriptaculous/النموذج الأولي أو jQuery. يعد Horinaja حلاً مبتكرًا إلى حد ما لأنه يسمح لك باستخدام عجلة للتمرير عبر المحتوى الموجود في شريط التمرير. عندما يكون مؤشر الماوس خارج منطقة عرض الشرائح، يحدث التمرير تلقائيًا؛ وعندما يتم وضع المؤشر فوق عرض الشرائح، يتوقف التمرير.



هذه ميزة من سلسلة من أدوات تمرير الصور البسيطة، وإن كانت مزودة بعناصر تحكم في العرض، وبالتالي تعمل في الوضعين التلقائي واليدوي.



s3Slider هو مكون إضافي لـ jQuery يقوم بإنشاء عرض شرائح من قائمة غير مرتبة من الصور ويمكن تنفيذه بسهولة على أي منصة ويب.



هذا هو مكون إضافي لـ jQuery تم تحسينه لمعالجة كميات كبيرة من الصور مع توفير النطاق الترددي.

خلفية فيغاس



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



— شريط تمرير مثل شريط التمرير، لا أكثر ولا أقل، مع تسميات توضيحية للصور أو إعلانات المقالات وعناصر تحكم بسيطة، بشكل عشوائي.



عبارة عن جافا سكريبت خفيف الوزن (حوالي 5 كيلو بايت) لتنظيم عرض الصور. يتيح لك تغيير الحجم والقياس التلقائي للصور الكبيرة عرض الصورة بالحجم الكامل داخل نافذة المتصفح



الإصدار 4 من PikaChoose jQuery Image Gallery متاح! Pikachoose هو عرض شرائح jQuery خفيف الوزن مع ميزات رائعة! التكامل مع Fancybox، والموضوعات الممتازة (وإن لم تكن مجانية) وأكثر من ذلك بكثير يتم عرضها على انتباهك من قبل مطوري المكونات الإضافية.



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



شريط تمرير jQuery آخر يتناسب تمامًا مع أي قالب WordPress.



تطوير آخر لـ "Nivo"، مثل كل ما يفعله أعضاء هذا الاستوديو، المكون الإضافي مصنوع بجودة عالية، ويحتوي على 16 مؤثرًا انتقاليًا فريدًا، والتنقل عبر لوحة المفاتيح، وغير ذلك الكثير. يتضمن هذا الإصدار مكونًا إضافيًا مخصصًا مباشرةً لـ WordPress. لذا، بالنسبة لجميع محبي محرك التدوين هذا، سيكون Nivo Slider مناسبًا لك تمامًا.



البرنامج المساعد jQuery الذي يسمح لك بإنشاء شريط تمرير بسيط وفعال وجميل للصور من أي حجم بسرعة.



Pirobox هو برنامج نصي خفيف الوزن من jQuery "lightbox"، ويتم العرض في كتلة منبثقة يتم ضبطها تلقائيًا حسب حجم الصورة، مع جميع عناصر التحكم.



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

عرض شرائح بملء الشاشة باستخدام HTML5 وjQuery



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





تطور آخر من فريق Codrops، وهو معرض صور متكامل وعملي، ولكن لا داعي لوصفه، عليك رؤيته.



عرض شرائح الصور، تختفي الصور أمام عينيك مباشرةً، ويكون التأثير رائعًا بكل بساطة.



هو إطار معرض صور جافا سكريبت مبني على أعلى مكتبة jQuery. الهدف هو تبسيط عملية تطوير معرض صور احترافي للويب والأجهزة المحمولة. يمكنك مشاهدته في نافذة منبثقة أو في وضع ملء الشاشة.



لقد بدأنا التعود عليه بهدوء وننتظر أعمالًا جديدة من فريق Codrops. يرجى الحصول على شريط تمرير صور ممتاز مع تأثير انتقال ثلاثي الأبعاد رائع لعرض الصور في وضع ملء الشاشة.



مكون إضافي لـ WordPress من سلسلة منظم عرض الشرائح. يتكامل بسهولة مع أي تصميم تقريبًا ويقدم العديد من خيارات التخصيص للمستخدمين ذوي الخبرة وغير ذوي الخبرة أيضًا.



مكون إضافي آخر مكتوب لـ WordPress، سيجعل من السهل تنظيم عرض شرائح للصور أو أي محتوى آخر على مدوناتك.



مكون إضافي جيد لعرض الشرائح للتكامل مع WordPress. يتم تثبيت عرض الشرائح Xili-floom تلقائيًا، ويُسمح أيضًا بالإعدادات الشخصية.



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



يتيح لك هذا البرنامج المساعد/القطعة إنشاء عروض شرائح وعروض تقديمية ديناميكية يمكن التحكم فيها لموقعك على الويب أو مدونتك التي تعمل على محرك WordPress.



يقوم مكون WordPress الإضافي هذا بتحويل صور المعرض المضمنة إلى عرض شرائح بسيط ومرن. يستخدم البرنامج المساعد شريط تمرير الصور FlexSlider jQuery والإعدادات الشخصية للمستخدم.



هو مكون إضافي لبرنامج WordPress لتنظيم عروض شرائح الصور والصور من SmugMug أو Flickr أو MobileMe أو Picasa أو Photobucket RSS، ويعمل ويعرض باستخدام Javascript خالص.



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



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



هو مكون إضافي لبرنامج WordPress يمكنك من خلاله تنظيم معرض صور على موقع الويب الخاص بك بسهولة وسرعة مع إمكانية عرضه في وضع عرض الشرائح. يمكن أن تكون شاشة العرض تلقائية أو يتم التحكم فيها بالكامل من خلال عرض الصور المصغرة والتعليقات التوضيحية للصور.

من.الموقع | تجريبي



يعرض جميع الصور لمنشور/صفحة كعرض شرائح. تركيب سهل. يتطلب هذا البرنامج المساعد برنامج Adobe Flash للإصدار الذي يحتوي على رسوم متحركة انتقالية، وإذا لم يتم العثور على Flash، فسيعمل شريط التمرير كالمعتاد.



شريط تمرير بسيط آخر لـ WordPress، يعرض صورًا للمقالات والإعلانات القصيرة للمقالات. أستخدم هذا البرنامج الإضافي في هذه المدونة من وقت لآخر.



Meteor Slides عبارة عن شريط تمرير jQuery WordPress يحتوي على أكثر من عشرين نمطًا انتقاليًا للاختيار من بينها. أطلق المؤلف على البرنامج المساعد اسم "النيزك"، ربما يشير إلى سرعة التشغيل، وربما لم ألاحظ أي شيء نيزكي.



oQey Gallery هو معرض صور متكامل يحتوي على عناصر عرض شرائح لـ WordPress، مع إمكانات الفيديو والموسيقى المضمنة.



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



يقوم البرنامج الإضافي Flash Gallery بتحويل معارضك العادية إلى جدران صور مذهلة، مع دعم ألبومات متعددة لكل مشاركة، وعرض ملء الشاشة ووضع عرض الشرائح.



WOW Slider هو منزلق صور jQuery لـ WordPress مع تأثيرات بصرية مذهلة (Explosion، Fly، Blinds، Squares، Fragments، Basic، Fade، Stack، Vertical Stack، Linear) والقوالب المصممة بشكل احترافي.



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

| تجريبي



الجديد في الإصدار 2.4: دعم فرز الصور بالسحب والإسقاط مباشرة من خلال محرر WordPress، بالإضافة إلى القدرة على إضافة روابط الصور إلى الصور الرئيسية. (قد يكون لدى IE8 بعض الأخطاء، ويعمل بشكل جيد في جميع المتصفحات الرئيسية. ويعد المؤلفون بتقديم الدعم الكامل لـ IE8 في المستقبل.)

| تجريبي



سيكون الوتر الأخير لهذه المراجعة هو هذا البرنامج المساعد لـ WordPress، وهو شريط تمرير آخر ذو تأثيرات بصرية مثيرة للاهتمام لاختيار الصور وتغييرها.

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

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

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

مصادر

ترميز HTML

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



• فئات:


• الجميع


• الفئة 1


• الفئة 2


• الفئة 3


• الفئة 4


• 
  
  
  
  
  
  اسم الصورة
  
  
  

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

لا تنس أيضًا أمرين مهمين: يجب أن يحتوي عنصر قائمة li على سمة معرف بيانات فريدة. تحتوي سمة نوع البيانات على فئة الفئة التي وصفتها أعلاه. يبدو أن كل شيء يتعلق بالترميز.

أنماط CSS

لن أركز بشكل خاص على الأنماط، لأننا نستخدم مكتبة PrettyPhoto الجاهزة، المسؤولة عن تكبير الصورة، وهناك الكثير من أكواد CSS. ومع ذلك، تجدر الإشارة إلى أن هناك 5 خيارات لتصميم صورة مكبرة، على الرغم من أنه من الناحية المثالية 3 فقط، لأنه في خيارين تتم إزالة التقريب فقط.

ولذلك، سأعرض فقط أنماط CSS للصور المصغرة وقائمة الفئات.

فئة المحفظة ( الهامش السفلي: 30 بكسل؛ )
.المحفظة-الكاتيلي (
عرض:مضمنة؛
الهامش الأيمن: 10 بكسل؛
}
.صورة كتلة (
العرض محجوب؛
الموقف: نسبي؛
}
.image-block img (
الحدود: 1 بكسل صلب #d5d5d5؛
نصف قطر الحدود: 4px 4px 4px 4px ؛
الخلفية:#FFFFFF؛
الحشو: 10 بكسل؛
}
.image-block img:hover (
الحدود: 1 بكسل صلب #A9CF54؛
مربع الظل:0 0 5px #A9CF54;
}
.منطقة المحفظة لى (
تعويم: اليسار؛
الهامش: 0 12 بكسل 20 بكسل 0;
إخفاء الفائض؛
العرض: 245 بكسل؛
الحشو: 5 بكسل؛
}
.home-portfolio-text ( الهامش العلوي: 10 بكسل؛ )
li.active أ (زخرفة النص:تسطير؛)

من حيث المبدأ، يجب أن يكون كل شيء واضحا مع الأنماط. لجعل الفئات متوازية، يتم تعيين خاصية العرض على السطر. لإعطاء تأثير مخطط تفصيلي للصورة، اضبط لون الخلفية (الأبيض) والحشوة على 10 بكسل. يتم تعيين أحجام عناصر القائمة في .portfolio-area li .

مسج

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

// حدد جميع العناصر الفرعية لمنطقة المحفظة واكتبها في متغير
فار $data = $(".portfolio-area").clone();

$(".portfolio-categ li").انقر فوق(function(e) (
$(".filter li").removeClass("active");

var filterClass=$(this).attr("class").split(" ").slice(-1);

إذا (filterClass == "الكل") (
var $filteredData = $data.find(".portfolio-item2");
) آخر (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
المدة: 600،
ضبط الارتفاع: "تلقائي"
)، وظيفة () (

LightboxPhoto();
});
$(this).addClass("active");
عودة كاذبة؛
});

باستخدام طريقة clone() والمحدد، نختار جميع العناصر الفرعية لـ .portfolio-area ونكتبها في المتغير $data. بعد ذلك، نقوم بتتبع النقر على إحدى الفئات، وهو عنصر li في القائمة مع الفئة .portfolio-categ . نجعل جميع الفئات غير نشطة عن طريق إزالة RemoveClass("active")، إذا لم يتم ذلك، فستكون جميع الفئات نشطة بمرور الوقت وستتوقف التصفية.

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

بعد ذلك، نتحقق مما إذا كان المتغير filterClass يحتوي على السلسلة all، ثم باستخدام طريقة .find، نختار جميع العناصر ذات فئة Wallet-item2 من مصفوفة $data، التي نظرنا إليها أعلاه. يتم وضع العناصر المحددة (وهذه كلها عناصر القائمة، أي جميع الصور) في متغير البيانات المرشحة.

بخلاف ذلك، إذا لم يكن filterClass يساوي all، فلن نضع جميع عناصر القائمة في متغير filterData، ولكن فقط العناصر التي تتطابق سمة نوع البيانات الخاصة بها مع فئة الفئة. باختصار، عناصر فئة واحدة فقط.

وفي النهاية، نقوم بتمرير المتغير الناتج إلى مكتبة jquery Quicksand، التي تقوم بتصفية الصور. هذا كل شيء للتصفية.

الآن بالنسبة لتكبير الصورة في النافذة المنبثقة. كل شيء أبسط بكثير هنا.

مسج("أ").prettyPhoto((
سرعة الرسوم المتحركة: "سريع"،
عرض الشرائح: 5000،
الموضوع: "الفيسبوك"،
show_title: خطأ،
overlay_gallery: خطأ
});

يتم تتبع النقرة على الرابط الذي تبدأ سمته rel بـ beautifulPhoto. ثم يتم تشغيل مكتبة الصور الجميلة ويتم تكبير الصورة بأعجوبة. بالمناسبة، نحن أيضًا نمرر عدة معلمات. مثل أن تكون سرعة الرسوم المتحركة سريعة، وتأخير عرض الشرائح هو 5 ثوانٍ، وموضوع تصميم Facebook (يوجد 5 سمات إجمالاً، وهي موجودة في مجلد الصور/الصور الجميلة)، كما نحظر إظهار اسم الصورة و تكبير الصورة عند تحريك الماوس.

أهلاً بكم! سنتحدث اليوم عن ربما أفضل معرض صور مجاني وشريط تمرير فيديو وصور، فلنتحدث عن "إطار الصور". على الرغم من عدم دعم البرنامج النصي لمدة عامين وتحول المؤلف إلى مشروع حول موضوع مماثل، إلا أنه يعمل بشكل رائع ويستمر في إرضاء العين.

المزايا الرئيسية (+)

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

السلبيات (-)

• نقص دعم المستخدم. احتمالية معالجة مشكلتك أو تصحيحها تكاد تكون معدومة. نعم، هذا أمر سيء، ولكن ليس قاتلا.
الخيار الأول لتوصيل Fotorama

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

• التحقق من jQuery. انتقل إلى الكود المصدري للموقع (اختصار لوحة المفاتيح Ctrl + U) → وحاول العثور على شيء مثل هذا السطر: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

  لتسهيل عملية البحث استخدم Ctrl + F . إذا لم يكن الخط المطلوب موجودا، فسيتعين عليك توصيل jQuery. في WordPress، يمكن القيام بذلك عن طريق لصق الكود أدناه في ملف وظائف القالب (functions.php). في الواقع، يتم استخدام هذا البرنامج النصي عند وجود تعارضات بين إصدارات مختلفة من jQuery ويعمل وفقًا للمخطط التالي: فهو يحذف jQuery المسجل مسبقًا، ويسجل واحدًا جديدًا، ويعرض البرنامج النصي. يمكن العثور على الإصدارات الحالية من مكتبة jQuery هنا.

  يمكنك ببساطة إدراج هذا السطر بين و:

• نقوم بتوصيل fotorama.css وfotorama.js. أدخل الكود التالي بين العلامات و، في WordPress يتم ذلك في ملف رأس السمة (header.php).
• بهذا يكتمل ربط المعرض باستخدام الطريقة الأولى. كيفية استخدامه مكتوب في قسم "إنشاء معرض مباشرة".
خيار الاتصال الثاني [الرمز القصير + التحسين التلقائي]

في خيار الاتصال هذا، سيتم عرض ملفات البرامج النصية فقط على الصفحات الضرورية عبر [الرمز القصير]. وإذا كنت تستخدم البرنامج المساعد Autoptimize، فسيتم أيضًا دمج كود البرنامج النصي في ملفات السمات. يجب أن تزيد هذه المعالجات البسيطة من سرعة تحميل الموقع.

• التحقق من jQuery. كما هو الحال في الخيار الأول، انظر أعلاه.
• قم بتنزيل ملفات إطارات الصور → فك الضغط → التحميل إلى مجلد منفصل في جذر الموقع.
• لإنشاء رمز قصير، أدخل الكود أدناه في ملف وظائف القالب (functions.php)، وقم بتغيير الروابط إلى الملفات الخاصة بك..js"> "; ) add_shortcode("foto"،"sd")؛
• الآن، عند كتابة مقال، أدخل الرمز القصير في النهاية
إنشاء معرض مباشرة

يتم عرض المعرض في كود HTML باستخدام حاوية ج فئة = "فوتوراما"، تحتوي الحاوية على رمز إخراج الصورة أو رابط للصورة . عند كتابة مقال باستخدام محرك WordPress، قم بتحويل المحرر إلى وضع النص وأدخل الحاوية c class="fotorama" .

تبدو هكذا:



أو هكذا (ترقيم الروابط اختياري):

1 3 4

أمثلة على إعدادات Fotorama أبعاد الحاوية

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



هناك إعدادات أخرى:

عرض البيانات = "98٪" // نسبة بيانات العرض النسبي = "800/600" // نسبة العرض إلى الارتفاع data-minwidth = "420" //min. عرض البيانات - الحد الأقصى للعرض = "900" // الحد الأقصى. عرض البيانات-minheight = "320" // دقيقة. الارتفاع data-maxheight = "100% // الارتفاع النسبي الأقصى data-height = "100% // الارتفاع النسبي

المنمنمات

Data-nav="thumbs" مسؤول عن الصور المصغرة



لكن هذه الطريقة ليست فعالة جدًا، نظرًا لأن البرنامج النصي يجب أن يقوم بتحميل جميع الصور مرة واحدة لإنشاء صور مصغرة، لذلك سيكون من الأكثر عقلانية إعداد نسخ صغيرة من الصور مسبقًا. يقوم WordPress تلقائيًا بإنشاء صور مصغرة، وهو ما سنستخدمه. للحصول على رابط للصورة المصغرة، أضف -70x70 إلى اسم الملف (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/ 11/27ltl9eRXk- 70x70.jpg).



بشكل افتراضي، تكون الصورة المصغرة 64 × 64. يمكنك ضبط هذه المعلمة باستخدام عرض البيانات المصغرة (العرض) وارتفاع البيانات المصغرة (الارتفاع). إذا كنت تريد أن يكون للصورة المصغرة حجمها الخاص، فقم بتعيين معلمات العرض والارتفاع لملف الصورة المصغرة:



كود HTML + فوتوراما

يقوم Photoframe بمعالجة HTML وCSS بشكل مثالي، مما يؤدي إلى توسيع وظائف البرنامج النصي بشكل كبير. العمل مع الروابط والكتل والجداول والفقرات وكتابة CSS وغير ذلك الكثير. فيما يلي بعض الأمثلة على أعمال المعرض. إذا لم يتم عرض الجزء المرئي، فانقر فوق الزر "النتيجة".

إظهار/إخفاء الأمثلة

شاهد القلم ooppwb بواسطة Ivanov Klim (@DreamerKlim) على CodePen.

شاهد Pen aVEEVb بواسطة Ivanov Klim (@DreamerKlim) على CodePen.

وضع ملء الشاشة data-allowfullscreen = "true" // في نافذة المتصفح data-allowfullscreen = "native" // على الشاشة بأكملها

من الممكن إضافة صورة كبيرة منفصلة لوضع ملء الشاشة عبر البيانات الكاملة:



آخر data-autoplay ="true" // التشغيل التلقائي data-autoplay = "3000" // الفاصل الزمني بين الشرائح في تسمية توضيحية للبيانات بالمللي ="One" // التعليقات على الصور لوحة مفاتيح البيانات ="true" // تبديل بيانات التنقل بالسهم ="true" // الصور بترتيب مختلف data-navposition ="top" // الصور المصغرة في حلقة البيانات العلوية ="true" // التمرير الدوري فلنحاول توصيل كل شيء وإضافة فيديو "بعض التعليقات 1"> "بعض التعليقات 2"> للعثور على العمل الذي تحبه