لایت باکس ریسپانسیو در وردپرس با FooBox

یکی از روش های نمایش جذاب محتوای یک سایت استفاده از لایت باکس می باشد لایت باکس در واقع نمایش محتوای سایت در یک پنجره ی جدید است که در صفحه نمایش های مختلف به صورت متفاوت دیده میشود و اصطلاحا واکنش گرا یا ریسپانسیو می باشد . افزونه های مختلفی وجود دارند که به وسیله ی ان ها می توانید افکت لایت باکس را در سایت خود ایجاد کنید و هر یک از آن ها دارای تنظیمات خاص و امکانات متفاوتی هستند یکی از این افزونه ها , افزونه FooBox Image Lightbox می باشد .

افزونه وردپرس FooBox Image Lightbox اولین افزونه لایت باکس ریسپانسیو بود که طراحی گردید که نه تنها اندازه ی تصاویر را متناسب با صفحه نمایش تنظیم می کند بلکه می توانید با دکمه ی مربوطه بهترین سایز یک عکس را نسبت به صفحه نمایش وسیله ی مورد استفاده تنظیم کنید.

افزونه FooBox Image Lightbox با اکثر افزونه های گالری عکس سازگاری دارد اما بهترین نوع سازگاری آن با افزونه گالری عکس FooGallery می باشد .

برخی ویژگی های افزونه FooBox Image Lightbox :

طراحی واکنشگرا
شش نوع طراحی مختلف لایت باکس
سازگاری با گالری های وردپرس
دارا بودن قابلیت درج توضیحات در عکس ها
امکان تعیین مبدا در پیکربندی
امکان تعیین اندازه ی تصاویر لایت باکس در صفحه نمایش های مختلف
اشتراک گذاری درشبکه های اجتماعی (۱۰ + شبکه)
پشتیبانی از ویدئو
پشتیبانی از HTML
پشتیبانی از iFrame
لینک دهی قوی
حالت نمایش تمام صفحه و نمایش اسلاید
۵ طرح رنگی، ۱۲ دکمه آیکون و ۱۱ آیکون لودر
و ..

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

افزونه FooBox شامل پنج زیرمنو به شرح زیراست:

Getting Started: شامل سه تب کلی شامل می باشد.

Getting-started: جهت مشاهده شورت کد های کمکی افزونه
Free Trial: مشاهده ویژگی های افزونه به همراه ارتقا و استفاده رایگان از نسخه پرو به مدت هفت روز
Demo : مشاهده دموی عملکرد افزونه

Settings: شامل تنظیمات پیکربندی افزونه جهت ایجاد تصاویر لایت باکس در وردپرس
Account: شامل اطلاعات اکانت شما مانند ایمیل، نسخه افزونه، نام کاربر و… است.
Support: شما رابه قسمت پشتیبانی افزونه در مخزن وردپرس هدایت میکند.
Upgraide: جهت ارتقا به نسخه pro میتوان از این زیر منو کمک گرفت.

مراحل ایجاد تصاویر لایت باکس به صورت ریسپانسیو

مرحله پیکربندی

در ابتدا از زیرمنوی Settingsبه تب general رجوع کرده و اقدام به پیکربندی افزونه میکنیم.

WordPress Galleries: فعال سازی افزونه برای تمام گالری های تصاویر
WordPress Images With Captions: فعال سازی افزونه برای تمامی تصاویر دارای کپشن در جهت ایجاد تصاویر لایت باکس در وردپرس
Attachment Images: فعال سازی افزونه برای تصاویری که در برگه و نوشته قرار میدهیم.
Fit To Screen: تصاویر را در صفحه فیت میکند.
Scrollbars: تنظیمات مربوط به نمایش یاعدم نمایش اسکرول هنگام مشاهده لایت باکس

سایر بخش ها

Show Counter: قرار دادن شمارنده تصاویر درون لایت باکس
Count Message: تنظیم نحوه نمایش متن کانتر در زیر لایت باکس
Hide Captions: مخفی کردن کپشن ها
Show Captions On Hover: نمایش کپشن تصاویر هنگام هاور موس
Error Message: تنظیم ارور برای زمانی که در نمایش تصویر مشکلی وجود دارد.

مرحله تنظیم لایت باکس برای تصاویر مورد نظر

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

ساخت گالری تصاویر و مشاهده آن ها به صورت تصاویر پشت سر هم در لایت باکس
مشاهده تصاویر دلخواه در لایت باکس
مشاهده تصاویر با کپشن در لایت باکس

لایت باکس گالری

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

روش اول تعبیه با افزونه کمکی Foogallery

برای ساخت گالری و فراخوانی میتوانید از افزونه foogallery کمک بگیرید این افزونه مکمل افزونه foobox است و در این صورت نیاز به تنظیمات دستی ندارید.

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

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

دانلود افزونه Foogallery

روش دوم درج گالری

روش دستی، به این صورت است که شما تصاویر مورد نظر خود را دربرگه یا نوشته قرار دهید سپس از قسمت ویرایشگر متنی، کدهای خود را به صورت نمونه زیر ویرایش کنید. (از بخش getting started تمامی شورت کدها به همراه راهنما برای شما قابل دسترسی هستند.)

برای فراخوانی به صورت دستی باید از شورت کد rel=”gallery” کمک بگیرید مانند نمونه زیر: