امروز نگاه خواهیم کرد پلاگین جی کوئری Flipping Gallery که به شما امکان می‌دهد گالری‌های عکس جالبی با انتقال‌های بسیار اصلی ایجاد کنید. در مثال 5 نوع انتقال با استفاده از این افزونه وجود دارد. استفاده از این افزونه واقعاً بسیار آسان است، بنابراین هر کسی می تواند به طور کامل از آن استفاده کند.

یک مثال در اینجا قابل مشاهده است:

دانلود

ما با جزئیات بیشتری در مورد نحوه ایجاد یک منو از Demo 2، با منوی ظاهر شده در بالا سمت چپ، نگاه خواهیم کرد.

بخش HTML

ابتدا باید کتابخانه jQuery را که می توانید دانلود کنید و افزونه Flipping Gallery را بین تگ ها وصل کنید. :

سپس تصاویر را مرتب می کنیم. شما می توانید به تعداد دلخواه عکس اضافه کنید:

1 2 3 4 5 6 7 8

<div class = "گالری" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

و برای افزودن توضیحات برای تصاویر (مانند دموهای 4 و 5) باید از ویژگی استفاده کنید عنوان داده:

1 2 3 4 5 6 7 8

<div class = "گالری" > <a href = "#" data-caption = "بسیار" > <a href = "#" data-caption = "باحال" > <a href = "#" data-caption = "گالری" > <a href = "#" data-caption = "استفاده از" > <a href = "#" data-caption = "Flipping" > ... </div>

بخش JS

بیایید ببینیم هر روش به چه معناست:

• جهت- روشی که مسئول نحوه نمایش تصاویر است. اگر "به جلو" باشد، تصویر از ابتدا در انتها قرار می گیرد، اگر "عقب" - برعکس. مقدار پیش فرض "forward" است.
• انتخابگر- یک انتخابگر که توسط آن تصاویر را انتخاب می کنیم؛ می توان آن را به دلخواه تغییر داد.
• فاصله گذاری- فاصله بین تصاویر را در پرسپکتیو تنظیم می کند.
• نمایش حداکثر— تعداد تصاویری را که برای کاربر قابل مشاهده است را تنظیم می کند. شما می توانید حداقل از 100 تصویر استفاده کنید، اما فقط 15 تصویر اول نشان داده می شود که بسیار راحت است و مرورگر را بارگذاری نمی کند.
• enableScroll- می توانید تصاویر را با استفاده از چرخ ماوس مشاهده کنید.
• flipDirection- تعیین می کند که تصویر کجا اسلاید می کند: "چپ" - چپ، "راست" - راست، "بالا" - بالا و "پایین" - پایین. به طور پیش فرض به پایین اسلاید می شود.
• پخش خودکار- شروع خودکار گالری مشخص شده در میلی ثانیه، یعنی. چقدر طول می کشد تا تصاویر تغییر کنند؟

نتیجه

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

1. گالری جی کوئری با اثر چرخش صفحه

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

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

3. گالری تصاویر جی کوئری برای یک محصول، پلاگین "slideJS".

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

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

5. گالری لایت باکس زیبا "ppGallery"

6. jQuery Touch-Gallery

7. گالری جدید جی کوئری با ریز عکسها

گالری حرفه ای جی کوئری 2011.

8. پلاگین جی کوئری “Nivo Zoom”

یکی دیگر از پلاگین های جی کوئری با کیفیت بالا از توسعه دهندگان اسلایدر Nivo. با کلیک بر روی تصویر کوچک، تصویر را بزرگ کنید.

9. jQuery 3d Wall Gallery

گالری جدید جی کوئری برای سال 2011. فید تصاویر تمام عرض صفحه را در بر می گیرد. می‌توانید بین عکس‌ها به سه روش پیمایش کنید: با استفاده از چرخ ماوس، پیمایش در بالای گالری و استفاده از بلوک تصویر کوچک در پایین. گالری بسیار چشمگیر به نظر می رسد.

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

11. نمایش غیر معمول تصاویر در گالری جی کوئری

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

12. افزونه jQuery gallery “MB.Gallery”

13. گالری جی کوئری که تمام صفحه را پر می کند

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

14. گالری سبک جی کوئری

این افزونه به طور خودکار پوشه را اسکن می کند و کپی های کوچکی از تصاویر ایجاد می کند.

16. گالری شیک با استفاده از کتابخانه های جی کوئری و رافائل

یک جلوه جالب هنگام قرار دادن ماوس روی یک تصویر کوچک.

