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

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

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

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

1. آی لایت باکس

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

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

• اعتیاد:jQuery
• پشتیبانی مرورگر: IE7+، Chrome، Firefox، Safari و Opera
• مجوز: و شیطان می داند)))

2. SwipeBox

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

• اعتیاد:jQuery
• پشتیبانی مرورگر: IE9+، Chrome، Safari، Firefox، Opera، IOS4+، Android و Windows Phone
• مجوز: مشخص نیست، شاید شما خوش شانس باشید)))

3. بازشو با شکوه

یک پلاگین لایت باکس شناخته شده و شناخته شده برای jQuery یا Zepto.js. نویسنده این افزونه Dmitry Semenov است که توسعه دهنده افزونه PhotoSwipe نیز می باشد که در ادامه در مورد آن صحبت خواهم کرد. این افزونه که به عنوان یک پلاگین jQuery/Zepto ارائه می‌شود، دارای ویژگی‌های پیشرفته‌تری است که در PhotoSwipe یافت نمی‌شود، مانند پشتیبانی از ویدیو، نمایش نقشه‌ها و محتوای Ajax، پیاده‌سازی پنجره‌های مودال با فرم‌های درون خطی. با همه معیارها، این یکی دیگر از ابزارهای عالی در قفس توسعه دهندگان وب است. به طور جداگانه، یک افزونه برای وردپرس و مستندات دقیق در مورد راه اندازی و استفاده از آن وجود دارد. تنها چیز ناامید کننده فقدان مستندات به زبان روسی است، با قضاوت بر اساس نام و نام خانوادگی، نویسنده به نظر روسی است، او هرگز به دلیل مضر بودن این موضوع، یا به دلیل آگاهی خیالی از حیله گری خود، متوجه نشده است. خوب، خوب، چه کسی باید آن را بفهمد، ما نیز چای نرم را نجوشانیم))).

• اعتیاد: jQuery 1.9.1+ یا Zepto.js
• پشتیبانی مرورگر: IE7 (جزئی)، IE8+، Chrome، Firefox، Safari و Opera
• مجوز: مجوز MIT

4. PhotoSwipe

• اعتیاد: جاوا اسکریپت یا جی کوئری
• پشتیبانی مرورگر
• مجوز: مجوز MIT

11 نور پر

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

• اعتیاد:jQuery
• پشتیبانی مرورگر: IE8+، Chrome، Firefox، Safari و Opera
• مجوز: مجوز MIT

12. لایت گالری

گالری نور- پلاگین سبد چند منظوره با تعداد زیادی ویژگی های اضافی. همراه با بیش از 20 گزینه برای سفارشی کردن کوچکترین جزئیات Lightbox. همه چیز اینجاست، خوب، تقریباً همه چیز)). یک گالری عکس کامل با ریز عکسها مرتب شده، ناوبری و ریز عکسهای پیمایشی. نشانه گذاری ساده html به عنوان یک لیست نامرتب

با استفاده از ویژگی data-src برای تصاویر با اندازه کامل. همین امر در مورد ویدیوهای یوتیوب و ویمئو نیز صدق می کند. پشتیبانی عالی از همه فرمت‌های ویدیویی HTML5، MP4، WebM، Ogg... تصاویر کوچک متحرک، طرح‌بندی پاسخگوی سازگار با موبایل، جلوه‌های اسلاید و انتقال صاف که هنگام تعویض تصاویر و سایر محتواها ظاهر می‌شوند. ظاهربه راحتی شکل می گیرد و با آن تنظیم می شود با استفاده از CSS. پیش بارگذاری تصویر و بهینه سازی کد. ناوبری صفحه کلید برای دسکتاپ و همچنین امکان استفاده از فونت های آیکون اضافی. گالری نور- اینجا جایی است که "ترکیب" واقعی است، نکته اصلی این است که در انبوه تنظیمات و قابلیت های گسترده این افزونه گم نشوید.
برای کسانی که به یک نوار لغزنده مناسب نیاز دارند، توصیه می کنم از همان توسعه دهندگان توجه کنند.
• اعتیاد:jQuery
• پشتیبانی مرورگر: IE7+، Chrome، Firefox، Safari، Opera، iOS، Android و Windows Phone
• مجوز: مجوز MIT



13.StripJS

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

