ติดตั้ง Carousel ใน Drupal (ตอนจบ)

posted on 28 Jul 2010 19:57 by itshee

Drupal: 6.x
MODULES ที่ใช้:
* Views 6.x-2.x
* Views carousel 6.x-2.x-dev
* jCarousel 6.x-1.x

คราวนี้ก็มาต่อกันเรื่องทำแคเรอเซล (Carousel) กันครับ โดยหลังจากตอนที่แล้วที่ แนะนำการเซ็ตวิวส์ไปในตอนแรก คราวนี้ก็จะกลับมาต่อด้วยการเขียน CSS ให้มันเหมาะกับตำแหน่งที่เราต้องการ โดยตัวอย่างนี้ก็เอามาจากเว็บที่เคยทำไว้ปีก่อน หากใครไม่คุ้นกับแคเรอเซลอาจลองแวะดูได้ที่ http://www.promptcontract.com ซึ่งแคเรอเซลก็คือตัวที่วิ่งไปมานั่นเอง

โดยเราจะทำการโอเวอไรต์ CSS เอา แทนที่จะไปสร้าง custom theme โดยการนำโค้ดในหน้านี้ไปใส่ไว้ใน CSS หลักของธีม ในส่วนล่างของ style.css ซึ่งโค้ดทั้งหมดนี้ ก็เป็นโค้ดที่ใช้จากเว็บ PromptContract.com โดยโค้ดจะมีดังนี้

#block-views-front_carousel-block_1 .jcarousel-container {
  background: transparent;
  border: 0;
  height: 300px;
  overflow: hidden;
  padding: 2px 0 5px;
  width: 960px;
}

ก่อนอื่น เราต้องรู้ก่อนว่าบล็อกของเราจะอยู่ในชื่อไอดีไหน โดยตรวจสอบด้วยไฟร์บั๊ก (Firebug) พอทราบว่าไอดีเราคือ #block-views-front_carousel-block_1 เราก็จะกำหนดขนาดของ container ก่อน โดยมีส่วนที่สำคัญคือ

height กับ width - อันนี้เป็นขนาดของแคเรอเซลของเรา โดยเว็บผมใช้ 300px และ 960px ตามลำดับ อันนี้ก็ปรับแก้กันตามเหมาะสม
overflow - เซ็ต hidden ไว้ เพื่อไม่ให้ทุกอย่างที่ออกนอกกรอบแสดงผล
border - 0 อันนี้เซ็ตไว้ไม่ให้มีขอบ ซึ่งหากใครต้องการให้มีขอบ ก็อย่าลืมคำนวณ height กับ width ใหม่ ให้พอดีตามที่ต้องการ

#block-views-front_carousel-block_1 .jcarousel-clip {
height: 300px;
width: 960px;
}

ถัดมาก็เป็นส่วน clip อันนี้ก็เป็นส่วนด้านในของแคเรอเซล ซึ่งผมเองไม่ได้เซ็ต margin กับ padding ก็เลยเซ็ตขนาดเท่ากับ jcarousel-container พอดี

#block-views-front_carousel-block_1 .jcarousel-item {
height: 300px;
}

ถัดมาก็เป็นตัว item ก็เป็นของหนึ่งชิ้นภายใน ตรงนี้ผมเซ็ตให้แสดงผลทีละ 1 ชิ้น ก็กำหนดความสูงเท่าเดิมไปเลย คือ 300px (หากต้องการเซ็ตแคเรอเซลแนวตั้ง ตัวนี้ต้องเซ็ต width แทน height) ซึ่งตรงนี้หากต้องการแสดง 2 ชิ้น หรือ 3 ชิ้น ภายใน container ก็ต้องนำมาหารและแบ่งขนาดเว้นเผื่อ margin กับ padding ไว้ ก็คำนวณเพิ่มนิดหน่อย

#block-views-front_carousel-block_1 ul {
  margin: 0;
  padding: 0;
} #block-views-front_carousel-block_1 li {   border: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ส่วน ul กับ li นี่เราก็รีเซ็ต margin กับ padding ไว้ที่ 0 โอเวอร์ไรต์ค่าเดิมของมัน

#block-views-front_carousel-block_1 .jcarousel-prev-horizontal {
  background: transparent url(images/jc-prev.png) no-repeat left center;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 145px;
  width: 24px;
} #block-views-front_carousel-block_1 .jcarousel-next-horizontal {
  background: transparent url(images/jc-next.png) no-repeat right center;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 145px;
  width: 24px;
}

สองส่วนนี้จะเป็น ปุ่มเดินหน้าและถอยหลังของแคเรอเซล โดยเรากำหนด position เป็น absolute ให้อ้างอิงกับขอบของ container โดยกำหนด left/top/right ตามต้องการ ส่วนภาพที่ใช้ก็เป็นภาพที่เราสร้างขึ้นมาว่าอยากให้แสดงผลแบบไหน

#block-views-front_carousel-block_1 .jcarousel-prev-horizontal:hover {
background-position: right center;
}
#block-views-front_carousel-block_1 .jcarousel-next-horizontal:hover {
background-position: left center;
}

และสุดท้ายคือเซ็ตให้ปุ่มเปลี่ยนภาพในสถานะ hover อันนี้ก็เป็นเทคนิคของ CSS นิดหน่อยที่ขยับพื้นหลังโดยใช้ภาพเดิม หากใครงงตรงนี้ ลองดูตัวอย่างภาพได้ที่

เพียงแค่นี้ก็เซฟ CSS ได้ ดูเหมือนจะยาว แต่โค้ด CSS มีไม่ถึง 50 บรรทัด พอหลังจากนี้เราก็นำไปแสดงผลใน block โดยเลือก site building -> block แล้วก็นำมาแสดงตามตำแหน่งที่ต้องการ ก็จะได้แคเรอเซล อย่างไม่ยากเย็นนัก โดยไม่ต้องไปยุ่งกับโค้ดจาวาสคริปต์แต่อย่างใด

โดยที่สำคัญมาก ที่ลืมกันบ่อยคือ ไอดีของบล็อกของคุณจะไม่ใช่ #block-views-front_carousel-block-1 แน่ครับ ซึ่งหากคุณนำไปปรับใช้ ก็ต้องแก้ค่าตรงนี้ทั้งหมดให้ตรงกับบล็อกของคุณ

หากใครมีคำถามหรือข้อสงสัย หรือตรงไหนที่อธิบายไม่ชัดเจน ถามได้ในคอมเมนต์ครับ แล้วจะมาตอบครับ ขอบคุณที่ตามอ่าน