17. نسخه جدید پلاگین جی کوئری "Supersized" نسخه 3.1

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

18. پلاگین جی کوئری "Galeria 1.2.2"

گالری جدید جی کوئری برای پروژه های شما.

با فشار دادن یک دکمه، گالری در صفحه ظاهر می شود. تصاویر کوچک در اطراف تصویر بزرگ شده ظاهر می شوند. می توانید تغییر خودکار تصاویر را کنترل کنید. فن آوری های مورد استفاده: jQuery، CSS، PHP.

20. پلاگین "Timer Gallery"

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

پلاگین گالری تصاویر با استفاده از jQuery.

22. گالری جاوا اسکریپت برای مشاهده در دستگاه های تلفن همراه "PhotoSwipe"

یک گالری تصاویر بهینه شده برای مشاهده در دستگاه های تلفن همراه (تلفن یا تبلت).

23. گالری جاوا اسکریپت با افکت سه بعدی

24. گالری شکل‌گیری جی کوئری

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

25. پلاگین جی کوئری “Galeria 1.2.3”

26. گالری تصاویر جی کوئری "Image Wall"

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

27. گالری CSS3

افکت شناور جالب

28. گالری با مینیاتور "TN3 Gallery"

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

29. شبکه ای از تصاویر “Grid-Gallery”

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

30. jQuery Swap Gallery

گالری سبک جی کوئری در چند خط کد.

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

31. jQuery Image Gallery

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

تصویر و مینیاتورهای آن به صورت دایره ای ساخته شده است.

33. پلاگین نمونه کار عکاسی jQuery "Portfolio Image Navigation"

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

34. پلاگین "jmFullZoom"

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

35. کارت عکس

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

36. گالری تصاویر با ریز عکسها

گالری جی کوئری با ریز عکسها.

37. گالری جی کوئری "Galleriffic"

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

38. افزونه jQuery CSS3 "Wave Display Effect"

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

بسیاری از گزینه ها و تنظیمات نمایش.

42. پلاگر

43. یک گالری ساده و زیبا که با CSS ساخته شده است، بدون استفاده از اسکریپت

زیبا به نظر می رسد و در تمام مرورگرهای مدرن عالی کار می کند

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

46. ​​گالری به صورت پشته ای از عکس ها

نتیجه گالری که ما ایجاد خواهیم کرد باید به این شکل باشد. می توانید دمو را تماشا کنید و در صورت تمایل نتیجه نهایی گالری را دانلود کنید.

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

در ادامه سری بررسی‌های مداوم راه‌حل‌های نوظهور هنگام ایجاد، تصمیم گرفتم مجموعه کامل‌تری از جالب‌ترین و مؤثرترین نمایش‌های اسلاید و گالری‌های عکسی را که تا به حال با آن‌ها مواجه شده‌ام، که با استفاده از جادوی jQuery ایجاد شده‌اند، گردآوری کنم.
من می خواهم فوراً به شما هشدار دهم که منابع مورد بحث در این بررسی عمدتاً بر اساس آن است زبان انگلیسی، اما من فکر می کنم هر کسی که به آن نیاز داشته باشد به طور شهودی یا با کمک مترجمانی که ده ها سکه از آنها وجود دارد متوجه می شود. و اگر به اندازه کافی جست‌وجو کنید، می‌توانید توضیحاتی در مورد تکنیک ایجاد برخی گالری‌ها و لغزنده‌ها به زبان روسی بیابید، زیرا بسیاری از توسعه‌دهندگان وب ما در حین کار بر روی یک پروژه خاص، ابتدا برای خود ترجمه می‌کنند و سپس توضیحات مفصلی از تمام دستکاری‌های خود ارسال می‌کنند. برای دسترسی رایگان
به عنوان مثال، این همان کاری بود که من انجام دادم، زمانی که روی مکانیسم ایجاد کار می کردم، ابتدا یک گزینه گالری را پیدا کردم که برای من مناسب بود در برژونت، آن را برای درک بهتر کاری که انجام می دادم ترجمه کردم و در آینده من امیدوارم که مقاله بدی در مورد استفاده از اسکریپت Highslide با نمونه هایی از کار در انواع مختلف برنامه باشد.
و بنابراین، به اندازه کافی از اشعار غیر ضروری، بیایید مستقیماً به بررسی برویم، تماشا کنیم، توضیحات مختصری را بخوانیم و از بین تعداد زیادی افزونه و اسکریپت جدید jQuery برای اجرای اسلایدرهای جالب، گالری عکس، نمایش اسلاید در سایت های خود انتخاب کنیم: اسلایدرهای تغییر خودکار و دستی، اسلایدرهای تصویر پس زمینه، با و بدون ریز عکسها و غیره. و غیره...

