How to create an drop-down advertisement banner with jQuery in Drupal

Keywords: 
how to create an drop-down advertisement banner, jQuery in Drupal
Research Detail: 

Website တွေရဲ့ထိပ်မှာ Ad Banner တွေ တင်ထားကြတာကို မြင်ဖူးကြမှာပါ။ Mouse hover လုပ်လိုက်ရင် Drop Down လေး ကျလာမှာပေါ့။ အဲဒီလိုမျိုးလေး ကျွန်တော်တို့ Drupal မှာ Tutorial လုပ်ကြည့်ရအောင်။ အရင်ဆုံး ဘာ module ဒေါင်းရမလဲဆိုတော့ ဘာ module မှ မဒေါင်းရဘူးခင်ဗျ :D ။ Module ထည့်စရာ မလိုပါဘူး။ jQuery ကို သုံးမှာ မို့လို့ပါ။ ကျွန်တော်တို့ အသုံးပြုချင်တဲ့ jQurey Plugin လေးက တော့ ...

Adding Script

$( ".top_ad" ).mouseleave(function(){
$( ".top_ad" ).animate({width:"960px", height:"100px"}, {queue: false, duration: 500 })
.animate({fontSize: "12px" }, 1500 )});
$( ".top_ad" ).mouseenter(function(){
$( ".top_ad" ).animate( { width: "960px", height: "350px"}, { queue: false, duration: 500 }) .animate({ fontSize: "12px" }, 1500 ) });

ရှင်းရှင်းလေးပါ။ top_ad ဆိုတဲ့ class ပေါ်ကို mouse enter ဖြစ်သွားရင် height က 350px ဖြစ်သွားပြီးတော့ mouse leave ဆိုရင် နဂိုအနေအထား height 100px ပြန်ဖြစ်သွားပါမယ်။ အဲဒီ script လေးကို save လိုက်ပါ။ ဘယ်မှာ save ရမလဲဆိုတော့ sites/all/themes/YourTheme/js folder အောက်မှာ top_ad.js ဆိုပြီး save လိုက်ပါ။ YourTheme နေရာမှာ သင်အသုံးပြုနေတဲ့ Theme အမည်ကို ပြောင်းထည့်ပါ။ ကျွန်တော် ဖတ်ဖူး၊ မှတ်ဖူးတဲ့ Tutorial လေးတစ်ခုမှာတော့ Drupal မှာ jQuery ထည့်ချင်တဲ့အခါ

jQuery(document).ready(function($) { }

လေးထဲမှာ ကိုယ်ထည့်ချင်တဲ့ script တွေ သွားထည့်ပေးတယ်ဗျ။ ဒီ Tutorial မှာ တော့ စာဖတ်သူ သဘောပါ။ အပေါ်ကအတိုင်းပဲရေးရေး၊ ဒီလို

jQuery(document).ready(function($) { $( ".top_ad" ).mouseleave(function(){ $( ".top_ad" ).animate({width: "960px", height: "100px" }, { queue: false, duration: 500 }) .animate({ fontSize: "12px" }, 1500 ) });
$( ".top_ad" ).mouseenter(function(){ $( ".top_ad" ).animate( { width: "960px", height: "350px"}, { queue: false, duration: 500 }) .animate({ fontSize: "12px" }, 1500 )}); }

ပဲ ရေးရေး Run ပါတယ်။

Tell template.php

jQuery လေးတော့ ရေးပြီးပါပြီ။ ဒါပေမယ့် မ Run သေးပါဘူး။ ဒီ jQuery လေး ထည့်မယ်ဆိုတာကို Drupal က သိအောင် ပြောပြပေးရပါမယ်။ ဘယ်မှာပြောရမလဲဆိုတော့ template.php မှာ သွားပြောရပါမယ်။ template.php က sites/all/themes/YourTheme/template.php မှာပါ။ ပြီးရင် ဒီဟာလေး ထည့်လိုက်ပါ။

drupal_add_js(drupal_get_path('theme', 'YourTheme') .'/js/top_ad.js');

YourTheme ကတော့ အပေါ်မှာ ပြောပြီးပြီနော်၊ အောက်မှာ ထပ်မပြောတော့ဘူး၊ ဒက်လိုက်တော့ :D

Write on page.tpl.php

jQuery လည်း ရေးပြီးပြီ။ template.php မှာလည်း ယူသုံးမယ်လို့ ခွင့်တောင်းပြီးပြီ :) ။ တကယ်ယူသုံးဖို့ပဲ ကျန်တော့တယ်။ သုံးဖို့အတွက် page.tpl.php မှာ သွားထည့်ပေးရပါတယ်။ page.tpl.php က sites/all/themes/YourTheme/templates/page.tpl.php မှာ ရှိပါတယ်။ အောက်မှာရေးထားတဲ့ script ကိုယ့် ဆိုဒ်ရဲ့ main_wrapper div (သို့) header wrapper div ရဲ့ အောက်ကို ကူးထည့်လိုက်ပါ။

<div class="top_ad">
    <?php       
      $theme_path = base_path() . drupal_get_path('theme', 'YourTheme');
    ?>   
      <img src="<?php print $theme_path; ?>/images/top_ad.jpg" />
 </div>

ကျွန်တော်ကတော့ page ရဲ့ ထိပ်မှာ ပေါ်စေချင်တဲ့အတွက် ထိပ်မှာ သွားထားလိုက်ပါတယ်။ အပေါ်ကရေးထားတဲ့ code ထဲမှာ ကိုယ့် theme ရဲ့ path လမ်းကြောင်းထဲက images ဆိုတဲ့ Folder အောက်မှာ top_ad.jpg ဆိုတဲ့ ပုံရှိနေရပါမယ်။ path လမ်းကြောင်းက sites/all/themes/YourTheme/images ပါ။ အဲဒီမှာ width 960px, height 350px ရှိတဲ့ ပုံတစ်ခုကို ထည့်လိုက်ပါ။

Styling

နောက်ဆုံးတစ်ခုပဲ ကျန်ပါတော့တယ်။ ကျွန်တော်တို့ အသုံးပြုတဲ့ top_ad ဆိုတဲ့ class အတွက် style ရေးပေးချင်တယ်ဆိုရင်ပေါ့ sites/all/themes/YourTheme/style.css မှာ

.top_ad{  }

ဆိုတဲ့ class မှာ ရေးပေးရုံပါပဲ။ ဒါဆိုရင်တော့ Tutorial ပြီးပါပြီ။ Demo ကြည့်ချင်ရင်တော့ www.tourismguide.com.mm ရဲ့ ထိပ်ကို ကြည့်လိုက်ပါခင်ဗျာ။

(note: online မှာ နဂို တင်ထားတဲ့ပုံကို ပြောင်းချင်တဲ့အခါ image name ကို ပြောင်းပေးပါ။ မဟုတ်ရင် ပုံအဟောင်းနေရာမှာ override လုပ်လိုက်ရင် browser မှာ ချက်ချင်းပေါ်မလာတာမျိုး ကြုံရတတ်ပါတယ်။)

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
အောက်ပါ တွက်ချက်မှုများ၏ အဖြေမှန်ကို မှန်အောင် ရေးပါ။
4 + 2 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Featured Articles