توسط دیمیتری سمنوف
یک پلاگین کشویی محتوا و گالری تصاویر جی کوئری است. این کاملا واکنش گرا، لمسی است و دارای معماری ماژولار است که به شما امکان می دهد فقط ویژگی هایی را که برای بهینه سازی اندازه و عملکرد فایل به آن نیاز دارید، در آن قرار دهید.
توسط اندی
یک افزونه گالری/ویترینی بسیار قابل تنظیم برای jQuery.
توسط ترنت
Galleriffic یک پلاگین جی کوئری است که تجربه ای غنی و رایگان را فراهم می کند و بهینه سازی شده برای مدیریت حجم بالای عکس ها و در عین حال صرفه جویی در پهنای باند.
توسط Aino
Galleria یک چارچوب گالری تصاویر جاوا اسکریپت است که بر روی کتابخانه jQuery ساخته شده است. هدف این است که فرآیند ایجاد گالری تصاویر حرفه ای برای وب و دستگاه های تلفن همراه را ساده کند.
توسط CatchMyFame
روز دیگر به دنبال راهی ساده با استفاده از jQuery برای محو شدن بین مجموعه ای از تصاویر در یک صفحه بودم. بنابراین، به عنوان یک کدنویس، تصمیم گرفتم تا پلاگین خود را ایجاد کنم.
توسط توماس کان
Smooth Div Scroll یک پلاگین جی کوئری است که محتوا را به صورت افقی به چپ یا راست پیمایش می کند. جدا از بسیاری از پلاگین های اسکرول دیگر که برای جی کوئری نوشته شده اند، Smooth Div Scroll پیمایش را به مراحل متمایز محدود نمی کند.
توسط ویکتور زامبرانو – frwrd.net
Minishowcase یک گالری عکس آنلاین کوچک و ساده با php/javascript است که توسط AJAX پشتیبانی می‌شود و به شما امکان می‌دهد به راحتی تصاویر خود را به‌صورت آنلاین، بدون پایگاه‌های داده یا کدنویسی پیچیده نشان دهید، و به شما امکان می‌دهد در چند دقیقه یک گالری پیشرفته داشته باشید.
توسط کاسپار دیوید فردریش
EOGallery یک گالری نمایش اسلاید متحرک وب است که با jQuery ساخته شده است. این فقط از توابع اولیه jQuery و Thickbox Cody Lindley برای نمایش تصاویر بزرگتر استفاده می کند.
توسط Arnault Pachot
چرخ فلک چند فرمتی برای jQuery، نمونه کارها غیر مزاحم و در دسترس که از چندین رسانه پشتیبانی می کند: عکس، ویدیو (flv)، صدا (mp3). این افزونه برای jQuery به طور خودکار پسوند هر رسانه را شناسایی کرده و پخش کننده سازگار را اعمال می کند.
توسط استفان پیتر
یکی دیگر از افزونه های گالری تصاویر با افکت فضایی، پلاگین بسیار سبک و ساده.
نویسنده مورنو دی دومنیکو
jmFullWall یک پلاگین جی کوئری برای ایجاد یک نمونه کار چشمگیر است.
توسط فابریزیو کالدران
Mosaiqy یک پلاگین جی کوئری برای مشاهده و بزرگنمایی عکس است که در Opera 9+، Firefox 3.6+، Safari 3.2+، Chrome و IE7+ کار می کند. عکس ها از یک ساختار داده JSON/JSONP بازیابی شده و به صورت تصادفی در داخل شبکه منتقل می شوند. تمام انیمیشن های گران قیمت توسط GPU شما در مرورگرهای اخیر با استفاده از انتقال CSS3 تصاحب می شوند و سربار CPU را به حداقل می رساند.
توسط کودی
پلاگین جی کوئری زیر مجموعه ای از تصاویر را به یک گالری کوچک با چندین گزینه تبدیل می کند. گالری عکس میکرو اجازه می دهد تا بین یک نمای شبکه ای که پیش نمایش تصاویر را به صورت ریز عکسها نشان می دهد و یک نمای واحد که فقط یک تصویر را نشان می دهد تغییر دهید.
توسط مالیهو
یک گالری عکس تمام صفحه ساده و زیبا که با فریم ورک جی کوئری و چند CSS ساده ایجاد شده است.
تصاویر کوچک پروژه با تغییر موقعیت مکان نما ماوس در ستون سمت چپ پیمایش می شوند. ناحیه محتوا یک تصویر بزرگ شده با نام پروژه ها، توضیحات و لیستی از فناوری های استفاده شده را نمایش می دهد. همانطور که بین تصاویر کوچک حرکت می کنید، اطلاعات پروژه از یکی به دیگری با یک افکت متحرک خیره کننده تغییر می کند. هنگام کلیک بر روی یک تصویر در صفحه توضیحات، با استفاده از انیمیشن jQuery نیز بزرگ می شود. من همچنین می خواهم به زیبایی خیره کننده توجه کنم ظاهرکل صفحه نمونه کارها دمو را ببینید.
اجرای عالی از سایت نمونه کار عکاسان. هنگامی که روی یک آیتم منو کلیک می کنید، یک ناحیه با محتوای ارتفاع و عرض ثابت از مربع های پراکنده در سراسر صفحه جمع آوری می شود. به منظور جا دادن اطلاعات بیشتر در یک منطقه ثابت، پیمایش محتوا ارائه شده است. اجرای نمایش آثار از نمونه کارها به روشی غیرمعمول اجرا می شود: هنگام کلیک بر روی یک تصویر کوچک، یک عکس به عنوان تصویر پس زمینه نمایش داده می شود که با تغییر اندازه پنجره مرورگر به طور خودکار مقیاس می شود.
راه حل اصلی برای ایجاد یک نمونه کار آنلاین. بلوک‌های پروژه (تصاویر کوچک و توضیحات کوتاه با یک پیوند) چندین پشت سر هم نمایش داده می‌شوند؛ زمانی که پنجره مرورگر تغییر می‌کند، بلوک‌ها به طور مساوی در صفحه با یک جلوه متحرک توزیع می‌شوند. هر پروژه می تواند چندین تصویر کوچک داشته باشد که انتقال بین آنها با استفاده از فلش ها انجام می شود. با کلیک بر روی پیوند صفحه ای با توضیحات کامل باز می شود، جایی که متن روی یک بلوک نیمه شفاف با ارتفاع ثابت با اسکرول قرار می گیرد. تصویر مقیاس پذیر پروژه به عنوان پس زمینه صفحه استفاده می شود. جالب به نظر می رسد - نسخه ی نمایشی را ببینید.
اجرای اسکرول عمودی و افقی.
یک شبکه قابل کشیدن متشکل از بلوک های محتوا و تصاویر. شبکه را می توان با ماوس کشید (هر دکمه ماوس را فشار دهید و در جهت دلخواه بکشید). وقتی روی یک تصویر کوچک کلیک می‌کنید، تصویر اصلی به تمام عرض صفحه باز می‌شود. وقتی روی یک بلوک تاریک با متن کلیک می‌کنید، ناحیه‌ای با توضیحات دقیق‌تر نشان داده می‌شود.
سایت تک صفحه ای با تغییر محتوای متحرک. در صفحه نمایشی، از طریق برگه های منو حرکت کنید تا اثر را ببینید.
با کمک این پلاگین جی کوئریو "Switch Display Options" می توانید سوئیچ را در صفحه پیاده سازی کنید که با آن بازدید کننده از نمایش جدولی اطلاعات به نمای کامل با شرح بلوک ها تغییر می کند. ایده آل برای نمونه کارها
یک راه حل اصلی jQuery که برای یک وب سایت کافه ایجاد شده است. این قالب دارای یک گالری jQuery جالب برای نمایش ظروف از منو است. تصاویر موجود در گالری با توجه به اندازه پنجره مرورگر مقیاس بندی می شوند. ابتدا، گالری تصاویر بندانگشتی را با نام و توضیح مختصری از ظروف نمایش می دهد، در حالی که عکس در اندازه کامل به صورت تاریک در پس زمینه نمایش داده می شود. پیمایش بین عکس های موجود با استفاده از فلش ها یا چرخ ماوس انجام می شود. با کلیک بر روی ماوس در حالت گالری، تصاویر کوچک همراه با توضیحات حذف می‌شوند و به شما امکان می‌دهند تا تصاویر بزرگ اصلی را که تا تمام عرض پنجره کشیده شده‌اند، مشاهده کنید. برای بازگشت به منوی سایت از گالری، باید روی لینک در گوشه سمت راست بالا کلیک کنید. علاوه بر گالری شیک جی کوئری، نقشه ای از گوگل به طور موثری در قالب ادغام شده است.
برای ایجاد نوعی "دیوار" از عکس ها یا بلوک های HTML که می توانند با ماوس در اطراف صفحه در یک منطقه ثابت کشیده شوند.
نمایش عناصر مختلف در امتداد دایره ای با قطر معین در صفحه.
این صفحه قابلیت ارسال یک آدرس ایمیل را دارد که در پایگاه داده ثبت شده و امکان ارسال اعلان در مورد باز شدن سایت به آن وجود خواهد داشت. صفحه همچنین با یک نمایش اسلاید کوچک تزئین شده است که بر اساس پلاگین jQuery Nivo Slider v پیاده سازی شده است. 2.3.
با آن، می توانید با کلیک بر روی یک پیوند، جلوه جالبی از یک کارت ویزیت چرخشی ایجاد کنید.
ایده این است که کلیک های کاربران را ردیابی کنید. برای مشاهده عملکرد افزونه در صفحه نمایشی، روی دکمه "Analyze" کلیک کرده و سپس کلیک کنید. و در یک پس زمینه شفاف، نقاطی که با ماوس روی آنها کلیک کرده اید نمایش داده می شود.
پیاده سازی یک صفحه کلید زیبا روی صفحه. شما هرگز نمی دانید، برای چیزی به کارتان می آید.
اجرای جزوات همراه با یادداشت. متن را می توان ویرایش کرد و خود یادداشت ها را می توان حذف کرد یا در صفحه جابجا کرد. برای دیدن یک مثال، به صفحه نمایشی در تب "Demo" بروید.
طراحی جالب لینک ها: وقتی ماوس را روی یک لینک می گذارید، لنگر آن تغییر می کند. باحال به نظر میرسه
پیاده سازی کپچا برای فرم ثبت نام. این افزونه مجموعه ای از اعداد است که باید با کشیدن و رها کردن به ترتیب صعودی تنظیم کنید. روشی کاملاً جالب برای تأیید اینکه ثبت نام یک شخص واقعی است نه یک ربات.
دکمه‌هایی در پایین صفحه نمایش داده می‌شوند که با استفاده از آنها می‌توان به آرامی صفحه را به بالا یا پایین پیمایش کرد.
این افزونه از API زبان گوگل استفاده می کند و می تواند متن را به هر زبانی که گوگل ارائه می دهد ترجمه کند. برای ترجمه، باید روی نماد کنار پاراگراف کلیک کنید و زبانی را که می خواهید به آن ترجمه کنید، از لیست کشویی انتخاب کنید.
پیاده سازی عالی از لینک های قابل پیمایش برای صفحه بندی. با استفاده از jQuery پیاده سازی شده است.
این افزونه جی کوئری به شما امکان می دهد یادداشت های کاغذی را در سایت خود پیاده سازی کنید.
پلاگین برای ایجاد یک زنجیره ناوبری متحرک "Breadcrumbs"
پلاگین جی کوئری برای پیاده سازی صفحه محصول. وقتی روی تصویر محصول کلیک می کنید، توضیحات آن ظاهر می شود.
افکت اسکرول عمودی جی کوئری ایده آل برای پیاده سازی سایت های تک صفحه ای و سایت های نمونه کار. برای مشاهده افکت، روی آیتم منو در صفحه نمایشی کلیک کنید.
اثر جی کوئری برای پیاده سازی ارزیابی چیزی. رنگ دایره ها و متن زیر آنها بسته به اینکه نشانگر ماوس در کدام یک قرار گرفته باشد تغییر می کند.
افزونه ای که ناوبری سایت را پیاده سازی می کند. در این حالت، سایت شما به عنوان شبکه ای از اسناد ارائه می شود که انتقال بین آن ها با یک افکت jQuery جالب انجام می شود.
شما به راحتی می توانید از این افزونه برای ایجاد وب سایت های کوچک و برنامه های تحت وب استفاده کنید. همچنین در سایت های نمونه کار بد به نظر نمی رسد.
نشانگر بارگذاری موثر
هنگام پر کردن فیلد، افزونه گزینه‌های احتمالی را برای پر کردن با استفاده از Ajax پیشنهاد می‌کند، در حالی که تنها گزینه‌هایی را فیلتر می‌کند که متن وارد شده در فیلد را برآورده می‌کند.
قبل از شروع ارتباط، بازدیدکننده باید نام مستعار و ایمیل خود را وارد کند. ستون سمت راست نشان می دهد که چند نفر وارد چت شده اند. فن آوری های مورد استفاده: PHP، MySQL، jQuery، CSS.
بازدیدکنندگان می توانند یک پیشنهاد جدید اضافه کنند یا به پیشنهاد موجود رای دهند. یک راه حل عالی برای کسانی که می خواهند نظر مخاطبان خود را در مورد سایت بدانند. همچنین، از این صفحه می توان برای جمع آوری ایده های جدید برای توسعه بیشتر پروژه خود استفاده کرد. فن آوری های مورد استفاده: PHP، MySQL، jQuery، CSS
اجرای دقیق نظرسنجی ها در سایت. فن آوری های مورد استفاده: jQuery، Ajax، PHP و MySQL.
یک راه حل بسیار جالب برای اجرای رأی گیری در سایت. با بالا و پایین کشیدن بلوک ها، گرفتن تصاویر با ماوس، می توانید آنها را به هر ترتیبی در صفحه مرتب کنید. هر چه بلوک را بالاتر ترک کنید، امتیاز بهتری به آن داده می شود و بر این اساس، اگر بلوک در پایین ترین قسمت قرار گیرد، به این معنی است که شما کمترین آن را دوست داشته اید. بعد از اینکه بلوک ها را به ترتیب دلخواه مرتب کردید، باید روی دکمه "ارسال نظرسنجی" کلیک کنید تا رای در نظر گرفته شود. صفحه نتایج نتایج رای گیری و تعداد بازدیدکنندگانی که رای داده اند را نشان می دهد. فن آوری های مورد استفاده: CSS، PHP، MySQL، jQuery.
یک سیستم نظردهی ساده آژاکس با اعتبارسنجی اطلاعات وارد شده. نظرات در یک پایگاه داده ذخیره می شوند. پیاده سازی شده با استفاده از: PHP، MySQL، CSS، jQuery.
فناوری های مورد استفاده: PHP، jQuery، CSS.
وقتی در میان آیتم های منو پیمایش می کنید، محتوا بدون بارگیری مجدد صفحه بارگیری می شود. فن آوری های مورد استفاده: PHP، jQuery، CSS.
پیاده سازی جستجوی سایت با استفاده از Google AJAX Search API. شما می توانید این فرصت را برای بازدید کننده فراهم کنید که هم در سایت خود و هم در اینترنت جستجو کند. در عین حال، جستجو را می توان نه تنها در صفحات سایت، بلکه در تصاویر و فایل های چند رسانه ای نیز انجام داد.
اثر بسیار جالب، می تواند در اجرای نمونه کارها استفاده شود. وقتی روی یک تصویر کلیک می‌کنید، با پس‌زمینه‌ای شفاف تیره می‌شود و توضیحی با توضیح آنچه باید به آن توجه کنید ظاهر می‌شود.
پیاده سازی jQuery صفحه پرسش و پاسخ در سایت. لیستی از سوالات در بالای صفحه نمایش داده می شود. هنگامی که روی یک سوال کلیک می کنید، صفحه به آرامی به سوالی که انتخاب کرده اید پیمایش می کند و سوال فعال با پاسخ به آن با رنگ دیگری برجسته می شود. پیوندی برای بازگشت به لیست سوالات نیز در قسمت پاسخ فعال ظاهر می شود.
هنگامی که ماوس را روی ماوس قرار می دهید، رنگ تغییر می کند. می توانید رنگ را به صورت تصادفی تغییر دهید.
با استفاده از این افزونه جالب می توانید در صورتی که بازدیدکننده برای اولین بار به سایت خود مراجعه کرده باشد، کارکردهای اصلی سایت خود را معرفی کنید. هنگامی که صفحه بارگیری می شود، یک بلوک در گوشه سمت راست بالا ظاهر می شود که یک پیشنهاد برای بازدید از سایت دارد. اگر بازدیدکننده ای برای اولین بار است که از سایت شما بازدید می کند، می تواند از یک راهنمای کوچک برای آشنایی با ویژگی های اصلی استفاده کند. در این حالت صفحه تاریک می شود و بلوک های لازم در هر مرحله با علامت مشخص می شوند. اگر بازدیدکننده قبلاً از سایت شما بازدید کرده باشد، می تواند به سادگی پنجره ارائه یک تور از سایت را ببندد.
با استفاده از این افزونه می توانید کاربر را با عملکرد اصلی صفحه آشنا کنید. این کار در قالب یک توضیحات پاپ آپ متوالی از عناصر انجام می شود. بازدیدکننده می‌تواند با کلیک بر روی دکمه Next تمام نکات را ببیند یا تور آنلاین را ببندد (اگر قبلاً برای اولین بار در این صفحه فرود آمده است) با استفاده از ضربدر.
این یک گالری مدرن و سبک لایت باکس برای نمایش تصاویر و ویدیوهای یوتیوب در سایت شما است. رابط گالری کاملاً پاسخگو است و در همه دستگاه های کوچک یا بزرگ به زیبایی کار می کند.
نسخه ی نمایشی و دانلود
FABA یک پلاگین jquery آلبوم‌ها و گالری عکس‌های فیسبوک پاسخگو است که تمام آلبوم‌ها و عکسها را از صفحه انتخابی فیسبوک بارگذاری می‌کند.
حدود 90 گزینه وجود دارد که می توانید آنها را ویرایش کنید و تقریباً همه چیز را می توانید سفارشی کنید: انیمیشن ها، جلوه های شناور، هر قسمت از انیمیشن های شناور، متن ها، رفتارها و بسیاری موارد دیگر. می توانید آلبوم های زیبا را در پروژه یا صفحه وب خود ادغام کنید.
xGallerify یک پلاگین گالری سبک و واکنش گرا است که به شما امکان می دهد گالری های تصاویر زیبایی برای وب سایت های خود ایجاد کنید. این افزونه سبک است (اندازه فایل 3 کیلوبایت)، استفاده آسان است و دارای تعدادی گزینه و سبک قابل تنظیم است.
نسخه ی نمایشی و دانلود
Instagram Element یک افزونه پریمیوم اینستاگرام برای وبلاگ نویسان، عکاسان، مدل ها و هر کسی است که به دنبال افزایش حضور خود در اینستاگرام است.
این افزونه کاملا ریسپانسیو است و به شما اجازه می دهد تا به راحتی بیش از 50 گزینه را مدیریت کنید و به شما امکان می دهد عکس های خود را به زیبایی در هر دستگاهی نمایش دهید.
SnapGallery یک پلاگین ساده جی کوئری است که با یک خط جاوا اسکریپت لیست زشتی از تصاویر با اندازه های مختلف را به یک گالری زیبا و قابل تنظیم تبدیل می کند.
کاملاً واکنش‌گرا، قابل تنظیم است و به شما امکان می‌دهد فاصله بین تصاویر، حداقل عرض مجاز قبل از انباشتن و حداکثر تعداد ستون‌ها را با گزینه‌های بیشتری در راه انتخاب کنید!
نسخه ی نمایشی و دانلود
Eagle Gallery این گالری مدرن با قابلیت زوم تصویر است. برای مدیریت گالری می توانید از حرکات یا دکمه های کنترل استفاده کنید. این یک گالری کاملا واکنش گرا است که دارای صفحه نمایش لمسی است و برای دستگاه های تلفن همراه، لپ تاپ و دسکتاپ ایجاد شده است.
با استفاده از این گالری می توانید به راحتی یک گالری محصول در فروشگاه اینترنتی خود برای مشاهده دقیق ایجاد کنید و با کمک گزینه ها آن را سفارشی کنید.
گالری Unite یک گالری جاوا اسکریپت چند منظوره بر اساس کتابخانه جی کوئری است. این با یک تکنیک مدولار با لهجه زیادی از سهولت استفاده و سفارشی سازی ساخته شده است. سفارشی کردن گالری، تغییر پوسته آن از طریق css و حتی نوشتن تم خود بسیار آسان است. با این حال، این گالری بسیار قدرتمند، سریع است و دارای بیشترین ویژگی های امروزی است که باید دارای ویژگی هایی مانند پاسخ گویی، فعال کردن لمس و حتی قابلیت زوم باشد، جلوه منحصر به فردی دارد.
نسخه ی نمایشی و دانلود
jQuery lightGallery یک گالری لایت باکس جی کوئری سبک وزن برای نمایش گالری تصاویر و ویدئو است.
Lightgallery از ناوبری لمسی و کشیدن انگشت روی دستگاه های صفحه لمسی و همچنین کشیدن ماوس برای دسکتاپ پشتیبانی می کند. این به کاربران اجازه می دهد تا با کشیدن انگشت یا کشیدن ماوس بین اسلایدها حرکت کنند.
Lightgallery دارای تعداد زیادی گزینه است که به شما اجازه می دهد تا افزونه را به راحتی شخصی سازی کنید. با به روز رسانی متغیرهای SASS می توانید به راحتی ظاهر و احساس گالری را شخصی سازی کنید.
نسخه ی نمایشی و دانلود
این یکی دیگر از افزونه های عالی گالری تصاویر جی کوئری است که به شما امکان می دهد یک گالری طرح بندی شبکه ای برای تصاویر و ویدیوهای خود ایجاد کنید. این پلاگین به طور کامل پاسخگو است و با تعدادی ویژگی مانند اشتراک گذاری اجتماعی، اسکرول بی نهایت، انیمیشن های css3، فیلترها و موارد دیگر همراه است.
Blueimp Gallery یک گالری عکس و ویدئو، چرخ فلک و لایت باکس با قابلیت لمس، پاسخگو و قابل تنظیم است که برای مرورگرهای وب موبایل و دسکتاپ بهینه شده است.
از ویژگی های سوایپ، ناوبری ماوس و صفحه کلید، جلوه های انتقال، عملکرد نمایش اسلاید، پشتیبانی تمام صفحه و بارگیری محتوا بر اساس تقاضا است و می توان آن را برای نمایش انواع محتوای اضافی گسترش داد.
نسخه ی نمایشی و دانلود
nanoGALLERY یک گالری عکس با قابلیت لمس و پاسخگو با طرح‌بندی شبکه‌ای، آبشاری و موجه است. از تصاویر میزبانی شده خود و کشیدن آلبوم‌های عکس Flickr، Picasa، Google+ و SmugMug پشتیبانی می‌کند.
دارای ناوبری چند سطحی در آلبوم‌ها، افکت‌های شناور ترکیبی بر روی ریز عکسها، اندازه عکس‌های کوچک پاسخگو، طرح‌بندی‌های متعدد، نمایش اسلاید، تمام صفحه، صفحه‌بندی، بارگذاری تنبل تصویر و موارد دیگر.
نسخه ی نمایشی و دانلود
flipGallery یک گالری عکس رایگان مجهز به جی کوئری است که دارای جابجایی های شیک بین تصاویر کوچک و بزرگنمایی لایت باکس است. سایر ویژگی ها عبارتند از پخش تصویر پویا، صفحه بندی خودکار، برش خودکار و پوشش شفاف تصویر.
این افزونه همچنین دارای یک نسخه پریمیوم است که دارای چند ویژگی بسیار خوب است و مطمئناً شامل پاسخگویی نیز می شود.
نسخه ی نمایشی و دانلود
Fancy Gallery یک پلاگین واکنش گرا برای گالری تصاویر جی کوئری است که به شما امکان می دهد تصاویر و ویدیوهای خود را به سبک فانتزی نمایش دهید. این پلاگین گزینه های سفارشی سازی زیادی دارد و می توانید آلبوم ها، ویدیوها، تصاویر و موارد دیگر را نامحدود اضافه کنید.
این افزونه با افکت های شناور مختلف برای تصاویر کوچک و عناوین ارائه می شود که می توان آنها را نیز تنظیم کرد. می توانید بین 7 تم رنگی از پیش تعریف شده یکی را انتخاب کنید یا فقط تم رنگی خود را به راحتی ایجاد کنید.
Balanced Gallery یک پلاگین جی کوئری است که عکسها را در ردیف‌ها یا ستون‌ها به طور مساوی توزیع می‌کند و از فضای ارائه‌شده حداکثر استفاده را می‌کند. عکسها به‌طور پیش‌فرض بر اساس اندازه عنصر «کانتینر» مقیاس‌بندی می‌شوند، که گالری متعادل را به انتخاب خوبی برای وب‌سایت‌های واکنش‌گرا تبدیل می‌کند.
نسخه ی نمایشی و دانلود
S Gallery از API تمام صفحه HTML5 استفاده می کند و به شدت به خوبی انیمیشن های CSS3 و تبدیل های CSS3 متکی است، بنابراین فقط در مرورگرهایی که از این ویژگی ها پشتیبانی می کنند کار می کند.
نسخه ی نمایشی و دانلود
این یک HTML | css | jQuery Grid با یک لایت باکس، می توانید ریز عکسها را برای شبکه مشخص کنید و وقتی روی آن کلیک می کنید تا لایت باکس باز شود، تصویر معمولی بارگذاری می شود، می توانید متن را برای زیرنویس ها و برای لایت باکس مشخص کنید. همچنین لازم نیست همه تصاویر را به طور همزمان بارگذاری کنید (برای اهداف عملکردی)، بنابراین می توانید تعداد تصاویری را که برای بارگیری برای اولین بار بارگذاری می شوند و تعداد تصاویری که باید با کلیک بر روی دکمه "بارگیری تصاویر بیشتر" بارگذاری شوند را مشخص کنید.
Responsive Thumbnail Gallery یک پلاگین جی کوئری برای ایجاد گالری های تصویری است که متناسب با ظرف خود مقیاس شوند.
نسخه ی نمایشی و دانلود
SuperBox یک پلاگین جی کوئری است که کل «تصویر» و «لایت باکس» را یک قدم جلوتر می‌برد و وابستگی به بارگذاری جاوا اسکریپت و تصویر را کاهش می‌دهد تا لایت‌باکسینگ به گذشته تبدیل شود! با استفاده از ویژگی‌های HTML5 data-*، طرح‌بندی‌های واکنش‌گرا و jQuery.
SuperBox به عنوان یک گالری تصاویر ثابت معجزه می کند، که می توانید روی آن کلیک کنید تا یک نسخه کامل از تصویر نشان داده شود.
نسخه ی نمایشی و دانلود
گالری Ultimate Thumbnail یک پلاگین گالری تصاویر کاملاً پاسخگو است که در دو نوع طرح بندی (شبکه ای و خطی، عمودی و افقی) با پیمایش (jScrollPane) یا پیمایش دکمه ای ارائه می شود. جعبه های بند انگشتی از هر عنصر HTML داخل خود پشتیبانی می کنند.
گالری تصاویر و اسلایدرها از محبوب ترین فرمت های جی کوئری هستند. به لطف آنها می توانید به میزان لازم محتوای بصری به سایت اضافه کنید و در عین حال فضای ارزشمندی را ذخیره کنید.
گالری‌ها و لغزنده‌ها صفحه را کمتر شلوغ می‌کنند، اما همچنان به شما امکان می‌دهند تمام تصاویری را که برای انتقال پیام نیاز دارید اضافه کنید. آنها به ویژه برای فروشگاه های آنلاین مفید خواهند بود.
در مقاله امروز، بهترین گالری های تصاویر و اسلایدرهای جی کوئری را برای شما گردآوری کرده ایم.
برای نصب آنها، کافی است افزونه های انتخاب شده را به همراه کتابخانه jQuery به قسمت head صفحه HTML اضافه کنید و آنها را مطابق با مستندات (فقط چند خط کد) پیکربندی کنید.
انتخاب کنید که کدام یک از این عناصر کاملاً در پروژه شما قرار می گیرد.
Bootstrap Slider یک نوار لغزنده تصویر بهینه شده رایگان برای موبایل با اسکرول لمسی و سوایپ است. در هر صفحه و در هر مرورگری شگفت انگیز به نظر می رسد. می توانید تصاویر، فیلم ها، متن، تصاویر کوچک و دکمه ها را در اسلایدرها آپلود کنید.
اسلایدر پیش‌نمایش محصول پتانسیل کامل jQuery را در بر می‌گیرد و کاملاً با هر رابطی مطابقت دارد. همچنین از کیفیت و تمیزی کد این افزونه خرسند خواهید شد.
Expandable Image Gallery یک افزونه شگفت انگیز است که تنها با یک کلیک به یک گالری تمام صفحه تبدیل می شود. می توان از آن برای بخش "درباره ما" یا مشاهده اطلاعات محصول استفاده کرد.
Fotorama یک پلاگین واکنش گرا برای گالری جی کوئری است که برای مرورگرهای دسکتاپ و موبایل کار می کند. گزینه های ناوبری زیادی را ارائه می دهد: تصاویر کوچک، اسکرول، دکمه های جلو و عقب، نمایش اسلاید خودکار و نشانگرها.
Immersive Slider به شما این امکان را می دهد که تجربه تماشای اسلایدهای منحصر به فردی شبیه به نوار لغزنده Google TV ایجاد کنید. برای حفظ تمرکز روی عکس‌های اصلی، می‌توانید تصویر پس‌زمینه را تار تغییر دهید.
Leastjs یک پلاگین jQuery پاسخگو است که به شما کمک می کند یک گالری شگفت انگیز ایجاد کنید. وقتی ماوس را روی تصویر می‌کشید، متن ظاهر می‌شود، وقتی کلیک می‌کنید پنجره به حالت تمام صفحه بزرگ می‌شود.
این افزونه برای نمونه کارها مناسب است. بلوک‌هایی از تصاویر را ایجاد می‌کند که به صورت افقی (عمودی در صفحه‌های کوچک) هستند که محتوای انتخاب‌شده به آن لنگر می‌یابد.
قالب Squeezebox Portfolio جلوه های حرکت نمونه کارها را ارائه می دهد. هنگامی که ماوس را روی تصویر اصلی (یا بلوک) می‌برید، عناصر لنگردار ظاهر می‌شوند.
Shuffle Images یک افزونه واکنش‌گرای شگفت‌انگیز است که به شما امکان می‌دهد یک گالری با تصاویری که در حالت شناور تغییر می‌کنند ایجاد کنید.
افزونه رایگان jQuery Lightbox به شما کمک می کند یک یا چند تصویر را در یک صفحه نشان دهید. همچنین می توان آنها را بزرگ کرد و به اندازه اصلی خود بازگرداند.
PgwSlider یک نوار لغزنده تصویر مینیمالیستی است. کد جی کوئری کوچک است، بنابراین سرعت بارگذاری این افزونه شما را شگفت زده خواهد کرد.
گالری Scattered Polaroids یک لغزنده با طراحی تخت شگفت انگیز است. عناصر آن هنگام تعویض تصاویر به طور تصادفی حرکت می کنند که شگفت انگیز به نظر می رسد.
فیلتر محتوای Bouncy راه حل عالی برای نمونه کارها شما است. این افزونه به کاربران اجازه می دهد تا به سرعت از یک دسته به دسته دیگر حرکت کنند.
اسلایدر ساده jQuery مطابق با نام خود است. این افزونه عناصر جاوا اسکریپت، HTML5 و CSS3 را ترکیب می کند. در نسخه ی نمایشی، فقط بارگذاری متن به صورت پیش فرض در دسترس است، اما اگر کمی تغییرات ایجاد کنید، می توانید محتوای بصری را نیز اضافه کنید.
Glide JS یک نوار لغزنده jQuery ساده، سریع و پاسخگو است. تنظیم آن آسان است و افزونه فضای زیادی را اشغال نخواهد کرد.
این نوار لغزنده آپلود متن و تصویر jQuery شگفت انگیز برای هر وب سایتی مناسب است. با جلوه منظر سبک و ظاهر متن آهسته کاربران را به وجد خواهد آورد.
سلام به خوانندگان عزیز! در این آموزش من به شما نشان خواهم داد که چگونه مینیمال، اما در عین حال راحت و کاربردی ایجاد کنید گالری عکس جی کوئری، یا یک گالری تصاویر، همانطور که دوست دارید. گالری قابلیت ایجاد دسته بندی و به دنبال آن فیلتر کردن را دارد. امکان اجرای نمایش اسلاید نیز وجود دارد. گالری در همه مرورگرها کار می کند، بنابراین هیچ مشکلی در سازگاری وجود نخواهد داشت.
برای ایجاد این گالری از دو کتابخانه رایگان استفاده خواهد شد: شن روانو PrettyPhoto. آنها ایجاد گالری را بسیار ساده می کنند. مثل همیشه می توانید نتیجه کار را در صفحه نمایشی مشاهده کنید و همچنین آرشیو را از گالری کاری و تمامی فایل های منبع دانلود کنید. تنها نکته منفی، اگر بتوانم بگویم، ایجاد دستی تصاویر کوچک برای تصاویر بزرگ است. برای هر چیز دیگری، این گالریشایسته توجه همچنین !
ابتدا، اجازه دهید پانل را با لیست دسته بندی ها تجزیه و تحلیل کنیم، این یک لیست گلوله ای ul است. علاوه بر این، هر عنصر از لیست باید یک نام کلاس منحصر به فرد داشته باشد.
1 |
همانطور که در بالا ذکر شد، موارد لیست، تصاویر موجود در گالری هستند. هر عنصر لیست شامل اجزایی است. این خود تصویر، یا بهتر است بگوییم تصویر کوچک آن، و همچنین یک توضیح است. تصویر کوچک پیوندی به تصویر اصلی است. ویژگی rel برای فراخوانی جاوا اسکریپت و باز کردن تصویر اصلی مورد نیاز است.
همچنین 2 مورد مهم را فراموش نکنید، عنصر li list باید یک ویژگی منحصر به فرد data-id داشته باشد. ویژگی data-type شامل کلاس دسته است که لیست آن را در بالا توضیح دادم. به نظر می رسد همه چیز در مورد نشانه گذاری است.
من روی سبک ها تمرکز نمی کنم، زیرا از یک کتابخانه آماده استفاده می کنیم PrettyPhotoکه وظیفه افزایش تصویر را بر عهده دارد و کدهای css زیادی دارد. با این حال، شایان ذکر است که 5 گزینه طراحی برای تصویر بزرگ شده وجود دارد، اگرچه در حالت ایده آل فقط 3 گزینه وجود دارد، زیرا در دو گزینه فقط گرد کردن حذف می شود.
بنابراین، من فقط سبک های CSS را برای ریز عکس ها و لیست دسته ها نشان خواهم داد.
1 | دسته بندی نمونه کارها (حاشیه-پایین: 30 پیکسل؛ ) |
در اصل، همه چیز باید با سبک ها روشن باشد. برای ردیف کردن دسته ها، ویژگی display روی inline تنظیم می شود. به منظور ایجاد جلوه ضربه ای به تصویر، رنگ پس زمینه (سفید) و بالشتک 10 پیکسلی تنظیم شده است. اندازه آیتم های فهرست در .portfolio-area li تنظیم شده است.
و در نهایت، مهمترین چیز، به خاطر آن کل درس. این کد جی کوئری است. بیایید با فیلتر کردن تصاویر بر اساس دسته شروع کنیم.
1 | // همه عناصر فرزند پورتفولیو-منطقه را انتخاب کنید و روی یک متغیر بنویسید $(".portfolio-categli" ) .click (تابع (e) ( var filterClass= $(this) .attr ("کلاس") .split (" ") .slice (- 1 ) [ 0 ] ; if (filterClass == "همه") ( LightboxPhoto() ; |
با استفاده از متد clone() و انتخابگر، همه فرزندان .portfolio-area را انتخاب کرده و در متغیر $data می نویسیم. در مرحله بعد، یک کلیک روی یکی از دسته ها، عنصر li لیست با کلاس .portfolio-categ را دنبال می کنیم. با حذف removeClass("active") همه دسته ها را غیرفعال می کنیم، اگر این کار انجام نشود، با گذشت زمان همه دسته ها فعال می شوند و فیلتر کردن متوقف می شود.
از آنجایی که ما روی عنصر لیست کلیک می کنیم، این انتخابگر حاوی عنصر لیست است، یعنی li، مقدار ویژگی کلاس را از آن می گیریم و از متد split برای تقسیم نام کلاس به چند قسمت استفاده می کنیم، مرز یک فاصله است (یعنی. اگر کلاس "همه فعال" بود، پس از تقسیم، آرایه ای از "همه" و "فعال" دریافت می کنیم). و سپس، با استفاده از روش slice، اولین عنصر آرایه (در مورد ما، "all") را انتخاب می کنیم و نتیجه حاصل را در متغیر filterClass می نویسیم. اگر فضای خالی وجود نداشته باشد، نام کلاس تغییر نخواهد کرد.
بعد، بررسی می کنیم که آیا رشته در متغیر filterClass وجود دارد یا خیر همهسپس با استفاده از متد .find همه موارد با کلاس portfolio-item2 را از آرایه $data که در بالا در نظر گرفتیم انتخاب می کنیم. عناصر انتخاب شده (و اینها همه عناصر لیست هستند، یعنی همه تصاویر) در متغیر filteredData قرار می گیرند.
در غیر این صورت، اگر filterClass برابر نباشد همه، سپس همه عناصر لیست را در متغیر filterData قرار نمی دهیم، بلکه فقط آنهایی را که ویژگی نوع داده آنها با کلاس دسته مطابقت دارد، قرار می دهیم. به طور خلاصه، عناصر تنها یک دسته.
و در نهایت متغیر حاصل را به کتابخانه ارسال می کنیم شن و ماسه روان جی کوئری، که فیلتر تصویر را انجام می دهد. همه چیز در مورد فیلتر کردن است.
حالا در مورد بزرگنمایی تصویر در پنجره پاپ آپ. همه چیز در اینجا بسیار ساده تر است.
1 | jQuery("a") .prettyPhoto (( |
کلیک روی پیوندی را ردیابی می کند که ویژگی rel آن با prettyPhoto شروع می شود. سپس کتابخانه وارد بازی می شود. زیبا عکس، و تصویر به طور معجزه آسایی بزرگ می شود. به هر حال، ما چندین پارامتر را نیز پاس می کنیم. مانند سرعت انیمیشن بالا، تاخیر در نمایش اسلاید 5 ثانیه، تم فیس بوک (در مجموع 5 تم وجود دارد، آنها در پوشه تصاویر / beautifulPhoto هستند) و همچنین نمایش نام عکس و افزایش تصویر در حالت شناور مستندات کامل برای زیبا عکسرا می توان یافت
برای به روز ماندن با آخرین مقالات و درس ها، مشترک شوید