از.سایت | نسخه ی نمایشی

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

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

لغزنده اختلاف منظر

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

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

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

گالری مینیمیتیک پلاگین jQuery بسیار قابل تنظیم است، با انتخاب زیادی از انتقال هنگام نمایش تصاویر. با استفاده از گالری Minimit، می توانید نمایش تصاویر را به شکل چرخ فلک، نمایش اسلاید، چرخاننده ساده و پیمایشگر تصویر منظم سازماندهی کنید.

یک پلاگین کوچک (2 کیلوبایت) جی کوئری است که روشی ساده و بی معنی برای نمایش تصاویر به صورت اسلایدشو ارائه می دهد.

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

بر خلاف بسیاری از اسلایدرهای تصویر جاوا اسکریپت و جی کوئری، Slider.js یک راه حل ترکیبی است که توسط انتقال و انیمیشن های CSS3 پشتیبانی می شود.

این یک قالب یک صفحه ای برای ایجاد ارائه های مختلف در HTML5 و CSS3 است.

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

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

نمایش اسلاید جاوا اسکریپت برای توسعه چابک

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

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

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

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

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

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

آسان است با استفاده از jQueryافزونه ای برای نمایش عکس های شما در قالب یک نمایش اسلاید با جلوه های انتقال بین تصاویر (ما موارد جالب تری را دیده ایم). jqFancyTransitions سازگار است و به طور گسترده با Safari 2+ آزمایش شده است. اینترنت اکسپلورر 6+، فایرفاکس 2+، گوگل کروم 3+، Opera 9+.

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

یکی دیگر از پلاگین های جی کوئری از سری لایت باکس، اگرچه وزن بسیار کمی دارد (9 کیلوبایت)، اما دارای قابلیت های زیادی است. یک رابط طراحی مناسب وجود دارد که همیشه می توانید با استفاده از CSS آن را بهبود یا سفارشی کنید.

از قبل از نام مشخص می شود که هیچ چیز فانتزی وجود ندارد، ما یک اسکرول خودکار تصویر بسیار ساده داریم که کنترل های کاملاً از دست رفته دارد. چه کسی می داند، شاید این اسلایدر دقیقاً با مینیمالیسم خود توجه شما را به خود جلب کند.

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

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

این یک پیاده سازی از نمایش های اسلاید آماده برای استفاده با استفاده از scriptaculous/prototype یا jQuery است. Horinaja تا حدودی یک راه حل نوآورانه است زیرا به شما امکان می دهد از چرخ برای پیمایش در محتوای قرار داده شده در نوار لغزنده استفاده کنید. هنگامی که نشانگر ماوس خارج از ناحیه نمایش اسلاید است، پیمایش به صورت خودکار انجام می شود؛ زمانی که نشانگر روی نمایش اسلاید قرار می گیرد، پیمایش متوقف می شود.

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

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

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

پس زمینه وگاس

افزونه Vegas Background jQuery به شما این امکان را می دهد که تصاویر پس زمینه تمام صفحه زیبا را به صفحات وب اضافه کنید، همه با عناصر نمایش اسلاید. اگر پیچیدگی های کار با افزونه را به دقت مطالعه کنید، می توانید راه حل های جالب زیادی پیدا کنید، البته فقط در صورت نیاز.

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

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

نسخه 4 گالری تصاویر PikaChoose jQuery در دسترس است! Pikachoose یک نمایش اسلاید سبک وزن جی کوئری با ویژگی های عالی است! ادغام با Fancybox، تم های عالی (هر چند رایگان نیست) و بسیاری موارد دیگر توسط توسعه دهندگان افزونه به شما ارائه می شود.

تعداد تصاویر موجود در فهرست شما را بررسی می کند و به صورت پویا مجموعه ای از پیوندهای عکس را به عنوان ناوبری دیجیتال ایجاد می کند. علاوه بر این، با کلیک بر روی هر تصویر به جلو یا عقب حرکت می‌کند و همچنین می‌توانید بسته به ناحیه‌ای که روی عکس کلیک می‌کنید، بین تصاویر اسکرول کنید (به عنوان مثال: با کلیک بر روی سمت چپ تصویر، اسلایدها به جلو و عقب حرکت می‌کنند. به ترتیب برای سمت راست تصویر).

یکی دیگر از نوار لغزنده جی کوئری که کاملاً در هر قالب وردپرس قرار می گیرد.

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

