گالری در jquery برای نمونه کارها. مجموعه ای از لغزنده های تطبیقی Flexisel: Plugin Slider JQuery Responsive - Carousel

از آنجایی که معمولاً بهترین گالری ها در جی کوئری ایجاد می شوند، ما عمدتاً روی لغزنده های نوع jQuery تمرکز کرده ایم، اما چند گالری ساده CSS نیز وجود دارد.

این مجموعه در پنج دسته اصلی سازماندهی شده است تا بتوانید به راحتی به بخش دلخواه خود بروید. قبل از شروع، می‌خواستیم به شما بگوییم که این به شما بستگی دارد که به دنبال راه‌حل رایگان یا ممتاز باشید.

ما چندین راه حل تصویر با کیفیت رایگان پیدا کردیم که از آنها لذت خواهید برد. البته، با منابع ممتاز - گالری‌هایی وجود داشت که به سادگی ما را غافلگیر کردند.

کافی است مجموعه را مرور کنید و بهترین راه حل تصویر را برای نیازهای خود بیابید. اگر این یک پروژه شخصی است، مطمئناً نمی خواهید پولی خرج کنید. اما از طرف دیگر، اگر این یک شغل آزاد است، شاید ارزش آن را داشته باشد که کمی پول خرج کنید تا واقعاً روی مشتری شما تأثیر بگذارد و همزمان در زمان زیادی صرفه جویی کنید!

حدس می‌زنم آنچه من پیشنهاد می‌کنم این است که همیشه به مدت زمان لازم برای اصلاح، نصب یا راه‌اندازی یک راه‌حل رایگان نگاه کنید. اگر آنقدر ماهر نیستید یا وقت گیر است - حتماً به دنبال کدهای از پیش ساخته شده و ابزارهای ارزان اما با کیفیتی مانند این باشید.

در زیر بهترین اسلایدشوهای جی کوئری را خواهید دید. معمولاً از نمایش اسلایدها در بالای وب سایت استفاده می شود تا مهمترین بخش ها را به شیک ترین شکل ارائه دهند.

Sequence یک نوار لغزنده جاوا اسکریپت بر اساس چارچوب CSS است.

گالری تصاویر نمایش اسلاید 2

Slideshow 2 یک کلاس جاوا اسکریپت برای Mootools 1.2 برای استریم و متحرک سازی ارائه تصاویر در وب سایت شما است. لطفا از وب سایت آنها برای لیست کامل ویژگی ها دیدن کنید.

راه حل بسیار ساده اسلایدر تصویر.

این نمایش اسلاید پویا جاوا اسکریپت یک اسکریپت گالری تصاویر / نمایش اسلاید سبک وزن (5 کیلوبایت) و رایگان است.

شما به راحتی می توانید آن را برای نمایش خودکار تصاویر، تنظیم سرعت اسکرول، تیرگی تصویر کوچک یا غیرفعال کردن نوار لغزنده تنظیم کنید. من می خواستم آن را در این مجموعه قرار دهم زیرا بسیار سبک است. برای دانلود این نمایش اسلاید و مشاهده پیش نمایش زنده اینجا را کلیک کنید.

در این بخش گالری تصاویر را خواهید دید. آنها برای نمونه کارها مناسب هستند، اما می توانند در وبلاگ ها نیز استفاده شوند. پس بیایید حفاری کنیم.

این بخش به بهترین و زیباترین اسلایدرها، غرفه ممتاز و رایگان اختصاص دارد. آنها کار مشابه نمایش اسلاید را انجام می دهند، اما می توانند بر دارندگان محتوا تأکید کنند.

پلاگین لغزنده jQuery پاسخگو LayerSlider.

اسلایدر اصلی – لغزنده کش رفتن لمسی جی کوئری

آکاردئون اسلایدر – بهترین لغزنده آکاردئون جی کوئری در بازار.

این یک راه ساده برای نشان دادن تصاویر یا تصاویر شما است، اما به اندازه کافی قدرتمند است که شما را از بین ببرد. استفاده از آن رایگان است. آن را بررسی کنید.

نوار لغزنده تصویر بلوبری جی کوئری

اسلایدر تصویر Blueberry یک پلاگین جی کوئری است که به طور خاص برای طراحی وب سایت واکنش گرا توسعه یافته است. نوار لغزنده تصویر بلوبری یک پروژه منبع باز است که بر اساس یک سیستم شبکه ای 1140 پیکسلی از cssgrid.net است. این ساده و در عین حال یک گزینه رایگان عالی است.

مطمئنم شما هم مثل من دوستش خواهید داشت. گزینه پیش نمایش و دانلود زنده را بررسی کنید.

لغزنده Rhinoslider- انعطاف پذیرترین نوار لغزنده

اسلاید نمایش اسلاید جی کوئری

این پلاگین jQuery برای بالاترین وب سایت، برای ارائه کار شما یا گفتن بیشتر در مورد شما عالی است.

Slideme مستندات کامل و آموزش نحوه تنظیم نوار لغزنده خود را برای هر نوع دستگاه جداگانه دارد. طراحی به طور کامل با انیمیشن های CSS3 پاسخگو است. راه اندازی آن آسان است و یک API عمومی ارائه می دهد.

استفاده از اسلاید رایگان است و قطعا ارزش دیدن دارد. نسخه ی نمایشی را اینجا ببینید.

نوار لغزنده Pgw یک نوار لغزنده جی کوئری است که برای نمایش تصاویر شما طراحی شده است. این نوار لغزنده به طور کامل واکنش گرا است. سبک وزن است و با تمام مرورگرها سازگار است. نوار لغزنده Pgw همچنین سئو دوستانه است.

این نوار لغزنده برای وب سایت های خبری یا وبلاگ نویسی بسیار مناسب است زیرا می تواند آخرین پست یا مقالات شما را نشان دهد.

