معرض محفظة مسج. مجموعة مختارة من أشرطة التمرير سريعة الاستجابة

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

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

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

قم بتشغيل المكون الإضافي MixItUp ، الصق هذا الرمز بعد الملفات أعلاه:

< script type= "text/javascript" >$ (function () (var filterList = (init: function () ($ ("# auctioniolist"). mixitup ((targetSelector: ".portfolio"، filterSelector: ".filter"، التأثيرات: ["fade"]، التسهيل : "snap"، // استدعاء تأثير التمرير onMixEnd: filterList. hoverEffect ()))؛)، hoverEffect: function () ($ ("# auctioniolist .portfolio"). hover (function () ($ (this). find (". label"). stop (). animate ((bottom: 0)، 200، "easyOutQuad")؛ $ (this). find ("img"). stop (). animate ((top: - 30 )، 500، "easyOutQuad")؛)، الوظيفة () ($ (هذا). ابحث عن (". Label"). Stop (). Animate ((bottom: - 40)، 200، "easyInQuad")؛ $ ( هذا). find ("img"). stop (). animate ((top: 0)، 300، "easyOutQuad")؛))؛))؛ filterList. init ()؛))؛

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

لتشكيل تخطيط الصفحة ومظهر العناصر ، قم بتوصيل ملفين بالمستند . ، واحد للأنماط الأساسية ، دعنا نسميها layout.css وملف CSS صغير آخر normalize.css لضمان تناسق أفضل بين المتصفحات في التصميم القياسي للعناصر:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

الآن دعونا نرتب كل شيء بالترتيب ، إن أمكن بدون ماء غير ضروري ، بطريقة يسهل الوصول إليها ومفهومة ، بلغتنا الأم التي طالت معاناتنا.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >كل شىء < li>< span class = "filter" data- filter= "app" >التطبيقات < li>< span class = "filter" data- filter= "card" >بطاقات العمل < li>< span class = "filter" data- filter= "icon" >أيقونات < li>< span class = "filter" data- filter= "logo" >شعار < li>< span class = "filter" data- filter= "web" >تصميم المواقع

• كل شىء
• التطبيقات
• بطاقات العمل
• أيقونات
• شعار
• تصميم المواقع

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

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >الاستضافة من قبل Beget. رو < span class = "text-category" >شعار < div class = "label-bg" > .........

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

CSS

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

.container (الموضع: نسبي ؛ العرض: 960 بكسل ؛ الهامش: 0 تلقائي ؛ / * ستتمكن من رؤية سلسلة الانتقالات عند تغيير حجم نافذة المتصفح * /-webkit- الانتقال: كل 1s سهلة ؛ -موز-الانتقال: كل 1s سهولة ؛ -o-Transition: سهولة كل 1s ؛ الانتقال: سهولة كل 1s ؛ ) # الفلاتر (الهامش: 1٪ ؛ الحشو: 0 ؛ نمط القائمة: لا شيء ؛) # الفلاتر لي (عائم: يسار ؛) # فلاتر لي سبان (عرض: كتلة ؛ الحشو: 5 بكسل 20 بكسل ؛ زخرفة النص: لا شيء ؛ اللون : # 666 ؛ / * إضافة بعض الظل للنص * /ظل النص: 1 بكسل 1 بكسل #FFFFFF ؛ المؤشر: المؤشر. ) / * تغيير خلفية الفئة عند المرور بالماوس * /#filters li span: hover (background: # 34B7CD؛ text-shadow: 0 0 2px # 004B7D؛ color: #fff؛) / * خلفية عنصر الفئة النشطة * /#filters li span.active (background: rgb (62، 151، 221)؛ text-shadow: 0 0 2px # 004B7D؛ color: #fff؛) # Portfoliolist .portfolio (-webkit-box-sizing: border-box؛ -حجم المربع: مربع الحدود ؛ -حجم المربع: مربع الحدود ؛ العرض: 23٪ ؛ الهامش: 1٪ ؛ العرض: لا شيء ؛ عائم: يسار ؛ تجاوز: مخفي ؛). تجاوز: مخفي ؛ موضع: نسبي! مهم ؛ الخلفية: # 666 ؛ المؤشر: المؤشر ؛). محفظة img (أقصى عرض: 100٪ ؛ الموضع: نسبي ؛) / * التواقيع مخفية بشكل افتراضي * /.portfolio .label (الموضع: مطلق ؛ عرض: 100٪ ؛ ارتفاع: 40 بكسل ؛ أسفل: -40 بكسل ؛). Portfolio .label-bg (الخلفية: rgb (62 ، 151 ، 221) ؛ العرض: 100٪ ؛ الارتفاع: 100 ٪ ؛ الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛). محفظة. عرض: كتلة ؛ حجم الخط: 9 بكسل ؛)

الحاوية (الموضع: نسبي ؛ العرض: 960 بكسل ؛ الهامش: 0 تلقائي ؛ / * ستتمكن من رؤية سلسلة الانتقالات عند تغيير حجم نافذة المتصفح * / -webkit-transfer: all 1s easy؛ -moz-transfer: all سهولة 1s ؛ -o- الانتقال: كل 1s سهل ؛ الانتقال: كل 1s بسهولة ؛) # الفلاتر (الهامش: 1٪ ؛ الحشو: 0 ؛ نمط القائمة: لا شيء ؛) # الفلاتر li (تعويم: يسار ؛) # الفلاتر li span (display: block؛ padding: 5px 20px؛ text-decoration: none؛ color: # 666؛ / * إضافة بعض الظل للنص * / text-shadow: 1px 1px #FFFFFF؛ cursor: pointer؛) / * قم بتغيير ال خلفية الفئة عند التمرير * / #filters li span: hover (background: # 34B7CD؛ text-shadow: 0 0 2px # 004B7D؛ color: #fff؛) / * خلفية عنصر الفئة النشطة * / #filters li span . active (background: rgb (62، 151، 221)؛ text-shadow: 0 0 2px # 004B7D؛ color: #fff؛) #portfoliolist .portfolio (-webkit-box-sizing: border-box ؛ -moz-box -الحجم: مربع الحدود ؛ -o-box- الحجم: مربع الحدود ؛ العرض: 23٪ ؛ الهامش: 1٪ ؛ العرض: لا شيء ؛ تعويم: يسار ؛ تجاوز: مخفي ؛) .po rtfolio- المجمع (تجاوز: مخفي ؛ الموقف: نسبي! مهم ؛ الخلفية: # 666 ؛ المؤشر: المؤشر. ) .portfolio img (max-width: 100٪؛ position: النسبي؛) / * التسميات التوضيحية مخفية افتراضيًا * / .portfolio .label (موضع: مطلق ؛ عرض: 100٪ ؛ ارتفاع: 40 بكسل ؛ أسفل: -40 بكسل ؛) . Portfolio .label-bg (الخلفية: RGB (62، 151، 221) ؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الموضع: مطلق ؛ الجزء العلوي: 0 ؛ اليسار: 0 ؛). Portfolio. Label-text (اللون: # fff ؛ الموضع: نسبي ؛ z-index: 500 ؛ padding: 5px 8px ؛). Portfolio .text-category (display: block ؛ font-size: 9px ؛)

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

/ * Tablet * /media only screen and (min-width: 768px) and (max-width: 959px) (.container (width: 768px؛)) / * الهاتف المحمول - ملاحظة: تصميم بعرض 320 بكسل * /شاشةmedia only and (max-width: 767px) (.container (width: 95٪؛) #portfoliolist .portfolio (width: 48٪؛ margin: 1٪؛)) / * الهاتف المحمول - ملاحظة: تصميم بعرض 480 بكسل * /شاشة @ media only and (min-width: 480px) and (max-width: 767px) (.container (width: 70٪؛))

/ * Tablet * /media only screen and (min-width: 768px) and (max-width: 959px) (.container (width: 768px؛)) / * Mobile - Note: Design for 320px width * /media only الشاشة و (الحد الأقصى للعرض: 767 بكسل) (الحاوية (العرض: 95٪ ؛) # محفظة الأوراق المالية. محفظة (العرض: 48٪ ؛ الهامش: 1٪ ؛)) / * الهاتف المحمول - ملاحظة: تصميم للعرض 480 بكسل * / @ media الشاشة فقط و (الحد الأدنى للعرض: 480 بكسل) و (الحد الأقصى للعرض: 767 بكسل) (. الحاوية (العرض: 70٪ ؛))

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

عند إنشاء الدرس ، تم استخدام المواد التالية :. النسخة الأصلية ، النقية ، الطازجة من قلم المؤلف ، صفحة المحفظة ، موجودة في نفس المكان.

بالتوفيق للجميع وله فوائد للجسم ، لقضاء بقية الصيف القصير!

حاليًا ، شريط تمرير - دائري - وظيفة تحتاجها فقط إلى موقع ويب لنشاط تجاري أو موقع ويب - محفظة أو أي مورد آخر. جنبًا إلى جنب مع منزلقات الصور بملء الشاشة ، تتلاءم منزلقات الرف الدائري الأفقية جيدًا مع أي تصميم ويب.

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

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

Slick - مكون إضافي منزلق حديث - دائري

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

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

الوضع التجريبي | تحميل

Owl Carousel 2.0 - jQuery - مكون إضافي سهل الاستخدام

في ترسانة هذا البرنامج المساعد - مجموعة كبيرةميزات مناسبة للمطورين المبتدئين وذوي الخبرة على حد سواء. هذه نسخة محدثة من شريط التمرير الدائري. تم تسمية سلفه بنفس الاسم تمامًا.

يحتوي شريط التمرير على بعض المكونات الإضافية المضمنة لتحسين الوظائف العامة. الرسوم المتحركة ، تشغيل الفيديو ، التشغيل التلقائي لشريط التمرير ، التحميل البطيء ، الضبط التلقائي للارتفاع هي السمات الرئيسية لـ Owl Carousel 2.0.

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

أمثلة | تحميل

jQuery Silver Track البرنامج المساعد

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

أمثلة | تحميل

AnoSlide - منزلق jQuery مدمج للغاية وسريع الاستجابة

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

أمثلة | تحميل

دائري البومة - منزلق Jquery - دائري

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

أمثلة | تحميل

معرض ثلاثي الأبعاد - دائري

يستخدم انتقالات ثلاثية الأبعاد بناءً على أنماط CSS وبعض أكواد جافا سكريبت.

أمثلة | تحميل

دائري ثلاثي الأبعاد باستخدام TweenMax.js و jQuery

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

أمثلة | تحميل

دائري باستخدام التمهيد

شريط تمرير دائري سريع الاستجابة باستخدام تقنية bootstrap مناسب تمامًا لموقع الويب الجديد الخاص بك.

أمثلة | تحميل

استنادًا إلى Bootstrap - إطار عمل منزلق متحرك لـ Moving Box

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

أمثلة | تحميل

زلاجة دائرية صغيرة

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

يبدو شريط التمرير ممتعًا جدًا في الوضع الدائري. تم تنفيذ دعم السحب والإفلات ونظام التمرير التلقائي للشرائح بشكل ممتاز.

أمثلة | تحميل

شريط تمرير محتوى Thumbelina

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

أمثلة | تحميل

واو - منزلق - دائري

يحتوي على أكثر من 50 تأثيرًا يمكن أن تساعدك في إنشاء شريط تمرير أصلي لموقعك على الويب.

أمثلة | تحميل

شريط تمرير محتوى jQuery المتجاوب bxSlider

قم بتغيير حجم نافذة المتصفح لترى كيف يتكيف شريط التمرير. يأتي Bxslider مع أكثر من 50 خيار تخصيص ويعرض ميزاته بتأثيرات انتقال مختلفة.

أمثلة | تحميل

ي كاروسيل

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

أمثلة | تحميل

Scrollbox - jQuery plugin

Scrollbox هو مكون إضافي مضغوط لإنشاء شريط تمرير - دائري أو خط تمرير نصي. تشمل الميزات الرئيسية التمرير الرأسي والأفقي مع توقف مؤقت عند الماوس فوقه.

أمثلة | تحميل

dbpasCarousel

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

أمثلة | تحميل

Flexisel: البرنامج المساعد JQuery Slider سريع الاستجابة - دائري

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

يختلف التصميم المتجاوب لـ Flexisel ، عند العمل على الأجهزة المحمولة ، عن التخطيط الموجه إلى حجم نافذة المتصفح. تم تكييف Flexisel تمامًا للعمل على الشاشات ، منخفضة وعالية الدقة.

أمثلة | تحميل

Elastislide - شريط تمرير سريع الاستجابة - دائري

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

مثال | تحميل

فليكس سلايدر 2

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

مثال | تحميل

دائري مذهل

Amazing Carousel عبارة عن شريط تمرير صورة jQuery سريع الاستجابة. يدعم العديد من أنظمة إدارة المواقع مثل WordPress و Drupal و Joomla. يدعم أيضًا إصدارات Android و IOS وسطح المكتب لأنظمة التشغيل دون أي مشكلة في التوافق. تتيح لك قوالب الرف الدائري المضمنة استخدام شريط التمرير في الأوضاع الرأسية والأفقية والدائرية.

أمثلة | تحميل

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

فوتوبوكس

معرض صور مجاني وخفيف الوزن وسريع الاستجابة، حيث يتم إجراء جميع التأثيرات والانتقالات باستخدام css3. مثالي لإنشاء موقع ويب للتصوير الفوتوغرافي.

معرض S

ملفت للانتباه البرنامج المساعد Jquery image gallery... الرسوم المتحركة تعمل مع css3.

الماس

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

سوبر بوكس

معرض الصور الحديث باستخدام Jquery و css3 و html5... لقد اعتدنا جميعًا على حقيقة أنه عند النقر فوق المعاينة ، يتم فتح الصورة الكاملة في صندوق مبسط (نافذة منبثقة). قرر مطورو هذا المكون الإضافي أن Lightbox قد تجاوز فائدته بالفعل. الصور في هذا المعرض تفتح أسفل المعاينة. تحقق من العرض التوضيحي ولاحظ أن هذا الحل يبدو أكثر حداثة.
|

معرض يتلاشى قطري ناعم

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

معرض جاما

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

الشبكة المصغرة مع معاينة موسعة

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

ي معرض

jGallery هو شاشة كاملة ، معرض صور سريع الاستجابة... التأثيرات والانتقالات وحتى الأسلوب قابلة للتخصيص بسهولة.

Glisse.js

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

تدفق الفسيفساء

بسيط وسريع الاستجابة معرض للصور مع شبكة بأسلوب Pinterest.

جاليريا

معرض أنيق آخر مع شبكة على غرار Pinterest تمت تصفيتها حسب الفئة. يعمل في المتصفحات: Chrome و Safari و Firefox و Opera و IE7 + ومتصفح Android و Chrome mobile و Firefox mobile.

الأقل. js

ممتاز معرض صور مجانيمع باستخدام JQUERYو 5 و CSS3. إنه ذو مظهر جذاب للغاية وسيجذب بالتأكيد انتباه زوار موقعك.

flipLightBox

معرض بسيط للصور. عند النقر فوق المعاينة ، تفتح الصورة الكاملة في Lightbox.

معرض blueimp

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

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

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

في مقال اليوم ، قمنا بجمعها من أجلك أفضل صالات العرضالصور وشرائح jQuery.

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

اختر أيًا من هذه العناصر يتناسب تمامًا مع مشروعك.

1. Bootstrap Slider

Bootstrap Slider هو منزلق مجاني للصور محسّن للجوّال مع التمرير باللمس والتمرير السريع. سيبدو رائعًا على أي شاشة وفي أي متصفح. يمكنك تحميل الصور ومقاطع الفيديو والنصوص والصور المصغرة والأزرار في أشرطة التمرير.

2. شريط تمرير معاينة المنتج

يجسد شريط تمرير معاينة المنتج الإمكانات الكاملة لـ jQuery ويتكامل تمامًا مع أي واجهة. ستسعد أيضًا بجودة ونظافة كود هذا البرنامج المساعد.

3. معرض الصور القابل للتوسيع

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

4. فوتوراما

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

5. غامرة المتزلج

يتيح لك Immersive Slider إنشاء تجربة عرض شرائح فريدة مشابهة لشريط تمرير Google TV. يمكنك تغيير صورة الخلفية بحيث يتم تعتيمها للحفاظ على التركيز في الصورة الرئيسية.

6. Leastjs

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

7. قالب اللوحات المنزلقة

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

8. قالب محفظة Squeezebox

يوفر قالب محفظة Squeezebox تأثيرات الحركة للمحافظ. عندما تحوم فوق الصورة الرئيسية (أو الكتلة) ، تظهر العناصر المثبتة.

9. خلط الصور

يعد Shuffle Images مكونًا إضافيًا سريع الاستجابة يتيح لك إنشاء معرض بالصور التي تتغير عند التمرير.

10. برنامج jQuery Lightbox الإضافي المجاني

حر jQuery Lightboxيساعدك البرنامج المساعد على إظهار صورة واحدة أو أكثر على صفحة واحدة. يمكن أيضًا تكبيرها وإعادتها إلى حجمها الأصلي.

11. PgwSlider - شريط تمرير سريع الاستجابة لـ jQuery

PgwSlider عبارة عن شريط تمرير صور مبسط. كود jQuery خفيف الوزن ، لذا فإن سرعة تحميل هذا البرنامج المساعد ستفاجئك بسرور.

12. معرض الصور بولارويد المتناثرة

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

13. تصفية المحتوى نطاط

يعد Bouncy Content Filter هو الحل الأمثل والمحفظة. يتيح هذا المكون الإضافي للمستخدمين الانتقال بسرعة من فئة إلى أخرى.

14. بسيط jQuery المتزلج

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

15. جلايد شبيبة

Glide JS عبارة عن شريط تمرير jQuery بسيط وسريع وسريع الاستجابة. من السهل إعداده ولا يشغل مساحة كبيرة.

16. منزلق السحب بملء الشاشة مع اختلاف المنظر

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

بواسطة التخاطر الرقمي
شريط تمرير محتوى مذهل: SlideDeck - طريقة أفضل لتوفير المحتوى على الويب بهدف تسهيل هضم وفهم محتوى موقع الويب على المستخدمين.

slideViewer (منزلق صورة jQuery مبني على قائمة واحدة غير مرتبة) 1.2

بواسطة جيان كارلو مينجاتي
SlideViewer هو ملحق jQuery خفيف الوزن (3.5 كيلو بايت) يسمح بإنشاء معرض صور على الفور عن طريق كتابة سطور قليلة فقط من HTML مثل قائمة غير مرتبة من الصور

jqFancyTransitions - عرض شرائح مع تأثيرات الشريط

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

AviaSlider - عرض شرائح jQuery

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

بواسطة Dev7studios
برنامج jQuery & WordPress Image Slider الأكثر روعة في العالم ، مع الميزات:

• 16 تأثير انتقال فريد
• ترميز بسيط ونظيف وصالح
• الكثير من الإعدادات للتعديل
• بنيت في التوجيه والتحكم الملاحة
• نسخة معبأة بأوزان فقط 12kb
• يدعم ربط الصور
• التنقل باستخدام لوحة المفاتيح
• تعليقات HTML
• 3 ثيمات البقعة
• مجاني للاستخدام وإساءة الاستخدام بموجب ترخيص MIT

بواسطة DaleDavies
ربما يكون البرنامج المساعد jQuery أسهل استخدامًا لإنشاء عروض الشرائح! تتميز jQuery Easy Slides أيضًا بكونها خفيفة الوزن إلى حد ما ، حيث يبلغ وزن كل من Javascript و CSS أقل بقليل من 2.1 كيلو بايت.

متزلج متقدم - منزلق jQuery XML

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

بواسطة OVIDIU CHERECHEȘ
Dragdealer هو مكون JavaScript قائم على السحب يضم حلولًا أمامية لا نهاية لها. تم تصميمه بأناقة للمبرمجين المدركين لجافا سكريبت.

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

بواسطة سام دن
الحجم الكبير هو عرض شرائح في الخلفية بملء الشاشة تم إنشاؤه باستخدام مكتبة jQuery.

بواسطة جيريمي فراي
ملحق jquery بسيط لعرض الشرائح معرض الصور الخاص بك.

UnoSlider - شريط التمرير الذي تم تمكينه باللمس المستجيب

بواسطة bxCreative
bxSlider عبارة عن شريط تمرير محتوى jQuery مع ميزات:

• التحولات الأفقية والعمودية والمتلاشية
• عرض وتحريك شرائح متعددة في وقت واحد (دائري)
• السابق / التالي ، بيجر ، ضوابط تلقائية
• تخفيف الانتقالات
• بداية عشوائية
• وضع المؤشر
• قبل ، بعد ، الأول ، الأخير ، التالي ، وظائف رد الاتصال السابقة
• وشملت التصميم الاختياري
• طن من الخيارات

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

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

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

بواسطة بوبان كاريشيك
يتكون المكون الإضافي s3Slider jQuery من مثال على برنامج عرض الشرائح السلس jd`s.

بواسطة توقيع جديد
تم تطوير jCoverflip لتمكين التخصيص السريع والحبيبي للشكل والمظهر ومجموعة الميزات.

بواسطة ماري لو
Elastislide عبارة عن مكتبة jQuery متجاوبة من شأنها تكييف حجمها وسلوكها من أجل العمل على أي حجم شاشة. سيؤدي إدخال هيكل الكاروسيل في حاوية بعرض السوائل أيضًا إلى تكوين سائل الكاروسيل.

بواسطة ZURB
هل سئمت من أشرطة تمرير الصور المربكة والمتضخمة التي لا تعمل أبدًا؟ Rock ZURB's Orbit مقابل 4 كيلوبايت فقط.

LayerSlider - منزلق تأثير المنظر

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

بواسطة تايلر سميث
ملحق jQuery منزلق رائع وسريع الاستجابة بالكامل. مع الميزات:

• ترميز بسيط ودلالي
• مدعوم في جميع المتصفحات الرئيسية
• أفقي / عمودي الشرائح والرسوم المتحركة تتلاشى
• دعم متعدد المنزلق ، واجهة برمجة تطبيقات رد الاتصال ، والمزيد
• تسريع الأجهزة التي تعمل باللمس دعم التمرير
• خيارات التنقل المخصصة
• استخدم أي عناصر html في الشرائح
• بنيت للمبتدئين والمحترفين على حد سواء
• مجاني للاستخدام بموجب ترخيص MIT

بواسطة د. رسم التصميم
ملحق jQuery Slideshow بسيط للغاية ، مع ميزات - سهل - صغير - مرن - NEAT

انزلاق معرض الصور jQuery البرنامج المساعد

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

شفافة - jQuery Banner Rotator / Slideshow

بواسطة مارك تيريل
مكون إضافي منزلق صورة jQuery والذي تمت كتابته خصيصًا للعمل مع تخطيطات الويب المرنة / سريعة الاستجابة.

سلايدر عملة

بواسطة إيفان لازاريفيتش
شريط تمرير صورة jQuery بتأثيرات فريدة والميزات الأخرى:

• مجاني للاستخدام بموجب ترخيص MIT
• متوافق مع Android و iPhone
• تأثيرات الانتقال الفريدة
• ترميز صالح
• التكوين المرن
• الانزلاق التلقائي
• مربع التنقل
• خفيف الوزن (8 كيلوبايت فقط)
• ربط الصور
• قابل للتخصيص بالكامل باستخدام CSS

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

بواسطة جاك مور
ملحق Lightbox خفيف الوزن وقابل للتخصيص لـ jQuery 1.3+

بواسطة aeroalquimia
Slider Evolution هو مكون إضافي لـ JQuery يتيح لك بسهولة إنشاء منزلقات جافا سكريبت قوية بتأثيرات انتقال لطيفة للغاية. عزز موقع الويب الخاص بك عن طريق إضافة شريط تمرير فريد وجذاب!