پلاگین جی کوئری که به شما امکان می دهد به سرعت یک اسلایدر ساده، موثر و زیبا برای تصاویر با هر اندازه ایجاد کنید.

پیروباکسیک اسکریپت سبک وزن jQuery "lightbox" است، مشاهده در یک بلوک پاپ آپ انجام می شود که به طور خودکار اندازه تصویر را با تمام کنترل ها تنظیم می کند.

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

نمایش اسلاید تمام صفحه با HTML5 و jQuery

برای ایجاد نمایش اسلاید و نمایش تصاویر در حالت تمام صفحه، توسعه دهندگان از افزونه وگاس jQuery آشنا استفاده کردند که حاوی ایده ها و تکنیک های بسیاری است که قبلاً به تفصیل در مقالات گروه توضیح داده شده بود. وجود عناصر صوتی HTML5 و سبک انتقال بین تصاویر جذاب است.

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

نمایش اسلاید تصویر، تصاویر درست در مقابل چشمان شما ناپدید می شوند، اثر به سادگی فوق العاده است.

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

ما بی سر و صدا داریم به آن عادت می کنیم و منتظر کارهای جدید تیم Codrops هستیم. لطفاً برای مشاهده تصاویر در حالت تمام صفحه، یک نوار لغزنده تصویر عالی با جلوه انتقال سه بعدی عالی دریافت کنید.

یکی دیگر از افزونه های وردپرس از سری سازمان دهنده نمایش اسلاید. به راحتی تقریباً در هر طراحی ادغام می شود و گزینه های سفارشی سازی زیادی را برای کاربران با تجربه و افراد غیر باتجربه نیز ارائه می دهد.

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

یک افزونه نمایش اسلاید خوب برای ادغام با وردپرس. Xili-floom-slideshow به طور خودکار نصب می شود و تنظیمات شخصی نیز مجاز است.

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

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

این افزونه وردپرس تصاویر گالری تعبیه شده را به یک نمایش اسلاید ساده و انعطاف پذیر تبدیل می کند. این افزونه از نوار لغزنده تصویر jQuery FlexSlider و تنظیمات شخصی کاربر استفاده می کند.

- این افزونه وردپرسبرای سازماندهی نمایش اسلایدی از عکس‌ها، تصاویر از SmugMug، Flickr، MobileMe، Picasa یا Photobucket RSS، آثار و نمایش‌ها با استفاده از جاوا اسکریپت خالص.

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

به نظر من Skitter یکی از بهترین اسلایدرهایی است که از کار با وردپرس پشتیبانی می کند. ثبات و سرعت عمل، کنترل‌های نه چندان برجسته، جلوه‌های انتقال و اتصال نسبتاً ساده به موضوع، جذب من شده است.

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

از.سایت | نسخه ی نمایشی

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

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

Meteor Slides یک نوار لغزنده وردپرس jQuery با بیش از بیست سبک انتقال برای انتخاب است. نویسنده این افزونه را "شهاب" نامیده است، احتمالاً به معنای سرعت عملکرد است؛ شاید من متوجه هیچ چیز شهاب سنگی نشده ام.

oQey Gallery یک گالری تصویر کامل با عناصر نمایش اسلاید برای وردپرس، با قابلیت های داخلی ویدئو و موسیقی است.

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

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

WOW Slider یک نوار لغزنده jQuery برای وردپرس است که بسیار عالی است جلوههای بصری(Burst، Fly، Blinds، Squares، Fragments، Basic، Fade، Stack، Vertical Stack و Linear) و قالب های حرفه ای طراحی شده است.

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

| نسخه ی نمایشی

جدید در نسخه 2.4: پشتیبانی از مرتب‌سازی عکس drag-n-drop مستقیماً از طریق ویرایشگر وردپرس و همچنین امکان افزودن لینک عکس به تصاویر اصلی. (IE8 ممکن است اشکالاتی داشته باشد، در همه مرورگرهای اصلی به خوبی کار می کند. نویسندگان قول پشتیبانی کامل از IE8 در آینده را می دهند.)

| نسخه ی نمایشی

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

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

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

توسط اندی – The Coffeescripter
یک افزونه گالری/ویترینی بسیار قابل تنظیم برای jQuery.

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

Tonic Gallery - jQuery XML Portfolio Gallery | 6 دلار

توسط 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 به طور خودکار پسوند هر رسانه را شناسایی کرده و پخش کننده سازگار را اعمال می کند.

The Wall – Media Gallery – jQuery powered | 5 دلار

توسط استفان پتر
یکی دیگر از افزونه های گالری تصاویر با افکت فضایی، پلاگین بسیار سبک و ساده.