Lens Slider jQuery و افزونه وردپرس

Lens Slider یک پروژه منبع باز است و بنابراین، کاملاً قابل تنظیم است. اسلایدر از نشانه گذاری HTML بسیار ساده یک لیست نامرتب استفاده می کند. تصاویر همانطور که در اسکرین شات می بینید نشان داده می شوند. هیچ گزینه دیگری در دسترس نیست. Lens Slider همچنین به عنوان یک افزونه وردپرس و رایگان برای استفاده در دسترس است.

مناسب ترین استفاده برای محصولات، خدمات یا ارائه تیم است.

اینجا را بررسی کن.

پلاگین Gridder jQuery و Ajax

Gridder یک نوار لغزنده عالی برای نمایش کار شما است. Gridder به نوعی جستجوی تصویر گوگل را تقلید می کند. برای مشاهده تصویر بزرگتر، روی یک تصویر کوچک کلیک کرده و بزرگ می شود. این یک راه عالی برای نمایش همزمان تعداد زیادی عکس است.

Gridder به‌عنوان پیش‌نمایش تصویر کوچک jQuery یا Ajax در دسترس است. این یک راه حل رایگان عالی برای پروژه نمونه کار بعدی شما است.

برای پیش نمایش زنده jQuery اینجا را بررسی کنید. اگر آژاکس می خواهید اینجا را کلیک کنید.

باراک JS- نمایش اسلاید جاوا اسکریپت

نمایش اسلاید باراک یک نمایش اسلاید ظریف و سبک وزن است که با جاوا اسکریپت نوشته شده است. این نمایش اسلاید می تواند با لیست های عمودی، افقی و نامنظم کار کند. تصاویر با MooTool Assets از قبل بارگذاری شده اند. برای تمیز نگه داشتن کد خود، باید کد CSS را بررسی کنید. این بدان معناست که در صورت نیاز برخی از قطعات را تغییر دهید.

نمایش اسلاید باراک می تواند به عنوان ویترین نمونه کارها، لیست محصولات یا حتی برای فهرست کردن مشتریان شما استفاده شود.

در اینجا می توانید یک نسخه آزمایشی پیدا کنید و گزینه های مختلف را آزمایش کنید.

JQ Zoom Evolution

JQZoom یک ذره بین تصویر جاوا اسکریپت است که بر روی فریم ورک محبوب جاوا اسکریپت جی کوئری ساخته شده است. jQZoom یک اسکریپت عالی و واقعاً آسان برای بزرگنمایی بخشی از تصویر شما است.

این ذره بین برای فروشگاه های آنلاین و منوی رستوران ها مناسب ترین است.

اسناد و دمو را اینجا بیابید.

نوار لغزنده Multimedia Portfolio 2-jQuery

Multimedia Portfolio 2 یک پلاگین جی کوئری است که می تواند به طور خودکار پسوند هر فایل رسانه ای را شناسایی کرده و پخش کننده مناسب را اعمال کند. از تصاویر و فیلم ها پشتیبانی می کند. Portfolio چند رسانه ای از نشانه گذاری ساده HTML استفاده می کند و استفاده از آن آسان است.

این نوار لغزنده برای نمایش محصولات، خدمات و حتی اخبار مناسب است.

تور مجازی جی کوئری

jQuery Virtual Tour توسعه ای از نمایشگر پانوراما ساده است. این تور مجازی جی کوئری به شما امکان می دهد برخی از نماهای پانوراما را به یک تور مجازی تبدیل کنید! این یک افزونه عالی است که ارزش دیدن را دارد.

نوار لغزنده Vertical News – افزونه jQuery

نوار لغزنده jQuery Vertical News برای وب سایت هایی که می خواهند برخی اخبار یا کمپین های بازاریابی را در سایت خود نشان دهند بسیار مفید است. واکنش گرا است و از انیمیشن های CSS3 استفاده می کند. نوار لغزنده Vertical News همچنین به شما امکان می دهد سبک اسلایدر را به طور کامل سفارشی کنید.

ما به آخرین بخش خود رسیده ایم، جایی که بهترین گالری های مبتنی بر CSS خالص را خواهید یافت. ممکن است آنقدر محبوب نباشند اما مطمئنا ارزش امتحان کردن را دارند. خودتون ببینیدش

گالری تصاویر HoverBox

HoverBox Image Gallery اساساً یک گالری عکس بسیار سبک (8 کیلوبایت) است که از چیزی جز CSS استفاده نمی کند. برای بارگیری سریع‌تر، فقط از یک تصویر برای پیش‌نمایش تصویر کوچک و رول کردن استفاده می‌کند. همه مرورگرهای اصلی پشتیبانی می شوند. گالری تصاویر HoverBox برای پروژه های خود رایگان است.

بهتر است از آن به عنوان یک نمایشگاه عکاسی برای عکاسان، هر نوع نمونه کار و منوی رستوران استفاده شود.

گالری تصاویر خالص CSS3

این یک گالری تصویر ساده CSS3 است که با کلیک بر روی تصویر، جلوه یک پنجره پاپ آپ را ایجاد می کند. برای نمایش نمونه کارها در وب سایت ها مناسب است. اگر علاقه مند هستید، می توانید آموزش را نیز دنبال کنید تا خودتان آن را بسازید.

پیش نمایش زنده را بررسی کنید.

گالری تصاویر لایت باکس CSS-CSS خالص

این گالری تصاویر یکی دیگر از گالری های CSS خالص است. هنگامی که روی تصاویر کلیک می شود، روی آنها بزرگنمایی می کند. شما می توانید کد منبع را دانلود کنید، یا اگر دوست دارید، از طریق آموزش بروید.

گالری تصاویر لایت باکس CSS باید در یک وب سایت غیرقابل پیمایش استفاده شود. با این حال، می‌توان آن را با یک خط جاوا اسکریپت که در انتهای آموزش گنجانده شده است، لغو کرد. مناسب ترین استفاده، ویترین نمونه کارها است.

