• knife set
  • feed




    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 แน่ครับ ซึ่งหากคุณนำไปปรับใช้ ก็ต้องแก้ค่าตรงนี้ทั้งหมดให้ตรงกับบล็อกของคุณ 

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

    สุดยอดเลยครับ แต่ลองทำเวปด้วยตัวเองครับ เกี่ยวกับการศึกษา แล้ว carousel ที่ทำมันโชว์แค่ที่ละรูปครับ ไม่รู้ว่าต้องเข้าไปแก้ตรงไหนดีครับ

    #4 By Dexa (124.122.163.36) on 2010-09-28 23:25

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

    #3 By manop on 2010-07-30 15:43

    ต้องทำความเข้าใจอีกหลายๆ รอบ แต่มีประโยชน์มากๆ ครับ สาธุHot!

    #2 By mahaoath on 2010-07-29 20:34

    ขอบคุณครับ

    #1 By การ์ตูน (124.121.200.35) on 2010-07-28 20:46