• اعتیاد:jQuery
• پشتیبانی مرورگر: IE7+، Chrome، Firefox، Safari، Opera، iOS 5+ و Android 3+
• مجوز: مجوز Creative Commons BY-NC-ND 3.0



14. لایت لایت

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

• اعتیاد:jQuery
• پشتیبانی مرورگر: IE9+، Chrome، Firefox، Safari و Opera
• مجوز: مجوز MIT



15 فلوید باکس

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

• اعتیاد:jQuery
• پشتیبانی مرورگر: IE9+، Chrome، Firefox، Safari، Opera
• مجوز: مجوز MIT



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

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

با تمام احترام، اندرو

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

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

دانلود

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

بخش HTML

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

1 2 3 4 5 6

<سر > ... <"http://code.jquery.com/jquery-1.9.1.js"> <نوع اسکریپت = "text/javascript" src= "http://code.jquery.com/jquery.flipping_gallery.js"> ... </head>

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

1 2 3 4 5 6 7 8

<div class="gallery"> <href="#"> <href="#"> <href="#"> <href="#"> <href="#"> ... </div>

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

1 2 3 4 5 6 7 8

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

بخش js

1 2 3 4 5 6 7 8 9

$(".gallery") .flipping_gallery (( جهت: "به جلو"، انتخابگر: "> a"، فاصله: 10، showMaximum: 15، enableScroll: true، flipDirection: "پایین"، پخش خودکار: 500 ) );

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

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

نتیجه

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

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

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

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





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



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

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



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



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



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



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



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



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



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



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



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



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

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



s3Slider- پلاگین jQuery، یک نمایش اسلاید از لیست نامرتب تصاویر ایجاد می کند و می تواند به راحتی در هر وب سایتی پیاده سازی شود.



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

پس زمینه وگاس



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



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



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



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



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



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



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



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



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



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

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



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





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



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



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



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



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



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



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



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



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



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



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



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



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



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

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



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



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



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



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



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



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



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



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

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



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

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



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

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

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

نکات مثبت اصلی (+)

1. سادگینصب، پیکربندی و استفاده علاوه بر jQuery، شما نیاز خواهید داشت شامل فقط 2 فایلو برای نمایش گالری، باید فقط پیوندهای تصاویر را در آنجا مشخص کنید.
2. کمی تاثیر می گذارد سرعتبارگذاری سایت
3. تطبیق پذیری. گالری شما روی تلفن، لپ تاپ و حتی روی صفحه تلویزیون شما خوب به نظر می رسد.
4. فراوانی تنظیمات و عملکردها،به طور جداگانه، از طریق ویژگی های تگ های HTML متصل می شوند.
5. پشتیبانی از دستگاه های لمسی
6. پشتیبانی ویدئو.
7. امکان پذیری بارگذاری تنبلتصاویر.
8. و خیلی چیزهای دیگر که برای کاربر حرفه ای جذاب خواهد بود.

موارد منفی (-)

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

اولین گزینه برای اتصال Fotorama

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

1. در حال بررسی jQueryقابل اعتماد و متخصص منبعسایت (میانبر Ctrl + U) → تلاش برای یافتن چیزی شبیه به این خط: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

   برای آسان‌تر کردن جستجو، از Ctrl + F استفاده کنید. اگر هیچ خطی وجود نداشته باشد، باید jQuery را اضافه کنید. در وردپرس، این کار را می توان با چسباندن کد زیر در فایل توابع موضوع (functions.php) انجام داد. در واقع این اسکریپت برای درگیری استفاده می شود نسخه های مختلف jQuery و طبق طرح زیر کار می کند: جی کوئری ثبت شده قبلی را حذف می کند، یک جدید ثبت می کند و اسکریپت را خروجی می دهد. نسخه های فعلیکتابخانه های جی کوئری را می توانید در اینجا بیابید.

   شما فقط می توانید این خط را بین آنها وارد کنید و :

   <اسکریپت src= "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> اسکریپت>
2. ما شامل fotorama.css و fotorama.js هستیم.کد زیر را بین تگ ها قرار دهید و، در وردپرس این کار در فایل هدر موضوع (header.php) انجام می شود. "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
3. На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

1. Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
2. Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
3. Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> "; ) add_shortcode("foto","sd");
4. حال هنگام نوشتن مقاله، کد کوتاه را در انتها وارد کنید

ایجاد مستقیم گالری

گالری با استفاده از کد HTML ارائه می شود ظرف

