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

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

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

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

1. iLightbox

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

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

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

2. SwipeBox

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

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

3. MagnificPopup

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

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

4. PhotoSwipe

• وابستگی: Javascript یا jQuery
• پشتیبانی مرورگر
• مجوز: مجوز MIT

11. FeatherLight

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

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

12. LightGallery

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

با استفاده از ویژگی data-src برای تصاویر با اندازه کامل. در مورد فیلم های یوتیوب و Vimeo هم همینطور است. قابل ملاحظه ای از همه قالب های ویدیویی 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

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

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



15. FluidBox

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

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



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

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

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

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

نمونه ای را می توان در اینجا مشاهده کرد:

دانلود

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

قسمت HTML

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

1 2 3 4 5 6

<سر\u003e ... <"http://code.jquery.com/jquery-1.9.1.js"> <نوع اسکریپت \u003d "متن / جاوا اسکریپت" src \u003d "http://code.jquery.com/jquery.flipping_gallery.js"> ... </ سر\u003e

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

1 2 3 4 5 6 7 8

<div class \u003d "گالری"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e ... </ div\u003e

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

1 2 3 4 5 6 7 8

<div class \u003d "گالری"\u003e <a href \u003d "#" data-caption \u003d "خیلی"\u003e <a href \u003d "#" data-caption \u003d "cool"\u003e <a href \u003d "#" data-caption \u003d "gallery"\u003e <a href \u003d "#" data-caption \u003d "استفاده از"\u003e <a href \u003d "#" data-caption \u003d "Flipping"\u003e ... </ div\u003e

قسمت JS

1 2 3 4 5 6 7 8 9

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

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

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

خروجی

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

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

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

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





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



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

کشویی اختلاف منظر



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



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



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



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



یک افزونه جی کوئری کوچک (2 کیلوبایت) است که یک روش ساده برای نمایش تصاویر به صورت نمایش اسلاید بدون رفتارهای غیر ضروری فراهم می کند.



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



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



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



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



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

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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

پس زمینه وگاس



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



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



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



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



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



کشویی jQuery دیگری که کاملاً در قالب الگوی وردپرس جا دارد.



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



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



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



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

نمایش پرده ای تمام صفحه با HTML5 و jQuery



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





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



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



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



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



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



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



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



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



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



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



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



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



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



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

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



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



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



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



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



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



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



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



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

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



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

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



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

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

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

مزایای اصلی (+)

1. سادگی نصب ، پیکربندی و استفاده به غیر از جی کوئری ، شما نیاز دارید فقط 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 را وصل کنید. در وردپرس ، این کار را می توان با وارد کردن کد زیر در پرونده توابع تم (function.php) انجام داد. در حقیقت ، این فیلمنامه برای درگیری ها استفاده می شود نسخه های مختلف jQuery و مطابق با این طرح عمل می کند: jQuery را که قبلاً ثبت شده بود حذف می کند ، نسخه جدیدی را ثبت می کند ، فیلم نامه را نمایش می دهد نسخه های فعلی جی کوئری را می توان در اینجا یافت.

   به سادگی می توانید چنین خطی را بین آنها وارد کنید و :

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

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

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

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

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

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

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

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

تنظیمات دیگری نیز وجود دارد:
داده-عرض \u003d "98٪" // نسبت نسبی داده-نسبت \u003d "800/600" // نسبت ابعاد داده-عرض / \u003d "420" // دقیقه. عرض داده-حداکثر \u003d "900" // حداکثر. width data-minheight \u003d "320" // min. ارتفاع داده-حداکثر \u003d "100٪ // حداکثر نسبی. ارتفاع داده-قد \u003d" 100٪ // ارتفاع نسبی
ریز عکسها
ریز عکسها توسط data-nav \u003d "انگشت شست" پاسخ داده می شوند

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

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

HTML + Fotorama
قاب عکس کاملاً از HTML و CSS استفاده می کند که عملکرد اسکریپت را بسیار گسترش می دهد. با پیوندها ، بلوک ها ، جداول ، پاراگراف ها ، نوشتن CSS و موارد دیگر کار کنید. در زیر چند نمونه از گالری آورده شده است. اگر قسمت بصری نمایش داده نمی شود ، روی دکمه "نتیجه" کلیک کنید.
نمایش / پنهان کردن نمونه ها
قلم قلم نوشته ایوانوف کلی (DreamerKlim) را در CodePen مشاهده کنید.
قلم aVEEVb توسط ایوانوف کلی (DreamerKlim) را در CodePen مشاهده کنید.
حالت تمام صفحه
data-permfullscreen \u003d "true" // در پنجره مرورگر data-permfullscreen \u003d "بومی" // برای کل مانیتور
اضافه کردن یک تصویر بزرگ جداگانه برای حالت تمام صفحه از طریق داده های کامل امکان پذیر است:

دیگر
data-autoplay \u003d "true" // autostart data-autoplay \u003d "3000" // فاصله بین اسلایدها در ms data-caption \u003d "One" // نظرات نظرات تصویری data-keyboard \u003d "درست" // ناوبری پیکان shuffle data \u003d "واقعی" // تصاویر در یک ظرف غذا داده-ناوبری \u003d "بالا" // ریز عکسها در بالا data-loop \u003d "واقعی" // حلقه از طریق بیایید سعی کنیم همه چیز را به هم وصل کنیم و ویدیو اضافه کنیم
data-caption \u003d "One" data-keyboard \u003d "true" data-shuffle \u003d "true" data-navposition \u003d "top" data-autoplay \u003d "true" data-loop \u003d "true"> "برخی نظر 1"> "نوعی نظر 2"> برای پیدا کردن کار مورد علاقه شما
1. گالری jQuery با جلوه صفحه
برای نمایش آخرین مقالات در وبلاگ یا ارائه محصولات می توان از یک راه حل مشابه استفاده کرد.
روشی بی نظیر برای نمایش عکسهای خود به عنوان گالری غیرمعمول jQuery.
3. گالری تصویر محصول jQuery ، پلاگین slideJS
افزونه jQuery برای پیاده سازی یک صفحه محصول با تصاویر متعدد عالی است. انتقال بین تصاویر را می توان با استفاده از ریز عکسها یا استفاده از فلش های پیمایش انجام داد.
هنگامی که روی آن شناور هستید ، تصویر بزرگ شده است.
5. گالری Lightbox زیبا "ppGallery"
6. مینی گالری jQuery "Touch-Gallery"
7. گالری تصاویر کوچک jQuery
گالری حرفه ای jQuery 2011.
8. افزونه jQuery "Nivo Zoom"
افزونه jQuery با کیفیت دیگر از توسعه دهندگان کشویی Nivo. تصویر را با کلیک روی تصویر کوچک بزرگنمایی کنید.
9. گالری jQuery "گالری دیوار سه بعدی"
گالری جدید جی کوئری 2011. روبان تصویر در کل عرض صفحه کشیده شده است. سه راه برای حرکت بین عکسها وجود دارد: استفاده از چرخ ماوس ، پیمایش از بالای گالری و استفاده از بلوک با ریز عکسها در زیر. این گالری بسیار چشمگیر به نظر می رسد.
تصاویر موجود در گالری به طور تصادفی افزایش یافته و کاهش می یابد و باعث ایجاد اثر حباب می شود.
11. نمایش تصویر غیر معمول در گالری jQuery
با استفاده از کشویی در بالا ، می توانید فاصله بین تصاویر موجود در پشته را تغییر دهید. وقتی روی یک تصویر کلیک می کنید ، می چرخد.
12. افزونه گالری jQuery "MB.Gallery"
13. گالری تمام صفحه jQuery
افزونه 2011 یک گالری جدید با شرح تصاویر ، بدون در نظر گرفتن اندازه آن ، در کل منطقه پنجره مرورگر امتداد دارد. تصاویر کوچک جالب از تصاویر اجرا شده است. انتقال بین عکسها با استفاده از فلش در نزدیکی تصویر کوچک و استفاده از چرخ ماوس انجام می شود.
14. گالری jQuery آسان
این افزونه به طور خودکار پوشه را اسکن می کند و ریز عکسها از تصاویر را ایجاد می کند.
16. گالری شیک با استفاده از کتابخانه های jQuery و رافائل
اثر جالب هنگامی که روی یک تصویر کوچک شناور هستید.
17. نسخه جدید افزونه jQuery "Supersized" نسخه 3.1
اخیراً ، من به این راه حل jQuery برای ایجاد گالری های تمام صفحه اشاره کردم. امروز می خواهم شما را معرفی کنم آخرین نسخه این افزونه حرفه ای اسکریپت کاملاً بازنویسی شده است ، اکنون این گالری حتی سریعتر نیز کار می کند ، در حالی که برخی از تنظیمات جالب اضافه شده است ، به عنوان مثال ، پیمایش صفحه کلید ، میزان تصویر متغیر ، اندازه صفحه نمایش و موارد دیگر.
18. افزونه jQuery "Galleria 1.2.2"
گالری jQuery جدید برای پروژه های شما.
گالری با کلیک روی یک دکمه در صفحه ظاهر می شود. تصاویر کوچک در اطراف تصویر بزرگنمایی نشان داده می شوند. می توانید تغییر خودکار تصاویر را کنترل کنید. فن آوری های استفاده شده: jQuery، CSS، PHP.
20. افزونه "گالری تایمر"
گالری jQuery. در صورت وجود تعداد زیادی از اسلایدها ، تغییر خودکار اسلایدها را اجرا کنید و تصاویر کوچک را حرکت دهید.
افزونه گالری تصاویر در jQuery.
22. گالری جاوا اسکریپت برای مشاهده در دستگاه های تلفن همراه "PhotoSwipe"
گالری تصاویر برای مشاهده در دستگاه های تلفن همراه (تلفن یا رایانه لوحی) بهینه شده است.
23. گالری جاوا اسکریپت با جلوه سه بعدی
24. گالری "گالری morphing jQuery"
کشویی جی کوئری جدید. برخی از جلوه های متحرک جالب هنگام تغییر اسلایدها.
25. افزونه jQuery "Galleria 1.2.3"
26. گالری تصاویر دیواری jQuery
یک گالری اصلی به شکل مینیاتورها در اندازه های مختلف پراکنده در صفحه ، به عنوان نقاشی های سبک شده. هنگامی که روی تصویر کوچک کلیک می کنید ، ناحیه ای با توضیحات تصویر ظاهر می شود و هنگامی که دوباره روی آن کلیک می کنید ، تصویر بزرگ اصلی ظاهر می شود.
27. گالری CSS3
یک اثر شناور جالب.
28. گالری با ریز عکسها "TN3 Gallery"
گالری jQyery با ریز عکسها. امکان مشاهده در یک پنجره جمع و جور و در یک پنجره تمام صفحه و همچنین امکان غیرفعال کردن / فعال کردن تغییر خودکار اسلایس
29. شبکه تصویر گالری شبکه
شبکه تصاویر بسته به عرض پنجره مرورگر کشیده شده است. تأثیر جالبی در شناور: سطر و ستون فعال برجسته شده است.
30. گالری jQuery "Swap Gallery"
گالری سبک وزن جی کوئری با چند خط کد.
صفحه نسخه ی نمایشی چندین گزینه برای منوی کشویی ، در سبک های مختلف ارائه می دهد. در این منو می توانید پیکربندی کنید: تأثیر افتادن ، سرعت افتادن ، و همچنین ایجاد یک انتخاب بین افتادن با کلیک کردن یا معلق زدن روی یک مورد.
31. گالری تصاویر jQuery
گالری jQuery با تصاویر زیرنویس. چندین اثر تغییر اسلاید. پیمایش بین تصاویر یا با استفاده از فلش ها یا با کلیک کردن روی تصویر کوچک صورت می گیرد.
تصویر و ریز عکسها به شکل دایره ساخته شده اند.
33. پلاگین پیمایش تصویر نمونه کارها نمونه کارها jQuery
راه حل اصلی جاوا اسکریپت برای طراحی نمونه کارها از عکاس. پیمایش بین تصاویر با استفاده از فلش های بالا / چپ / راست و با استفاده از مربع های کوچک (شبیه سازی حرکت در فضای 2D) انجام می شود. می توانید عکسها را از جلسات مختلف عکس در ردیف های مختلف عمودی قرار دهید و با استفاده از عناصر پیمایش از طریق آنها حرکت کنید. نسخه ی نمایشی را تماشا کنید.
34. پلاگین "jmFullZoom"
افزونه مشاهده تصاویر که به اندازه کامل پنجره مرورگر کشیده شده است. می توان برای نمایش آثار از نمونه کارها استفاده کرد.
35. کارت عکس
گالری یکپارچه با نقشه گوگل. با کلیک بر روی نماد در گوشه پایین سمت راست می توانید به صفحه کامل گسترش دهید. عالی برای سایت های مسافرتی
36. گالری عکس با ریز عکسها
گالری jQuery با ریز عکسها.
37. گالری jQuery "Galleriffic"
نمایش اسلاید تصویر بند انگشتی.
38. افزونه jQuery CSS3 "اثر نمایش موج"
بازنمایی موجی از تصاویر و مطالب موجود در صفحه. وقتی روی تصویر کوچک کلیک می کنید ، تمام تصاویر بزرگ شده و نام آنها ظاهر می شود. با یک کلیک دیگر ، بلوکی با توضیحات عکس باز می شود.
بسیاری از گزینه ها و تنظیمات نمایش.
42. Plogger
43. یک گالری زیبا و زیبا که در CSS ساخته شده است ، بدون استفاده از اسکریپت
بسیار زیبا به نظر می رسد و در همه مرورگرهای مدرن بسیار عالی عمل می کند
می توانید نمایش خودکار اسلایدها (شروع / توقف) را کنترل کنید ، اسلایدها را با استفاده از فلش های صفحه کلید تغییر دهید ، اسامی اسلایدها را به صورت خودکار تقسیم کنید ، در صورت وجود تعداد زیادی ، از چندین گالری در همان صفحه ، عنوان های اسلایدها ، پشتیبانی از API و امکان ایجاد جلوه های انتقال اسلایدهای خود پشتیبانی می کنید.
46. \u200b\u200bگالری در قالب یک پشته عکس
اینگونه است که نتیجه گالری ، که ما ایجاد خواهیم کرد ، به نظر می رسد. می توانید نسخه ی نمایشی را تماشا کنید و در صورت تمایل نتیجه نهایی گالری را بارگیری کنید.
اشتراک گذاری
اشتراک گذاری
توییت
پسندیدن
پسندیدن