نمایش بهتر تصاویر در دروپال با ماژول Colorbox

نمایش بهتر تصاویر در دروپال با ماژول Colorbox

پلاگین جی‌کوئری کالرباکس برای نمایش لایت‌باکس

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

پلاگین جی‌کوئری کالرباکس برای نمایش لایت‌باکس

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

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

استفاده از پلاگین colorbox در دروپال با ماژول colorbox

ماژول Colorbox، امکان استفاده از پلاگین یاد شده را در دروپال فراهم می کند. برای نصب این ماژول در دروپال باید گام های زیر را طی کنید:

  1. فایل فشرده ماژول Colorbox را از سایت دروپال دانلود کنید.
  2. فایل پلاگین جی‌کوئری کالرباکس را از سایت این پلاگین دریافت کنید.
  3. فایل فشرده ماژول کالرباکس را در فولدر ماژول های سایت دروپالی خود (sites/all/module)، از حالت فشرده خارج کنید.
  4. فایل فشرده پلاگین را در فولدر کتابخانه های کد (sites/all/libraries)، از حالت فشرده خارج کنید. به این صورت باید در فولدر libraries یک فولدر به نام colorbox داشته باشید که فایل jquery.colorbox.js و البته سایر فایل ها و فولدر های کالرباکس درون آن قرار دارد.
  5. ماژول colorbox به ماژول Libraries وابستگی دارد. بنابراین در صورتی که ماژول Libraries را ندارید، این ماژول را نیز دریافت و نصب کنید.
  6. اکنون به صفحه مدیریت ماژول های سایت دروپالی خود رفته، نام ماژول colorbox را بیابید و آن را فعال و نصب کنید.

تنظیمات ماژول colorbox

برای مشاهده تنظیمات این ماژول به صفحه پیکربندی (Configuration)، بروید. در گروه Media روی لینک Colorbox کلیک کنید تا وارد صفحه تنظیمات کالرباکس بشوید.

تنظیمات ماژول colorbox

ماژول کالر‌باکس، امکان انتخاب نحوه نمایش کالرباکس را در فیلد های تصویری فراهم می کند. هر جا بخواهید از فیلد های تصویری استفاده کنید (در نمایش محتوا یا سایر entity ها، در پنل ها، در view ها و ...) امکان انتخاب نمایش کالرباکس را دارید.

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

در گروه Styles and options می توانید شکل نمایشی کالرباکس را انتخاب کنید.

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

در نهایت باید تنظیمات انتخاب شده را ذخیره کنید.

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

همانطور که در بخش قبل بیان شد، ماژول colorbox امکان نمایش کالرباکس را به فیلد های تصویری دروپال اضافه می کند. این ماژول یک فیلد فورمتر جدیدی برای فایل های تصویری ایجاد می کند.

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

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

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

از قسمت Content image style، می توانید استایل یا سبک نمایش تصویر در صفحه را مشخص کنید. در قسمت Content image style for first image می توانید سبک نمایش اولین تصویر برای یک فیلد تصویری چندمقداری را تعیین کنید. در Colorbox image style سبک نمایش تصویر در لایت باکس را می توانید تعیین کنید.

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

دو تنظیم دیگر هم داریم که Gallery image grouping و Caption هستند. اولی مربوط به فعال کردن نحوه نمایش گالری در لایت‌باکس و دومی تنظیم عنوان تصویر در داخل لایت‌باکس است.

برای نمونه در محتوای زیر، تصویر به صورت کوچک دیده می شود.

نمایش فیلد تصویر در محتوای دروپال

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

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

ارسال نظر