c class="photorama"، ظرف حاوی کد نمایش تصویر است یا پیوند به یک تصویر . هنگام نوشتن مقاله در موتور وردپرس، ویرایشگر را به حالت متن تغییر دهید و وارد ظرف شوید
c class="fotorama" .
به نظر می رسد این است:

یا مانند این (شماره‌گذاری پیوند اختیاری است):
1 3 4
نمونه هایی از تنظیمات فوتوراما
ابعاد ظرف
اندازه بلوک فریم به اندازه تصویر اول است، سایر تصاویر متناسب با تصویر اول مقیاس بندی می شوند. برای اصلاح این وضعیت می توانید ابعاد را به صورت دستی مشخص کنید.

تنظیمات دیگری نیز وجود دارد:
data-width="98%" // عرض نسبی data-ratio="800/600" // نسبت تصویر data-minwidth="420" // دقیقه. عرض data-maxwidth="900" // حداکثر. عرض data-minheight="320" // دقیقه. height data-maxheight="100% // نسبی حداکثر. height data-height="100% // ارتفاع نسبی
مینیاتور
Data-nav="thumbs" مسئول ریز عکسها است

اما این روش خیلی کارآمد نیست، زیرا اسکریپت باید همه عکس‌ها را به یکباره بارگذاری کند تا ریز عکس‌ها ایجاد شود، بنابراین منطقی‌تر است که کپی‌های کوچکی از تصاویر را از قبل آماده کنیم. وردپرس به طور خودکار تصاویر کوچک تولید می کند و ما از آنها استفاده خواهیم کرد. برای پیوند دادن به تصویر کوچک -70x70 را به نام فایل اضافه کنید (https://website/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://website/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

به طور پیش‌فرض، تصویر کوچک 64 × 64 است. می‌توانید این پارامتر را با استفاده از data-thumbwidth (عرض) و data-thumbheight (ارتفاع) تنظیم کنید. اگر می خواهید تصویر کوچک اندازه خودش را داشته باشد، پارامترهای عرض و ارتفاع را برای فایل تصویر کوچک تنظیم کنید:

کد HTML + Fotorama
قاب عکس به خوبی HTML و CSS را کنترل می کند که عملکرد اسکریپت را تا حد زیادی گسترش می دهد. با لینک ها، بلوک ها، جداول، پاراگراف ها کار کنید، CSS بنویسید و موارد دیگر. در زیر نمونه هایی از کارهای این گالری را مشاهده می کنید. اگر قسمت بصری نمایش داده نشد، روی دکمه "نتیجه" کلیک کنید.
نمایش / پنهان کردن نمونه ها
قلم ooppwb توسط Ivanov Klim (@DreamerKlim) را در CodePen ببینید.
قلم aVEEVb توسط Ivanov Klim (@DreamerKlim) را در CodePen ببینید.
حالت تمام صفحه
data-allowfullscreen="true" //در پنجره مرورگر data-allowfullscreen="native" //برای کل مانیتور
امکان اضافه کردن یک تصویر بزرگ جداگانه برای حالت تمام صفحهاز طریق داده کامل:

دیگر
data-autoplay= "true" //autoplay data-autoplay="3000" //فاصله بین اسلایدها بر حسب میلی ثانیه data-caption "یک" //نظرات روی تصاویر داده-صفحه کلید = "true" // با فلش ها پیمایش کنید data-shuffle= "true" //تصاویر مخلوط شده اند data-navposition= "بالا" // ریز عکسها در بالاحلقه داده = "true" //cycle scrollبیایید سعی کنیم همه چیز را به هم وصل کنیم و یک ویدیو اضافه کنیم
data-caption ="One" data-keyboard ="true" data-shuffle ="true" data-navposition ="top" data-autoplay ="true" data-loop ="true"> "چند نظر 1"> "چند نظر 2"> برای یافتن کاری که دوست دارید
1. گالری جی کوئری با جلوه تلنگر صفحه
راه حل مشابهی را می توان برای نمایش آخرین مقالات وبلاگ یا ارائه محصولات استفاده کرد.
راهی منحصر به فرد برای نمایش عکس های خود به عنوان یک گالری فانتزی جی کوئری.
3. گالری تصاویر محصول جی کوئری، پلاگین slideJS
پلاگین جی کوئری برای پیاده سازی صفحه محصول با چندین تصویر عالی است. انتقال بین تصاویر را می توان با استفاده از ریز عکسها یا با استفاده از فلش های ناوبری انجام داد.
وقتی نشانگر ماوس را روی آن می‌برید، تصویر بزرگ‌تر می‌شود.
5. گالری لایت باکس زیبا "ppGallery"
6. jQuery "Touch-Gallery" مینی گالری
7. گالری جدید jQuery
گالری حرفه ای جی کوئری 2011.
8. افزونه jQuery Nivo Zoom
یکی دیگر از پلاگین های جی کوئری با کیفیت از توسعه دهندگان Nivo Slider. با کلیک بر روی تصویر کوچک، تصویر را بزرگ کنید.
9. jQuery 3d Wall Gallery
گالری جدید جی کوئری 2011. فید تصویر به تمام عرض صفحه کشیده می شود. پیمایش بین عکس‌ها به سه روش انجام می‌شود: با استفاده از چرخ ماوس، با پیمایش از بالای گالری و استفاده از بلوک با ریز عکس‌ها از پایین. گالری بسیار چشمگیر به نظر می رسد.
تصاویر در گالری به طور تصادفی افزایش و کاهش می یابد و یک افکت حباب ایجاد می کند.
11. نمایش غیرمعمول تصاویر در گالری جی کوئری
می توانید از نوار لغزنده در بالا برای تغییر فاصله بین تصاویر در یک پشته استفاده کنید. با کلیک بر روی یک تصویر آن را می چرخانیم.
12. افزونه jQuery gallery "MB.Gallery"
13. گالری جی کوئری تا تمام صفحه کشیده می شود
پلاگین 2011. یک گالری جدید با توضیحاتی از تصاویر، بدون در نظر گرفتن اندازه آن، تا کل منطقه پنجره مرورگر کشیده شده است. ریز عکسها به طرز جالبی متوجه شده اند. انتقال بین عکس ها با استفاده از فلش های نزدیک تصویر کوچک و با استفاده از چرخ ماوس انجام می شود.
14. گالری سبک جی کوئری
این افزونه به طور خودکار پوشه را اسکن می کند و تصاویر کوچکی از تصاویر ایجاد می کند.
16. گالری شیک با استفاده از کتابخانه های جی کوئری و رافائل
اثر جالبهنگامی که نشانگر ماوس را روی تصویر کوچک قرار می دهید.
17. نسخه جدید افزونه jQuery "Supersized" نسخه 3.1
اخیراً من قبلاً به این راه حل jQuery برای ایجاد گالری های تمام صفحه اشاره کردم. امروز می خواهم شما را معرفی کنم آخرین نسخهاین افزونه حرفه ای اسکریپت کاملاً بازنویسی شده است، اکنون گالری حتی سریعتر کار می کند و تنظیمات جالبی مانند ناوبری صفحه کلید، سرعت متغیر تصویر، اندازه صفحه نمایش و موارد دیگر اضافه شده است.
18. پلاگین جی کوئری "Galeria 1.2.2"
گالری جدید جی کوئری برای پروژه های شما.
گالری با کلیک یک دکمه در صفحه ظاهر می شود. ریز عکسها در اطراف تصویر بزرگ شده نمایش داده می شوند. می توانید تغییر خودکار تصویر را کنترل کنید. تکنولوژی های مورد استفاده: jQuery، CSS، PHP.
20. افزونه Timer Gallery
گالری جی کوئری در صورت وجود تعداد زیاد اسلاید، تغییر خودکار اسلاید و پیمایش بند انگشتی اجرا شد.
پلاگین گالری تصاویر جی کوئری.
22. گالری جاوا اسکریپت برای مشاهده در دستگاه های تلفن همراه "PhotoSwipe"
یک گالری تصاویر بهینه شده برای مشاهده در دستگاه های تلفن همراه (تلفن یا تبلت).
23. گالری جاوا اسکریپت با افکت سه بعدی
24. گالری شکل‌گیری جی کوئری
نوار لغزنده جدید جی کوئری. چندین افکت متحرک جالب هنگام تغییر اسلایدها.
25. پلاگین جی کوئری "Galeria 1.2.3"
26. گالری تصاویر جی کوئری "Image Wall"
گالری اصلی به شکل مینیاتورهایی در اندازه های مختلف که در سراسر صفحه پراکنده شده است، به عنوان نقاشی تلطیف شده است. وقتی روی یک تصویر کوچک کلیک می‌کنید، ناحیه‌ای با توضیحات تصویر ظاهر می‌شود و وقتی دوباره کلیک می‌کنید، تصویر بزرگ اصلی ظاهر می‌شود.
27. گالری CSS3
افکت شناور جالب
28. گالری TN3 با تصاویر کوچک
گالری تصاویر کوچک jQuery. امکان مشاهده در یک پنجره فشرده و در یک پنجره تمام صفحه و همچنین امکان غیرفعال کردن / فعال کردن تغییر خودکار اسلاید پیاده سازی شده است.
29. Grid-Gallery Image Grid
شبکه تصویر بر اساس عرض پنجره مرورگر کشیده می شود. یک افکت شناور جالب: سطر و ستون فعال برجسته شده اند.
30. jQuery Swap Gallery
یک گالری سبک وزن جی کوئری در چند خط کد.
صفحه نمایشی چندین گزینه را برای مگا منوهای کشویی در سبک های مختلف نشان می دهد. در این منو می‌توانید این موارد را تنظیم کنید: افکت حذف، سرعت حذف، و همچنین با کلیک کردن یا قرار دادن ماوس بر روی مورد، بین حذف شدن انتخاب کنید.
31. jQuery Image Gallery
گالری جی کوئری با شرح تصاویر. جلوه های انتقال اسلاید چندگانه. پیمایش بین تصاویر یا با استفاده از فلش ها یا با کلیک بر روی تصویر کوچک انجام می شود.
تصویر و مینیاتورهای آن به صورت دایره ای ساخته شده است.
33. Photographer Portfolio jQuery Portfolio Image Navigation Plugin
راه حل اصلی جاوا اسکریپت برای طراحی نمونه کار عکاسان. پیمایش بین تصاویر با استفاده از فلش های بالا / چپ / راست و با استفاده از مربع های کوچک (تقلید حرکت در فضای دو بعدی) انجام می شود. می‌توانید عکس‌ها را از جلسات عکس مختلف در ردیف‌های عمودی مختلف گروه‌بندی کنید و با استفاده از کنترل‌های پیمایش در میان آنها پیمایش کنید. دمو را ببینید.
34. پلاگین "jmFullZoom"
پلاگین برای مشاهده تصاویری که به اندازه کامل پنجره مرورگر کشیده می شوند. می توان از آن برای نمایش نمونه کارها استفاده کرد.
35. کارت عکس
گالری ادغام شده با نقشه گوگل. می توانید با کلیک بر روی نماد در گوشه پایین سمت راست آن را به حالت تمام صفحه گسترش دهید. عالی برای سایت های مسافرتی
36. گالری تصاویر با ریز عکسها
گالری تصاویر کوچک jQuery.
37. گالری جی کوئری "Galleriffic"
نمایش اسلاید با ریز عکسها.
38. jQuery CSS3 Wave Display Effect Plugin
نمایش موج مانند تصاویر و محتوا در یک صفحه. هنگامی که روی یک تصویر کوچک کلیک می کنید، همه تصاویر بزرگ شده و نام آنها ظاهر می شود. یک کلیک دیگر بلوکی را با توضیح عکس باز می کند.
تعداد زیادی گزینه و تنظیمات نمایش
42. پلاگر
43. یک گالری ساده و زیبا که با CSS ساخته شده است، بدون استفاده از اسکریپت
زیبا به نظر می رسد و در تمام مرورگرهای مدرن عالی کار می کند
می‌توانید نمایش خودکار اسلاید (شروع / توقف)، تعویض اسلایدها با استفاده از فلش‌های صفحه‌کلید، صفحه‌بندی خودکار عنوان اسلایدها در صورت وجود تعداد زیادی، پشتیبانی از گالری‌های متعدد در یک صفحه، زیرنویس‌های اسلاید، پشتیبانی API و توانایی ایجاد خود را کنترل کنید. جلوه های انتقال اسلاید
46. ​​گالری به صورت پشته ای از عکس ها
نتیجه گالری که ما ایجاد خواهیم کرد باید اینگونه باشد. می توانید دمو را ببینید و در صورت تمایل نتیجه نهایی گالری را دانلود کنید.
اشتراک گذاری
اشتراک گذاری
توییت
پسندیدن
پسندیدن