افزونه FooBox

افزونه FooBox

لایت باکس (Lightbox) یک تکنیک جاوا اسکریپت است که برای نمایش تصاویر در یک باکس یا جعبه استفاده می شود. در دنیای وردپرس، معمولاً با گالری ها مرتبط است. به این صورت که وقتی کاربر روی تصویر گالری کلیک می کند، تصویر در یک جعبه پاپ آپ ظاهر می شود و بقیه صفحه تاریک می شود تا تصویر برجسته و هایلایت شود.افزونه FooBox افزونه ای است که به شما امکان می دهد از لایت باکس برای تصاویر، فیلم ها، HTML و موارد دیگر استفاده کنید.از سری مقاله های آموزش رایگان طراحی سایت امروز به آموزش افزونه FooBox می پردازیم.

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

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

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

به هر تصویر بارگذاری شده یک URL منحصر به فرد داده می شود. این ویژگی به بازدیدکنندگان امکان می دهد تصاویر شما را در سرویس های محبوب شبکه های اجتماعی مانند فیسبوک و توییتر به اشتراک بگذارند.

افزونه FooBox از گالری پیش فرض وردپرس و همچنین از پلاگین های محبوب وردپرس شامل افزونه FooGallery، پلاگین Justified Image Grid، افزونه Jetpack و افزونه NextGEN Gallery پشتیبانی می کند.

نکته جالب توجه این است که افزونه Foobox فقط برای تصاویر کاربرد ندارد. شما می توانید از این افزونه برای فیلم و HTML هم استفاده کنید. به عنوان مثال می توانید از آن برای نمایش برجسته تر فیلم های یوتیوب یا نمایش باکس ثبت نام خبرنامه خود استفاده کنید.

آموزش افزونه FooBox و نمایش لایت باکس تصاویر در وردپرس

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

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

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

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

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

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

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

در قسمت آیا می خواهید فووباکس را متصل کنید به؟ تمام گزینه های گالری وردپرس، تصاویر وردپرس با زیرنویس و پیوست تصاویر به صورت پیش فرض فعال هستند. اگر نمی خواهید FooBox برای هریک از گزینه های فوق فعال باشد، کافی است تیک آن را برداشته و تغییرات را ذخیره کنید.

در قسمت تنظیمات نمایش می توانید گزینه های زیر را تنظیم کنید:

• مناسب برای صفحه نمایش: اگر این گزینه را فعال کنید، در صورتی که تصاویر کوچکتر از صفحه نمایش باشد آن را فیت می کند.
• پنهان کردن اسکرول های صفحه: با استفاده از این گزینه می توانید هنگام مشاهده لایت باکس FooBox اسکرول های صفحه را پنهان/ آشکار کنید.
• نمایش شمارنده: یک شمارنده تصویر را هنگام مشاهده گالری تصاویر درون لایت باکس قرار می دهد.
• Count Message: در این قسمت می توانید پیامی که برای نشان دادن شمارنده تصاویر در زیر لایت باکس استفاده می شود را سفارشی سازی کنید. به عنوان مثال می توانید از متن ” تصویر %index از %total” استفاده کنید که به صورت تصویر 1 از 7 نمایش داده می شود.
• Hide Captions: برای مخفی کردن کپشن ها این گزینه را فعال کنید.
• نمایش زیرنویس در شناور: با فعال کردن این گزینه، فقط با هاور موس کپشن نمایش داده می شود.
• پیغام خطا: در این قسمت می توانید یک پیام برای زمانی که در نمایش تصویر مشکلی وجود دارد تنظیم کنید.

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

به چند روش می توانید از افزونه FooBox استفاده کنید که در ادامه آموزش به بررسی آنها می پردازیم.

استفاده از افزونه FooBox برای گالری های ساخته شده با ویرایشگر گوتنبرگ وردپرس

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

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

افزونه FooBox به شما امکان می دهد برخی گالری های ساخته شده را از نمایش لایت باکس مستثنی کنید. برای این کار کافی است در سایدبار سمت چپ صفحه متاباکس FooBox Javascript &CSS را پیدا کرده و چک باکس موجود در آن را تیک بزنید.

نمایش لایت باکس تصاویر ساخته شده با افزونه FooGallery

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

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

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

شما می توانید از لینک های خود برای بازکردن تصاویر در افزونه FooBox استفاده کنید. برای این کار کافی است کلاس foobox را به لینک خود اضافه کنید و مطمئن شوید که لینک به یک تصویر اشاره دارد. به عنون مثال:

<a href="point/to/image.jpg" class="foobox">open with FooBox!</a>

کپشن ها

FooBox کپشن ها را از عنوان و لینک تصاویر پیدا می کند اما شما برای اطمینان بیشتر می توانید عنوان و توضیح کپشن را به ترتیب در اتربیوت data-caption-title و data-caption-desc به شکل مثال زیر اضافه کنید.

<a data-caption-title="A Caption Title" data-caption-desc="A
longer caption description" href="image1.jpg"
class="foobox">1</a>

همچنین می توانید تصاویر را گروه بندی کنید. برای این کار یک ویژگی rel را به تصاویری که در یک گروه قرار می گیرند، اضافه کنید. به عنوان مثال:

<a href="image1.jpg" class="foobox" rel="gallery">1</a>
<a href="image2.jpg" class="foobox" rel="gallery">2</a>
<a href="image3.jpg" class="foobox" rel="gallery">3</a>