نویسنده مورنو دی دومنیکو
jmFullWall یک پلاگین جی کوئری برای ایجاد یک نمونه کار چشمگیر است.

توسط فابریزیو کالدران
Mosaiqy یک پلاگین جی کوئری برای مشاهده و بزرگنمایی عکس است که در Opera 9+، Firefox 3.6+، Safari 3.2+، Chrome و IE7+ کار می کند. عکس ها از یک ساختار داده JSON/JSONP بازیابی شده و به صورت تصادفی در داخل شبکه منتقل می شوند. تمام انیمیشن های گران قیمت توسط GPU شما در مرورگرهای اخیر با استفاده از انتقال CSS3 تصاحب می شوند و سربار CPU را به حداقل می رساند.

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

VION – jQuery Image Gallery Plugin | 7 دلار

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

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

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

در مقاله امروز بهترین گالری ها و اسلایدرهای تصاویر جی کوئری را برای شما گردآوری کرده ایم.

برای نصب آن ها، کافی است افزونه های انتخاب شده را به همراه کتابخانه jQuery به قسمت head صفحه HTML اضافه کنید و آنها را مطابق با مستندات پیکربندی کنید (فقط چند خط کد).

انتخاب کنید که کدام یک از این عناصر کاملاً با پروژه شما مطابقت دارد.

1. لغزنده بوت استرپ

Bootstrap Slider - رایگان، بهینه شده برای دستگاه های تلفن همراهنوار لغزنده تصویر با اسکرول لمسی و کش رفتن. در هر صفحه و در هر مرورگری شگفت انگیز به نظر می رسد. می توانید تصاویر، فیلم ها، متن، تصاویر کوچک و دکمه ها را در لغزنده بارگذاری کنید.

2. نوار لغزنده پیش نمایش محصول

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

3. گالری تصاویر قابل ارتقا

Expandable Image Gallery یک افزونه شگفت انگیز است که با یک کلیک به یک گالری تمام صفحه تبدیل می شود. می توان از آن برای بخش "درباره ما" یا برای مشاهده اطلاعات محصول استفاده کرد.

4. فوتوراما

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

5. لغزنده همهجانبه

Immersive Slider به شما این امکان را می دهد که تجربه تماشای اسلایدهای منحصر به فردی شبیه به نوار لغزنده Google TV ایجاد کنید. می‌توانید تصویر پس‌زمینه را تغییر دهید تا تار شود تا عکس اصلی در فوکوس بماند.

6. Leastjs

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

7. قالب پانل های کشویی

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

8. قالب نمونه کارها Squeezebox

قالب Squeezebox Portfolio جلوه های حرکتی را برای نمونه کارها شما ارائه می دهد. هنگامی که ماوس را روی تصویر اصلی (یا بلوک) می‌برید، عناصر لنگردار ظاهر می‌شوند.

9. تصاویر را به هم بزنید

Shuffle Images یک افزونه واکنش‌گرای شگفت‌انگیز است که به شما امکان می‌دهد یک گالری با تصاویری که در حالت شناور تغییر می‌کنند ایجاد کنید.

10. پلاگین لایت باکس رایگان جی کوئری

افزونه رایگان jQuery Lightbox به شما کمک می کند یک یا چند تصویر را در یک صفحه نشان دهید. همچنین می توان آنها را بزرگ کرد و به اندازه اصلی خود بازگرداند.

11. PgwSlider – نوار لغزنده پاسخگو برای jQuery

PgwSlider یک نوار لغزنده تصویر مینیمالیستی است. کد جی کوئری سبک است، بنابراین سرعت بارگذاری این افزونه شما را شگفت زده خواهد کرد.

12. گالری Polaroids Scattered

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

13. فیلتر محتوای Bouncy

فیلتر محتوای Bouncy یک راه حل ایده آل برای نمونه کارها است. این افزونه به کاربران اجازه می دهد تا به سرعت از یک دسته به دسته دیگر حرکت کنند.

14. اسلایدر ساده جی کوئری

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

15. Glide JS

Glide JS یک نوار لغزنده jQuery ساده، سریع و پاسخگو است. پیکربندی آن آسان است و افزونه فضای زیادی را اشغال نمی کند.

16. کشش تمام صفحه با اختلاف منظر

این اسلایدر شگفت انگیز جی کوئری با قابلیت بارگذاری تصاویر و متن برای هر وب سایتی مناسب است. با جلوه منظر جزئی و ظاهر متن آهسته کاربران را به وجد می آورد.