ساختن اسلایدر در تم دروپال با پلاگین jQuery Cycle

اسلایدر در تم دروپال با jQuery Cycle

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

پلاگین jQuery Cycle

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

افزودن فایل jQuery cycle به فایل های تم دروپال

ممکن است یکی از فایل های jquery.cycle.all.js یا jquery.cycle.all.min.js را از این سایت دانلود کرده باشید. این فایل را در فولدر تم مورد نظر بریزید. اگر مایل هستید فایل های جاوا اسکریپت را به صورت مرتبط در یک فولدر قرار دهید، می توانید یک فولدر به نام js یا هر نام مناسب دیگری، در فولدر اصلی تم بسازید و فایل jQuery Cycle را نیز در آن قرار بدهید. برای نمونه در اینجا، من فایل jquery.cycle.all.min.js را در فولدر js از تم drupalika قرار می دهم.

معرفی فایل جاوا اسکریپت به تم دروپال

معرفی فایل جاوا اسکریپت به تم دروپال

برای اینکه فایل jQuery Cycle به صفحات سایت ضمیمه شود، باید آن را به تم معرفی کنید. برای این کار باید فایل info تم را ویرایش کنید.

خط جدیدی را به این شکل در فایل .info اضافه می کنم:

scripts[] = js/jquery.cycle.all.min.js

توجه کنید که مسیر دقیق فایل جاوا اسکریپت نسبت به فولدر اصلی تم را باید در اینجا قرار بدهید. چون فایل جاوا اسکریپت در فولدر js قرار دارد و فولدر js درون فولدر اصلی تم قرار گرفته، پس مسیر آن را به صورت js/jquery.cycle.all.min.js نوشتم.

برای اینکه این تغییر واقعا اعمال شود باید یکبار cache ها را پاک کنید. برای این کار به صفحه مدیریتی کارآیی یا performance در پیکربندی بروید و دکمه Clear cache (پاکسازی تمام حافظه های موقت) را کلیک کنید.

خوب! از این به بعد اسکریپت jQuery Cycle به تمام صفحاتی که تم مورد نظر از آن استفاده می کند، ضمیمه می شود.

آماده کردن محتوای اسلایدر در تم دروپال

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

آماده کردن محتوای اسلایدر در تم دروپال

در محل مناسبی از فایل page.tpl.php در تم، کد های لازم برای اسلایدر را می نویسم.

<div id="drupalika-slider">
  <img src="<?php print path_to_theme(); ?>/slider/1.jpg" alt="1.jpg" />
  <img src="<?php print path_to_theme(); ?>/slider/2.jpg" alt="2.jpg" />
  <img src="<?php print path_to_theme(); ?>/slider/3.jpg" alt="3.jpg" />
  <img src="<?php print path_to_theme(); ?>/slider/4.jpg" alt="4.jpg" />
  <img src="<?php print path_to_theme(); ?>/slider/5.jpg" alt="5.jpg" />
</div>

برای راه اندازی اسلایدر باید تمام المان های داخل اسلایدر را درون یک تگ مثل div قرار بدهیم. برای دسترسی به آن بهتر است یک id نیز تعریف کنیم.

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

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

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

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

$("#drupalika-slider").cycle();

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

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

افزودن قطعه کد های جاوا اسکریپت در تم دروپال

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

برای نمونه من یک فایل به نام drupalika.js به همان فولدر js اضافه کردم و به فایل info تم نیز خط جدیدی برای معرفی این فایل js اضافه کردم.

scripts[] = js/drupalika.js

در مرحله بعد باید تابع cycle را در زمان لود صفحه صدا بزنیم. با اینکه می توانید از تابع ready که مربوط به jQuery است استفاده کنیم ولی در دروپال راه استانداردی برای اجرای یک اسکریپت در زمان لود صفحه مشخص شده است که بهتر است بر اساس آن عمل کنیم. به نمونه کد زیر دقت کنید:

(function($) {
  Drupal.behaviors.drupalika = {
    attach: function() {
      $("#drupalika-slider").cycle();
    }
  };
})(jQuery)

همانطور که دیده می شود، یک آبجکت جدید به Drupal.behaviors می افزائیم و یک نام مناسب که احتمالا توسط ماژول و یا تم دیگری استفاده نشده است نیز برای آن انتخاب می کنیم. مثلا من در اینجا از drupalika استفاده کرده ام. برای این آبجکت تابع attach را پیاده سازی می کنیم. به این صورت دروپال در زمان لود صفحه این تابع را صدا زده و کد های آن اجرا می شود. مشاهده می کنید که تابع cycle را در این قسمت فراخوانی کرده ایم تا تگی که ID آن drupalika-slider است را به یک اسلایدر تبدیل کند.

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

نظرات

تصویر nasim.ranjbar

This is a great useful article.
Thanks for your professional website.

تصویر admin
ممنون نسیم خانم! لطف دارید.

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

با تشکر

تصویر admin
ممنون پژمان جان! نظر لطفت است. حتما در مورد پیشنهاد هایی که مطرح کردی مطالبی در آینده در دروپالیکا خواهم نوشت.

واقعا جای تحسین داره ، که اینقدر واضح و راحت مقاله مینویسید ، بگونه ای که هر کسی با اندک اطلاعات موضوع بحث رو متوجه میشه ، این بدین معنی که شما هم در کارتون علاقمند هستید و هم استاد .

امید وارم که مطالب بیشتری از شما دوست عزیز یادبگیرم

با تشکر

بسیار عالی بود
تشکر فراوان

دهها احسنت بخاطر آسان نویسی و سهل الفهم بودن برای همگان

ارسال نظر