معرض جيسريا المحفظة. معرض محفظة ISSID.

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

photobox.

مجانا، سهلة، معرض الصور التكيفيحيث يتم إجراء جميع الآثار، التحولات بواسطة CSS3. مثالية لإنشاء موقع مصور - Troyolio.

S المعرض.

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

Diamonds.js.

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

superbox.

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

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

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

معرض جاما.

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

صورة مصغرة مع توسيع معاينة

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

jgallery.

jgallery هو ملء الشاشة معرض الصور التكيفيوبعد يتم ضبط الآثار والانتقال وحتى الأسلوب بسهولة.

glisse.js.

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

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

بسيطة، التكيف معرض الصور مع شبكة في نمط pinterest.

galereya.

معرض أنيق آخر مع شبكة في نمط Pinterest مع مرشح حسب الفئة. يعمل في المتصفحات: Chrome، Safari، Firefox، Opera، IE7 +، Browser Android، Chrome Mobile، Firefox Mobile.

الأقل.js.

ممتاز معرض الصور المجاني باستخدام jQuery و 5 و CSS3. لديها مظهر جذاب للغاية، مما لا شك فيه، سيجذب انتباه زوارك.

fliphlightbox.

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

معرض بليميميم.

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

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

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

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

قم بتشغيل البرنامج المساعد MIXITUP للعمل، أدخل هذا الرمز بعد الملفات المذكورة أعلاه:

< script type= "text/javascript" > $ (INITE: وظيفة () ($ # الأفنوليم). mixitup (targetselector: ".portolio"، filteredlector: ".filter"، التأثيرات: [تتلاشى]، تخفيف: "المفاجئة"، / / استدعاء تأثير التحوم onmixend: filterlist . hovereffect ())؛)، hovereffect: وظيفة () ($ (# Portmolist .Portolio "). تحوم (وظيفة ($ ($ (هذا). ابحث عن (". تسمية "). تحريك (( أسفل: 0)، 200، "EaseOutquad")؛ $ (هذا). ابحث عن ("img"). توقف (). تحريك ((أعلى: - 30)، 500، "EaseOutquad")؛)، وظيفة () () () $ (هذا). ابحث عن (". تسمية"). توقف (). تحريك ((أسفل: - 40)، 200، "easyinquad")؛ $ (هذا). ابحث عن ("img"). توقف (). تحريك (). ((أعلى: 0)، 300، "EASEOUTQUAD")؛)؛)؛)؛ تصفية القائمة. init ()؛)؛

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

لتشكيل تخطيط من الصفحة ومظهر العناصر، قم بتوصيل بضع ملفات للمستند. . واحد للأنماط الأساسية، دعونا نسميها على سبيل المثال: Layout.css وملف CSS صغير آخر تطبيع.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" > تصميم الويب

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

في جزء التنقل، ضع قائمة العمل بأكملها، مقسمة إلى فئات. نحتاج إلى كل فئة الحافظة من خلال سمة Cat-Cat للربط مع نقطة واحدة أو نقطة أخرى من جزء التنقل وفقا للقيمة في سمة Filter Data-Filter. من خلال مقارنة قيم مرشح البيانات مع 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" > تلبية الاستضافة. رواية < span class = "text-category" > شعار < div class = "label-bg" > .........

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

CSS.

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

.container (الموقف: قريب؛ العرض: 960 بكسل؛ الهامش: 0 السيارات؛ / * يمكنك رؤية الدائرة الانتقالية عندما يتم تغيير حجم نافذة المتصفح * / -Webkit الانتقال: كل سهولة 1S؛ -Moz-الانتقال: كل سهولة 1S؛ - الانتقال: كل 1S سهولة؛ الانتقال: كل سهولة ) #filters (الهامش: 1٪؛ الحشو: 0؛ نمط القائمة: لا شيء؛) #filters li (تعويم: اليسار؛) #filters li span (العرض: الحشو: 5px 20px؛ Text-decoration: # اللون؛ اللون: # 666 / * أضف الظل قليلا للنص * / نص-الظل: 1PX 1PX #FFFFFF؛ المؤشر: مؤشر؛ في / * تغيير فئة الخلفية عند تحوم * / #filters li span: تحوم (خلفية: # 34B7CD؛ نص الظل: 0 0 2PX # 004B7D؛ اللون: #FFF؛) / * الفئة النشطة * / #filters li span.active (خلفية: RGB (62، 151، 221)؛ نص-الظل: 0 0 2PX # 004B7D؛ اللون: #FFF؛) #portportolist .Portolio (-Webkit-box-sizing: مربع الحدود؛ -MOZ-Box-Sizing-Box-Box-Box-Box-Box؛ -o-box-sizing: مربع الحدود؛ العرض: 23٪؛ الهامش: 1٪؛ عرض: لا شيء؛ تعويم: اليسار؛ الفائض؛ overflow؛ تجاوز: مخفي؛ موقف: قريب! مهم؛ الخلفية: # 666؛ المؤشر: مؤشر؛) .portolio img (الحد الأقصى العرض: 100٪؛ الوضع: قريب؛) / * التوقيعات الافتراضية المخفية * / .portolio .label (الموقف: المطلق؛ العرض: 100٪؛ الارتفاع: 40PX؛ أسفل: -40px؛) .Portolio .label-BG (خلفية: RGB (62، 151، 221)؛ العرض: 100٪؛ الارتفاع: 100 الموقف؛ الموقف: مطلق؛ أعلى: 0؛ اليسار: 0؛) .portolio .label نص (اللون: #FFFF؛ الموقف: النسبي؛ z- الفهرس: 500؛ الحشو: 5px 8px؛) .portolio .text-فئة ( عرض: كتلة؛ حجم الخط: 9PX؛)

حاوية (الموقف: قريب؛ العرض: 960 بكسل؛ الهامش: 0 السيارات؛ / * يمكنك أن ترى الدائرة الانتقالية عند أحجام نافذة المتصفح * / -Webkit الانتقال: جميع 1S سهولة؛ -moz-transition: جميع 1S سهولة؛ - الانتقال: جميع 1s سهولة؛ الانتقال: جميع 1s سهولة؛) #filters (الهامش: 1٪؛ الحشو: 0؛ نمط القائمة: لا شيء؛ الحشو؛ الحشو: 5px 20px؛ تزيين النص: لا شيء؛ اللون: # 666؛ / * إضافة بعض الظل للنص * / نص الظل: 1PX 1PX #FFFFFF؛ المؤشر: مؤشر؛) / * تغيير فئة الفئة تحوم * / # Filters li span: تحوم (الخلفية: # 34B7CD؛ نص الظل: 0 0 2PX # 004B7D؛ اللون: #FFF؛) / * الفئة النشطة * / #Filters Li Span.active (خلفية: RGB (62، 151، 221)؛ نص الظل: 0 0 2PX # 004b7d؛ اللون: #FFF؛) #portolist Sizingbox Sizing: صندوق الحدود؛ العرض: 23٪؛ الهامش: 1٪؛ عرض: لا شيء؛ تعويم: اليسار؛ تجاوز؛ مخفي؛) .PO Rtfolio-Wrapper (تجاوز: مخفي؛ الموقف: قريب! مهم؛ الخلفية # 666؛ المؤشر: مؤشر؛ ) .portolio img (ماكس العرض: 100٪؛ الموقف: قريب؛) / * افتراضيا، يتم إخفاء التوقيعات * / .portolio .label (الموقف: المطلق؛ العرض: 100٪؛ الارتفاع: 40px؛ أسفل: -40px ؛). محفظة .LABEL-BG (خلفية: RGB (62، 151، 221)؛ العرض: 100٪؛ الارتفاع: 100٪؛ الموقف: المطلق؛ أعلى: 0؛ اليسار: 0؛) .portolio .label النص ( اللون: # FFF؛ الموقف: قريب؛ z- الفهرس: 500؛ الحشو: 5px 8px؛) .portolio .text-فئة (عرض: كتلة؛ الخط الحجم: 9 بكسل؛)

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

/ * اللوحي * / @ media الشاشة فقط و (Min-width: 768px) و (أقصى عرض: 959px) (.container (العرض: 768px؛) / * المحمول - ملاحظة: تصميم العرض 320px * / @ Media فقط الشاشة و (أقصى عرض: 767PX) (.container (العرض: 95٪؛) #portiolist .Portolio (العرض: 48٪؛ الهامش: 1٪؛)) / * المحمول - ملاحظة: تصميم للعرض 480PX * / @ media الشاشة فقط و (الحد الأدنى العرض: 480 بكسل) و (أقصى عرض: 767px) (.container (العرض: 70٪؛))

/ * اللوحي * / @ media الشاشة فقط و (Min-width: 768px) و (أقصى عرض: 959px) (.container (العرض: 768px؛)) / * المحمول - ملاحظة: تصميم ل 320px * / @ media العرض فقط الشاشة و (الحد الأقصى العرض: 767PX) (.container (العرض: 95٪؛) #portfolist .portolio (العرض: 48٪؛ الهامش: 1٪؛) / * المحمول - ملاحظة: تصميم لمدة 480 بكسل * / @ media تصميم فقط الشاشة و (الحد الأدنى العرض: 480 بكسل) و (أقصى عرض: 767px) (.container (العرض: 70٪؛))

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

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

حظا سعيدا للجميع ومع فوائد الجسم، وقضاء بقايا الصيف القصير!

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

لغة البرمجة.

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

أولا، دعونا نلقي نظرة على صفحة نشر HTML الأساسية:

فهرس.لغة البرمجة

في قسم الرأس، لدينا أنماط المكونات - الجدول الزمني والمسكونات الزمنية والأساليب .CSS، والتي سوف تحتوي على حلول التصميم لدينا. في نهاية الصفحة، نقوم بتوصيل مكتبة مسج، ومكونات جدول زمني وبرامج نصية .js، والتي ستقوم بتهيئة عمل البرنامج المساعد.

عندما نسمي البرنامج المساعد، يجد كتلة DIV مع المعرف \u003d الجدول الزمني. داخل الكتلة يتصاعد علامات HTML، وبعد ذلك تصبح الصفحة التالية: