FooBox افزونه نمایش لایت باکس تصاویر در وردپرس
لایت باکس (Lightbox) یک تکنیک جاوا اسکریپت است که برای نمایش تصاویر در یک باکس یا جعبه استفاده می شود. در دنیای وردپرس، معمولاً با گالری ها مرتبط است. به این صورت که وقتی کاربر روی تصویر گالری کلیک می کند، تصویر در یک جعبه پاپ آپ ظاهر می شود و بقیه صفحه تاریک می شود تا تصویر برجسته و هایلایت شود. FooBox افزونه ای است که به شما امکان می دهد از لایت باکس برای تصاویر، فیلم ها، HTML و موارد دیگر استفاده کنید.
لایت باکس ها در انواع دیگر وب سایت ها هم استفاده می شوند. به عنوان مثال، بسیاری از فروشگاه های آنلاین از روش لایت باکس برای برجسته سازی تصاویر محصول استفاده می کنند.
شما می توانید لیستی از افزونه های گالری ساز وردپرس که بعضی از آنها قابلیت لایت باکس را هم دارند، در مقاله بهترین افزونه های گالری ساز وردپرس مشاهده کنید.
لایت باکس یک روش کاربرپسند برای نمایش تصاویر است. با وجود گالری تصاویر بسیار مقدماتی و پایه ای که به صورت پیش فرض برای وردپرس تعبیه شده است که سیستم آن به این صورت است که کاربر باید روی تصویر کلیک کرده تا آن را به صورت کامل مشاهده کند، سپس روی دکمه بازگشت کلیک کند تا به گالری برگردد و پس از آن روی تصویر بعدی کلیک کند، لایت باکس به کاربر امکان می دهد تا با کلیک کردن به چپ و راست روی گالری، به مرور محتوا بپردازد.
Foobox یکی از پیشرفته ترین افزونه های لایت باکس وردپرس است. این افزونه دارای بسیاری از ویژگی های مفید و همچنین طراحی پاسخگو است که در دسکتاپ ها، تبلت ها و موبایل ها عالی به نظر می رسد.
به هر تصویر بارگذاری شده یک URL منحصر به فرد داده می شود. این ویژگی به بازدیدکنندگان امکان می دهد تصاویر شما را در سرویس های محبوب شبکه های اجتماعی مانند فیسبوک و توییتر به اشتراک بگذارند.
افزونه FooBox از گالری پیش فرض وردپرس و همچنین از پلاگین های محبوب وردپرس شامل افزونه FooGallery، پلاگین Justified Image Grid، افزونه Jetpack و افزونه NextGEN Gallery پشتیبانی می کند.
نکته جالب توجه این است که Foobox فقط برای تصاویر کاربرد ندارد. شما می توانید از این افزونه برای فیلم و HTML هم استفاده کنید. به عنوان مثال می توانید از آن برای نمایش برجسته تر فیلم های یوتیوب یا نمایش باکس ثبت نام خبرنامه خود استفاده کنید.
در این مقاله افزونه FooBox را آموزش داده و نحوه استفاده از آن را بررسی می کنیم.
آموزش افزونه 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 را مطالعه کنید.
پس از اینکه گالری موردنظر خود را با افزونه 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>
جمع بندی
افزونه Lightbox & Modal Popup WordPress Plugin – FooBox یک افزونه قدرتمند و محبوب برای نمایش لایت باکس تصاویر در وردپرس است. این افزونه از گالری پیش فرض وردپرس، گالری های ساخته شده با افزونه FooGallery، NextGen Gallery و Jetack پشتیبانی می کند. همچنین می توانید لینک تصاویر را به صورت لایت باکس نمایش دهید.
امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.
دانلود افزونه
دیدگاه ها