Slidea – یک پلاگین لغزنده پاسخگو هوشمندتر

و در اینجا یک جواهر از این مجموعه، Slidea است. Slidea یک نوار لغزنده محتوای چند منظوره است. این افزونه اسلایدر بر روی چارچوب انیمیشن jQuery، VelocityJS و Animus ساخته شده است. با Slidea هیچ محدودیتی برای انیمیشن وجود ندارد - شما می توانید با آن بسیار عالی باشید!

می توانم سعی کنم توضیح دهم که چقدر جالب است، اما فقط نسخه ی نمایشی زیر را بررسی کنید و متوجه خواهید شد که چرا من آن را خیلی دوست دارم!

باید بگویم از تحقیق در مورد این افزونه ها بسیار لذت بردم. ما لغزنده های شگفت انگیزی پیدا کردیم که امیدواریم به شما کمک کند روی پروژه بعدی خود کارآمدتر کار کنید. اینجا برای هر موقعیتی چیزی وجود دارد.

اسلایدرها و اسلایدشوهای شگفت انگیز زیادی وجود دارد که تصمیم گیری برای تعیین دقیق آن دشوار است. اما به نظر من حتما باید نوار لغزنده Gridder را بررسی کنید، زیرا واقعاً شگفت‌انگیز است که چه کاری می‌تواند انجام دهد، به خصوص به صورت رایگان، بنابراین یک موقعیت برد-برد است.

و قطعا نباید Slidea را فراموش کنید. بله، این یک نوار لغزنده ممتاز است، اما آنقدر ارزش دارد که ارزش سرمایه گذاری را دارد!

اگر از مقاله ما لذت بردید، نظر دهید، آن را با دوستان خود به اشتراک بگذارید و به ما بگویید که آیا اسلایدر مورد علاقه شما را از دست داده ایم.

پلاگین گالری مورد علاقه شما کدام است؟ ما دوست داریم تجربیات شما را بشنویم!

در خبرنامه محبوب ما مشترک شوید و آخرین اخبار و منابع طراحی وب را مستقیماً در صندوق ورودی خود دریافت کنید.

به درستی تشکیل شده و به صورت بصری طراحی شده است، در مورد ما، این یک صفحه جداگانه است، یک عنصر مهم از وب سایت یا وبلاگ شخصی هر متخصصی است که به سطح خاصی از مهارت در فعالیت حرفه ای خود دست یافته است.
صفحه نمونه کارها نوعی گزارش یا خلاصه تصویری است که با کمک آن می توانید مجموعه ای از موفق ترین کارهای تکمیل شده را به وضوح به خوانندگان و بازدیدکنندگان وب سایت/وبلاگ خود نشان دهید، اعم از عکس، مقاله، انتشارات، عناصر طراحی. ، و غیره.
من چنین صفحه‌ای ندارم و از طرف خودم، این یک حذف آزاردهنده است که باید در اسرع وقت اصلاح شود، چیزی که در حال حاضر روی آن کار می‌کنم.
در گستره وسیع شبکه جهانی، می توانید تعداد زیادی قالب صفحه آماده برای سازماندهی نمونه کارها پیدا کنید و تنوع چنین صفحاتی واقعاً چشمگیر است. بنابراین، کسانی که اهمیتی نمی‌دهند که در تمام پیچیدگی‌های طراحی و توسعه وب جستجو کنند، همیشه می‌توانند گزینه مناسبی برای خود پیدا کنند. خوب، برای کسانی که در ساخت وب سایت دانش کافی ندارند، پیشنهاد می کنم به نمونه ای از چیدمان تطبیقی ​​نگاه کنند، یک صفحه نمونه کار ساده، با فیلتر کردن آثار تکمیل شده بر اساس دسته، ساخته شده در، رقیق شده با جلوه گذار جذاب، با عناصر انیمیشن.

طرح بندی صفحه، جاوا اسکریپت قابل اجرا و برخی از عناصر طراحی توسط طراح و توسعه دهنده وب فوق العاده کوین لیو (queness.com) ایجاد شده است. هنگام انتخاب راه حل بهینه، برای من مهم بود که پیاده سازی آن آسان باشد، عملکرد افزونه jQuery، عملکرد صحیح در همه مرورگرهای مدرن، و با توجه به محبوبیت روزافزون استفاده از دستگاه های مختلف تلفن همراه برای گشت و گذار در اینترنت، سازگاری طراحی صفحه آینده بدون زنگ و سوت فانتزی، طراح یا پلاگین سنگین.

طرح‌بندی اصلی شامل دو عنصر رابط کاربری اصلی است که باید بسازیم، پیمایش برگه‌ها برای فیلتر کردن دسته‌های کار ارسال‌شده، و خود شبکه تصویر کوچک با یک افکت شناور برای بیرون آمدن عنوان.
برای شروع، برای اینکه همه چیز در نهایت کار کند، به jQuery نسخه 1.7.0 یا بالاتر نیاز دارید. اگر هنوز آن را متصل نکرده اید، خط زیر را قبل از برچسب اضافه کنید:

پلاگین MixItUp را راه اندازی کنید، این کد را بعد از فایل های بالا وارد کنید:

$(function () ( var filterList = ( init: function () ($("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter"، effect: ["fade"], easing : "snap"، // فراخوانی اثر شناور در MixEnd: filterList.hoverEffect() )); ), hoverEffect: تابع () ($("#portfoliolist .portfolio").hover(function () ($(this). find(".label").stop().animate((پایین: 0)، 200، "easeOutQuad"); $(this).find("img").stop().animate((بالا: -30) ( this).find("img").stop().animate((top: 0), 300, "easeOutQuad"); )); ) )؛ filterList.init(); ));

در نظر گرفتن همه گزینه های افزونه به صورت جداگانه فایده ای ندارد؛ گزینه پیش فرض کاملاً بهینه است. خوب، اگر کسی می‌خواهد با پارامترها آزمایش کند، لطفاً هر کاری که در توان دارید انجام دهید.

برای تشکیل صفحه‌آرایی و ظاهر عناصر، چند فایل را به سند متصل کنید. ، یکی برای سبک های پایه، اجازه دهید آن را به عنوان مثال بنامیم: layout.css و یک فایل CSS کوچک normalize.css، برای اطمینان از سازگاری بهتر مرورگر در طراحی استاندارد عناصر:

اکنون ما همه چیز را به ترتیب، در صورت امکان بدون آب غیر ضروری، به روشی قابل دسترس و قابل درک، به زبان مادری و رنج کشیده خود تجزیه و تحلیل خواهیم کرد.

• همه
• برنامه های کاربردی
• کارت بازرگانی
• نمادها
• لوگو
• طراحی وب سایت

در پانل پیمایش، کل لیست آثار را به دسته بندی تقسیم می کنیم. ما باید هر دسته پورتفولیو را از طریق ویژگی data-cat با یک یا آن مورد نوار ناوبری مطابق با مقدار مشخصه data-filter مرتبط کنیم. با تطبیق مقادیر data-filter با data-cat، اقلام نمونه کارها بر اساس دسته بندی فیلتر می شوند.
علاوه بر این، فعلاً به تصویر بندانگشتی پنهان، پانل کوچکی با نام اثر و عنوان دسته اضافه می‌کنیم که تنها زمانی که ماوس را روی عکس نگه دارید، ظاهر می‌شود. و برای ساده تر کردن شکل ظاهری کل این ساختار در CSS، اجازه دهید کلاس های مربوطه را به عناصر اختصاص دهیم:

میزبانی Beget.Ruلوگو.........

لطفاً توجه داشته باشید که می توانید پیوندهایی به تصویر یا مستقیماً به امضا اضافه کنید تا کاربر بتواند تمام کارهای شما را به طور کامل ببیند.

اکنون بی سر و صدا به سراغ جالب ترین قسمت می رویم، به شکل گیری سبک های کلی رابط کاربری صفحه نمونه کارها و نسخه تطبیقی ​​آن در CSS. در مقاله من فقط مقادیر اصلی (پیش‌فرض) را نشان می‌دهم، یعنی بدون هیچ تصویر پس‌زمینه و فونت‌های متصل؛ همه اینها، برای کسانی که به آن نیاز دارند، می‌توانند در نسخه نمایشی دیده شوند یا در آرشیو با کد منبع پیدا شوند. .

کانتینر ( موقعیت: نسبی؛ عرض: 960 پیکسل؛ حاشیه: 0 خودکار؛ /* می‌توانید زنجیره انتقال‌ها را هنگام تغییر اندازه پنجره مرورگر مشاهده کنید */ -webkit-transition: all 1s ease؛ -moz-transition: all 1s ease; -o- transition: all 1s ease; transition: all 1s ease; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span (نمایش: بلوک؛ بالشتک: 5 پیکسل 20 پیکسل؛ تزئین متن: هیچ؛ رنگ: # 666؛ /* سایه کمی برای متن اضافه کنید */ سایه متن: 1 پیکسل 1 پیکسل #FFFFFF؛ مکان نما: اشاره گر؛ ) /* تغییر پس‌زمینه دسته در شناور */ #filters li span:hover ( پس‌زمینه: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* پس‌زمینه مورد دسته فعال */ #filters li span.active ( پس زمینه: rgb(62, 151, 221)؛ text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing : border-box؛ -o-box- اندازه: حاشیه-جعبه؛ عرض:23%؛ حاشیه:1%؛ نمایش:هیچکدام؛ شناور:سمت چپ؛ سرریز:پنهان؛ .portfolio-wrapper (سرریز:مخفی; موقعیت: نسبی !مهم; پس زمینه: #666; مکان نما: اشاره گر; ) .portfolio img ( حداکثر عرض: 100٪؛ موقعیت: نسبی؛ ) /* امضاها به طور پیش فرض پنهان هستند */ .portfolio .label ( موقعیت: مطلق؛ عرض: 100٪؛ ارتفاع: 40 پیکسل؛ پایین: -40 پیکسل؛ ) . نمونه کارها .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 برای مرورگرهای معمولی تنظیم شده بود لغو کنیم و به آن سازگاری بسیار مطلوب دست یابیم.

/* تبلت */ صفحه فقط رسانه @ و (حداکثر عرض: 768 پیکسل) و (حداکثر عرض: 959 پیکسل) ( کانتینر ( عرض: 768 پیکسل؛ ) ) /* موبایل - توجه: طراحی برای عرض 320 پیکسل*/ فقط @media صفحه نمایش و (حداکثر عرض: 767 پیکسل) ( .container ( عرض: 95%؛ ) #portfoliolist .portfolio ( عرض:48%؛ حاشیه:1%؛ ) ) /* موبایل - توجه: طراحی برای عرض 480 پیکسل */ @media فقط صفحه و (حداکثر عرض: 480 پیکسل) و (حداکثر عرض: 767 پیکسل) ( کانتینر (عرض: 70٪؛ ))

همین. صفحه فوق‌العاده ما تحت عنوان بزرگ «پورتفولیو» آماده است، تنها چیزی که باقی می‌ماند این است که آن را با آثار به همان اندازه شگفت‌انگیز و برجسته خود پر کنید و آن را در معرض دید همه جهان قرار دهید. هنوز هم می توانید بی سر و صدا، متواضعانه، به خودتان افتخار کنید. نکته اصلی این است که در این مورد زیاده روی نکنید.
دوباره به مثال نگاه کنید و در صورت لزوم کد منبع را بردارید؛ در اوقات فراغت خود، در یک محیط خانه آرام، می توانید این کار را به کمال برسانید.

هنگام ایجاد درس از مطالب زیر استفاده شد: . صفحه اصلی، بکر، تازه از قلم نویسنده، نمونه کارها در آنجا قرار دارد.

برای همه موفق باشید و از بقیه تابستان کوتاه لذت ببرید!

در حال حاضر، یک نوار لغزنده - چرخ فلک - عملکردی است که به سادگی در یک وب سایت تجاری، وب سایت نمونه کارها یا هر منبع دیگری وجود دارد. همراه با لغزنده های تصویر تمام صفحه، لغزنده های چرخ فلک افقی به خوبی در هر طراحی وب جای می گیرند.

گاهی اوقات اسلایدر باید یک سوم صفحه سایت را اشغال کند. در اینجا از نوار لغزنده چرخ و فلک با جلوه های انتقال و طرح بندی های پاسخگو استفاده می شود. سایت های تجارت الکترونیک از یک نوار لغزنده چرخ و فلک برای نمایش چندین عکس در پست ها یا صفحات جداگانه استفاده می کنند. کد لغزنده را می توان آزادانه استفاده کرد و با توجه به نیاز شما تغییر داد.

با استفاده از JQuery در ارتباط با HTML5 و CSS3، می‌توانید صفحات خود را جذاب‌تر کنید، جلوه‌های منحصربه‌فردی برای آن‌ها فراهم کنید و توجه بازدیدکنندگان را به منطقه خاصی از سایت جلب کنید.

Slick یک افزونه جی کوئری رایگان در دسترس است که توسعه دهندگان آن ادعا می کنند که راه حل آنها تمام نیازهای اسلایدر شما را برآورده می کند. نوار لغزنده تطبیقی ​​- چرخ فلک می تواند در حالت "کاشی" برای دستگاه های تلفن همراه و در حالت "کشیدن و رها کردن" برای نسخه دسکتاپ کار کند.

شامل یک جلوه انتقال "محو"، یک ویژگی جالب "حالت مرکزی"، بارگیری تنبل تصاویر با پیمایش خودکار است. عملکرد به روز شده شامل افزودن اسلاید و فیلتر اسلاید است. همه برای اطمینان از پیکربندی افزونه بر اساس نیازهای خود.

حالت نمایشی | دانلود

این افزونه دارای مجموعه وسیعی از توابع است که هم برای مبتدیان و هم برای توسعه دهندگان با تجربه مناسب است. این یک نسخه به روز شده از نوار لغزنده چرخ فلک است. سلف او نیز همین نام را داشت.

این نوار لغزنده دارای چند پلاگین داخلی برای بهبود عملکرد کلی است. انیمیشن، پخش ویدیو، پخش خودکار نوار لغزنده، بارگذاری تنبل، تنظیم ارتفاع خودکار – اینها ویژگی های اصلی Owl Carousel 2.0 هستند.

پشتیبانی از کشیدن و رها کردن برای استفاده راحت تر از افزونه در دستگاه های تلفن همراه گنجانده شده است.
این افزونه برای نمایش تصاویر بزرگ حتی بر روی صفحه نمایش های کوچک دستگاه های تلفن همراه عالی است.

مثال ها | دانلود

یک پلاگین جی کوئری نسبتاً کوچک، اما از نظر عملکردی غنی که به شما امکان می دهد یک نوار لغزنده را در یک صفحه قرار دهید - یک چرخ فلک، که هسته کوچکی دارد و منابع سایت زیادی را مصرف نمی کند. از این افزونه می توان برای نمایش اسلایدرهای عمودی و افقی، همراه با انیمیشن و ایجاد مجموعه ای از تصاویر از گالری استفاده کرد.

مثال ها | دانلود

لغزنده jQuery فوق العاده فشرده - چرخ فلک که عملکرد آن بسیار بیشتر از یک نوار لغزنده معمولی است. اینها شامل پیش‌نمایش تک تصویر، نمایش چرخ فلک چندتایی تصویر، و نمایش کشویی مبتنی بر عنوان است.

مثال ها | دانلود

چرخ فلک جغد یک نوار لغزنده است که از صفحه نمایش لمسی و فناوری کشیدن و رها کردن پشتیبانی می کند و به راحتی در کد HTML ادغام می شود. این افزونه یکی از بهترین اسلایدرهایی است که به شما امکان می دهد چرخ فلک های زیبایی را بدون هیچ نشانه گذاری مخصوص تهیه کنید.

مثال ها | دانلود

از انتقال های سه بعدی بر اساس سبک های CSS و کمی کد جاوا اسکریپت استفاده می کند.

مثال ها | دانلود

چرخ فلک سه بعدی باشکوه. به نظر می رسد این هنوز یک نسخه بتا است، زیرا من همین الان چند مشکل را با آن کشف کردم. اگر علاقه مند به تست و ایجاد اسلایدرهای خود هستید، این چرخ فلک کمک بزرگی خواهد بود.

مثال ها | دانلود

نوار لغزنده پاسخگو - چرخ فلک با استفاده از فناوری بوت استرپ فقط برای وب سایت جدید شما.

مثال ها | دانلود

محبوب ترین در وب سایت های نمونه کارها و کسب و کار. این نوع لغزنده - چرخ فلک - اغلب در هر نوع سایتی یافت می شود.

مثال ها | دانلود

این نوار لغزنده با اندازه کوچک آماده کار بر روی دستگاه‌هایی با وضوح صفحه نمایش است. لغزنده می تواند در دو حالت دایره ای و چرخ فلکی کار کند. دایره کوچک به عنوان جایگزینی برای سایر لغزنده های این نوع ارائه شده است. پشتیبانی داخلی برای سیستم عامل های IOS و Android وجود دارد.

در حالت دایره ای، نوار لغزنده بسیار جالب به نظر می رسد. پشتیبانی عالی از روش کشیدن و رها کردن و سیستم اسلاید اسکرول خودکار.

مثال ها | دانلود

یک نوار لغزنده قدرتمند، سازگار و چرخ فلک برای یک وب سایت مدرن مناسب است. در هر دستگاهی به درستی کار می کند. دارای حالت افقی و عمودی اندازه آن به تنها 1 کیلوبایت به حداقل رسیده است. پلاگین فوق فشرده همچنین دارای انتقال صاف عالی است.

مثال ها | دانلود

حاوی بیش از 50 افکت است که می تواند به شما کمک کند یک اسلایدر اصلی برای وب سایت خود ایجاد کنید.

مثال ها | دانلود

اندازه پنجره مرورگر خود را تغییر دهید تا ببینید که چگونه نوار لغزنده سازگار می شود. Bxslider دارای بیش از 50 گزینه سفارشی سازی است و ویژگی های خود را با جلوه های انتقال مختلف به نمایش می گذارد.

مثال ها | دانلود

jCarousel یک پلاگین جی کوئری است که به سازماندهی مشاهده تصاویر شما کمک می کند. می توانید به راحتی چرخ فلک های تصویری سفارشی را از پایه نشان داده شده در مثال ایجاد کنید. این نوار لغزنده برای کار بر روی پلتفرم های تلفن همراه سازگار و بهینه شده است.

مثال ها | دانلود

Scrollbox یک افزونه فشرده برای ایجاد یک نوار لغزنده - چرخ فلک یا خزیدن متن است. ویژگی‌های کلیدی شامل افکت‌های اسکرول عمودی و افقی با مکث روی ماوس است.

مثال ها | دانلود

یک نوار لغزنده چرخ فلک ساده. اگر به یک پلاگین سریع نیاز دارید، این افزونه 100% مناسب است. تنها با ویژگی های اولیه مورد نیاز برای کار کردن نوار لغزنده همراه است.

مثال ها | دانلود

سازندگان Flexisel از پلاگین مدرسه قدیمی jCarousel الهام گرفتند و یک کپی از آن را با هدف عملکرد صحیح نوار لغزنده در دستگاه های تلفن همراه و تبلت تهیه کردند.

طرح‌بندی واکنش‌گرا Flexisel، هنگام اجرا بر روی دستگاه‌های تلفن همراه، با طرح‌بندی به اندازه پنجره مرورگر متفاوت است. Flexisel کاملاً برای کار بر روی صفحه نمایش با وضوح پایین و بالا سازگار است.

مثال ها | دانلود

Elastislide کاملاً با اندازه صفحه نمایش دستگاه شما سازگار است. شما می توانید حداقل تعداد تصاویر را برای نمایش با وضوح مشخص تنظیم کنید. به خوبی به عنوان یک نوار لغزنده چرخ فلک با گالری تصاویر، با استفاده از یک لفاف ثابت همراه با افکت پیمایش عمودی کار می کند.

مثال | دانلود

نوار لغزنده نرم افزار رایگان از Woothemes. این به درستی یکی از بهترین لغزنده های تطبیقی ​​در نظر گرفته می شود. این افزونه شامل چندین قالب است و هم برای کاربران تازه کار و هم برای متخصصان مفید خواهد بود.

مثال | دانلود

چرخ فلک شگفت انگیز - نوار لغزنده عکس پاسخگو با استفاده از jQuery. از بسیاری از سیستم های مدیریت محتوا مانند وردپرس، دروپال و جوملا پشتیبانی می کند. همچنین از سیستم عامل های اندروید و IOS و دسکتاپ بدون مشکل سازگاری پشتیبانی می کند. قالب‌های چرخ فلک شگفت‌انگیز داخلی به شما امکان می‌دهند از لغزنده در حالت‌های عمودی، افقی و دایره‌ای استفاده کنید.

مثال ها | دانلود

در این آموزش یک نمونه کار زیبا با استفاده از jQuery، CSS3 و افزونه Timeline می نویسیم. Timeline یک پلاگین جی کوئری است که در نمایش زمان بندی رویدادها تخصص دارد. در این نمونه کارها می‌توانید انواع مختلف داده‌های رسانه‌ای را وارد کنید: توییت‌ها، ویدئوها، نقشه‌ها، عکس‌ها، پست‌ها و سپس آنها را بر اساس تاریخ مرتب کنید. اگر روی طراحی کار کنید، نمونه کار زیبایی خواهید داشت که نشان دهنده علایق و کار شماست.

به طور استاندارد، افزونه Timeline دارای یک طرح رنگ روشن است. این در اکثر موارد بسیار راحت و ضروری است. اگرچه، برای نمونه کار ما، طراحی تیره ظریف تر است. بنابراین، ما آن را به روشی که دوست داریم بهینه می کنیم.

ابتدا، بیایید به نشانه گذاری اصلی html صفحه نگاه کنیم:

فهرست مطالب. html

نمونه کارها جدول زمانی | نسخه ی نمایشی Tutorialzine

در بخش head، سبک های افزونه - timeline.css و styles.css را داریم که شامل تصمیمات طراحی ما خواهد بود. در انتهای صفحه کتابخانه jQuery، افزونه timeline و scripts.js را به هم متصل می کنیم که پلاگین را مقداردهی اولیه می کند.

وقتی افزونه را فراخوانی می کنیم، یک بلوک DIV با ID=timeline پیدا می کند. نشانه گذاری HTML در داخل بلوک نصب می شود، پس از آن صفحه به صورت زیر در می آید:

جانی بی گود

طراح و توسعه دهنده

طبیعت در بهترین حالت خود در این ویدیو.

از آنجایی که ما تغییراتی در سبک های CSS ایجاد خواهیم کرد، کد بالا درک بهتری از نحوه عملکرد ساختار نمونه کارها ارائه می دهد. لطفاً توجه داشته باشید که ما سبک های استاندارد پلاگین را تغییر نمی دهیم، ما فقط برخی از ویژگی ها را در فایل css خود بازنویسی می کنیم. این به ما مزیتی در تغییرات طراحی نمونه کارها در آینده می دهد.

در مورد نوشتن CSS به تفصیل بحث خواهیم کرد، اما کمی بعد. تنها چیزی که وجود دارد این است که ما باید تمام دستورالعمل ها را در بالای دستورالعمل های موجود بازنویسی کنیم، اما ما با این موضوع بیشتر برخورد خواهیم کرد.

برای مقداردهی اولیه افزونه، باید متد ()VMM.Timeline را فراخوانی کنیم:

$(function())( var timeline = new VMM.Timeline(); timeline.init("data.json"); ));

متد init یک آرگومان ساده را می گیرد - یک منبع داده. این می تواند یک فایل json، مانند کد بالا، یا یک صفحه گسترده گوگل باشد.

برای یافتن جزئیات بیشتر نحوه عملکرد آنداده ها.json، کد منبع درس را دانلود کنید. در اینجا هیچ چیز پیچیده ای وجود ندارد، نیازی به توضیح ساختار این فایل نیست.

با استفاده از Firebug HTML Inspector، می توانید انتخابگرهایی را برای یک عنصر HTML تعریف کنید که در timeline.css نوشته شده است. سپس با استفاده از همان انتخابگرها می توانید استایل های خود را در فایل styles.css اختصاص دهید. در برخی موارد استفاده کرده ام! مهم است که به سبک های خود اولویت دهید.

تمام تغییراتی که در زیر مشاهده خواهید کرد به صورت دستی با استفاده از سبک های CSS اضافه شدند. بقیه عناصر استایل به طور پیش فرض توسط افزونه نصب می شوند.

اول از همه، پس از استایل بندی کلی صفحه، پس زمینه نمونه کارها را تغییر می دهیم:

#timeline( background:none; ) /* رویدادهای فردی در نوار لغزنده */ .slider .slider-container-mask .slider-container( background:none; ) /* تنظیم یک تصویر پس زمینه سفارشی */ #timeline div.navigation ( پس زمینه: url("../img/timeline_bg.jpg") تکرار؛ border-top:none; )

برای ایجاد یک افکت سه بعدی در بلوک ناوبری، باید از . عنصر :after قسمت بالای تیره است و از یک گرادیان خطی برای ایجاد جلوه بعدی استفاده می کند.

#timeline div.navigation:before( position:absolute; content:""; ارتفاع:40px; عرض:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") تکرار؛ ) #timeline div.navigation:after( position:absolute; content:""؛ ارتفاع:10px؛ عرض:100%؛ چپ:0؛ top:-40px؛ پس‌زمینه:repeat-x؛ پس‌زمینه-تصویر: خطی- گرادیان (پایین، #434446 0%, #363839 100%)؛ تصویر پس‌زمینه: -o-linear-gradient(پایین، #434446 0%, #363839 100%)؛ تصویر پس‌زمینه: -moz-linear-gradient( پایین، #434446 0٪، #363839 100٪؛ تصویر پس‌زمینه: -webkit-linear-gradient (پایین، #434446 0٪، #363839 100%)؛ تصویر پس‌زمینه: -ms-linear-gradient (پایین، #434446 0%, #363839 100%)؛ )

#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !important; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -هایلایت ( پس زمینه - رنگ: شفاف !مهم؛ )

بیایید دکمه‌های بزرگ‌نمایی و کوچک‌نمایی را در نوار ابزار استایل کنیم:

#timeline .toolbar( border:none !important; background-color: #202222 !important; ) #timeline .toolbar div( border:none !important; )

سبک مقیاس پایین:

#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( color: #CCCCCC; )

فلش برای رویداد قبلی و بعدی:

اسلایدر .nav-previous .icon ( پس زمینه: url("timeline.png") بدون تکرار پیمایش 0 -293px شفاف؛ ) .slider .nav-previous,.slider .nav-next( font-family: "Segoe UI" ,sans-serif; ) .slider .nav-next .icon ( پس زمینه: url("timeline.png") بدون تکرار پیمایش 72px -221px شفاف؛ عرض: 70px !important; ) .slider .nav-next:hover . icon( position:relative; right:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover ( رنگ: #666؛ مکان نما: اشاره گر؛ ) #timeline .thumbnail ( حاشیه: متوسط ​​هیچ; )

بارگیری پس زمینه:

#timeline .feedback ( پس‌زمینه-رنگ: #222222؛ box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; border:none; ) #timeline .feedback div( رنگ: #AAAAAA؛ اندازه قلم : 14 پیکسل !مهم؛ وزن قلم: عادی؛ )

#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # timeline .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

در نهایت کاور را عوض می کنیم. من از nth-child(1) فقط برای پیوند دادن به اسلاید اول (جلد جلد) استفاده کردم که حاوی عنوان و توضیحات نمونه کارها است. این داده ها در یک فایل JSON ذخیره می شوند.

/* سفارشی کردن اسلاید اول - جلد */ #timeline .slider-item:nth-child(1) h2(font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0.3؛ فضای سفید: nowrap؛ padding: 10px 5px 5px 20px؛ position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( فونت: معمولی 40px "Dancing Script"،"Segoe UI",sans-serif; پس زمینه:rgba(0,0,0,0.3)؛ فضای سفید: nowrap؛ padding:5px 20px؛ موقعیت:نسبی. راست:-60px؛ z-index:10; ) #timeline .slider-item:nth-child(1) p .c1(color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( سمت چپ: -30px; موقعیت: نسبی; z-index: 1; ) #timeline .slider-item:nth -child(1).credit( text-align: center; )

تنها چیزی که باقی می ماند این است که timeline.psd را که در فایل افزونه ضمیمه شده است باز کنید و رنگ برخی از آیکون ها را تغییر دهید. من تمام فایل های لازم را به سورس های این درس اضافه کرده ام. این کار ایجاد یک نمونه کار jQuery با یک ظاهر طراحی CSS3 را تکمیل می کند!

شما می توانید از این نمونه کارها نه تنها برای نمایش آخرین پروژه های خود، بلکه لحظات جالب و مهم در حرفه خود استفاده کنید. این مثل یک دفتر خاطرات کوچک از زندگی شماست! امیدوارم شما از این آموزش لذت برده باشید. نظرات خود را در نظرات زیر به اشتراک بگذارید.

پلاگین های نمونه کار jQuery شما را قادر می سازد نمونه کارها را به سبکی زیبا نمایش دهید و به شما کمک می کند تا مشتریان خود را تحت تاثیر قرار دهید تا در معرض دید بیشتر و معاملات تجاری قرار بگیرید.

اگر در بخش ارائه خدمات کار می کنید، نمی توانید قدرت یک پورتفولیو را کمتر از حد تخمین بزنید. نمونه کارها نه تنها کار شما را نشان می دهند، بلکه ایده ای از تجربه کاری شما به مشتری شما می دهند که منجر به معاملات و تجارت بیشتر می شود.

در زیر تعدادی از بهترین پلاگین های نمونه کار jQuery را برای نمایش آنلاین آثار هنری خود خواهید یافت. اگر از افزونه دیگری اطلاع دارید، لطفاً به ما اطلاع دهید که مایلیم لیست را به روز کنیم.

Lunar – Photography Portfolio، یک پلاگین jQuery بسیار تمیز و ساده که به شما کمک می کند آلبوم های عکس زیبا بسازید. برخی از نقاط قوت این افزونه عبارتند از: شبکه کاملاً پاسخگو، عملکرد بالا، ظاهر و احساس مدرن، طراحی تمیز و جادار.

Media Boxes Portfolio یک افزونه jQuery grid است که به شما امکان می دهد انواع محتوا را در یک شبکه بسیار قدرتمند نمایش دهید. از آن برای پست های وبلاگ، نمایش رسانه ها، مشتریان، نمونه کارها، سبد خرید، گالری ها و هر چیزی که می توانید تصور کنید استفاده کنید.

ایده Colio – jQuery Portfolio Content Expander Plugin این است که جزئیات مربوط به موارد نمونه کارها را در همان صفحه به شکل یک نمای قابل گسترش که می تواند در بالا، زیر یا داخل شبکه پورتفولیو شما نمایش داده شود، نمایش دهد. Colio شامل تم سیاه و سفید برای شروع سریع است و می تواند به راحتی در نمونه کارها موجود ادغام شود. همچنین با پلاگین های فیلترینگ محبوب مانند ایزوتوپ و شن روان سازگار است و روی تبلت ها و دستگاه های تلفن همراه کار می کند.
نسخه ی نمایشی و دانلود

DZS ZoomFolio افزونه نهایی برای نمایش نمونه کارها خلاقانه شما به مشتریان شما است و این تمام نیست. می‌توانید از آن برای نمایش پست‌های اخیر وبلاگ یا گالری از تعطیلات خود استفاده کنید.
نسخه ی نمایشی و دانلود

Metro – jQuery Grid Portfolio، یک پلاگین jQuery بسیار تمیز و ساده که نمونه کارها شما را به روشی تعاملی نشان می دهد. برخی از نقاط قوت این افزونه عبارتند از: شبکه کاملاً پاسخگو، راه اندازی آسان، عملکرد بالا، ظاهر و احساس مدرن، طراحی تمیز و جادار.

این مورد با بیش از 40 طرح بندی فوق العاده قابل تنظیم و 19 سبک شناور برای انتخاب ارائه می شود. هزاران گزینه آماده برای استفاده افزودن حاشیه ها، پس زمینه ها، سبک های متا مختلف و غیره را بسیار آسان می کند. با این قابلیت های آماده برای استفاده به راحتی می توانید انواع لیست های نمونه کارها یا گالری ها را بسازید.
نسخه ی نمایشی و دانلود

bootFolio سبک ترین اسکریپت فیلترینگ نمونه کارها با انیمیشن css3 است. برای بوت استرپ بسیار بهینه است و استفاده از آن بسیار آسان است. Bootfolio دارای 76+ چیدمان آیتم نمونه کارها، 14 انیمیشن جایگزین، 167+ جلوه شناور آیتم، سبک وزن، بسیار قابل تنظیم و موارد دیگر است.
نسخه ی نمایشی و دانلود

Tonic Gallery به شما این امکان را می دهد که به راحتی یک گالری نمونه کارها با برخی جلوه های زیبا و تنظیمات سفارشی سازی انعطاف پذیر ایجاد کنید. این افزونه شامل گزینه‌های زیادی مانند صفحه‌بندی، فیلتر دسته‌بندی، مدیریت داده، پیش‌نمایش لایت باکس و پیکربندی انعطاف‌پذیر است.

آلفرد به توسعه دهندگان وب کمک می کند تا بهترین نمونه کارها و زیباترین گالری ها را بسازند. این به طور چشمگیری کل فرآیند را ساده می کند و طیف گسترده ای از ویژگی ها و گزینه ها را به شما ارائه می دهد.

این به این معنی است که هر گالری می تواند یک یا چند گالری فرعی داشته باشد. این کاملا برای گالری نمونه کارها مناسب است. این کاملا واکنش گرا است و همچنین برای اهداف دیگری مانند ناوبری، گالری و غیره قابل استفاده است. این پلاگین دارای طراحی واکنش گرا، 5 طرح بندی، سازگار با مرورگر، مترو و الهام گرفته از iOS7 است.