• knife set
  • feed




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

    กลับมากับเรื่องของดรูปัล (Drupal) ครับ โดยคราวนี้จะมาแนะนำการใช้งานและติดตั้ง แคเรอเซล (carousel) หรือบางคนก็เรียก แถบเลื่อนบ้าง หรือฟังก์ชันสไลด์โชว์เลื่อนบ้าง โดยใครนึกไม่ออกลองดูตัวอย่างได้ที่  

    เข้าไปดูแล้วคงอ๋อกันทันที โดยส่วนแคเรอเซลก็คือส่วนที่มันวิ่งไปมาเหมือน ม้าหมุน (แคเรอเซลในภาษาอังกฤษ) โดยปัจจุบันเว็บส่วนใหญ่ก็ใช้เทคนิคนี้กันเยอะโดยใช้งานผ่าน jQuery กัน แต่คราวนี้ผมจะมาอธิบายการติดตั้ง ซึ่งไม่ยาก(อีกแล้ว) โดยไม่ต้องมีพื้นความรู้จาวาสคริปต์ หรือแม้แต่ jQuery แต่อย่างใด แต่จะใช้พื้นความรู้ด้าน CSS บ้างนิดหน่อย

    ก่อนจะเริ่มหากใครยังไม่รู้จัก Views แนะนำให้ย้อนกลับไปอ่านตอนที่ผ่านมาที่ รู้จักกับ Views [8 มิ.ย. 52] เพื่อป้องกันการงงของตัวท่านเอง โดยหลังจากที่ได้ติดตั้งดรูปัลเรียบร้อย และติดตั้งมอจูล Views กับ Views Carousel และ jCarousel เสร็จแล้วก็พร้อมจะเริ่มกันเลย ซึ่งก่อนหน้าที่จะเริ่มบางคนอาจจะแปลกใจว่าทำไมถึงใช้ Carousel รุ่น dev ทำไมถึงไม่รอตัวเต็มก่อน ซึ่งอธิบายไว้เลยว่าตัวนี้ของดรูปัลเอง หลายปีผ่านไปก็ยังเป็นรุ่น dev อยู่ ซึ่งมีออกมาทั้ง 1.x-dev และ 2.x-dev แล้ว ยังไม่เป็นตัวเต็มซักที แต่ทว่าก็ใช้งานได้ดีไม่มีปัญหา

    โดยวิธีการทำจะแบ่งเป็น 2 ส่วนหลักคือ (1) เซ็ตค่าวิวส์และคอนฟิกตัวแคเรอเซล และ (2) เขียนปรับ CSS ให้มันขนาดได้พอเหมาะกับเว็บที่เราต้องการ


    (1)  เซ็ตค่าวิวส์และคอนฟิกตัวแคเรอเซล 

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

    • Display - เลือกเป็น Block เพราะต้องการมาเป็นบล็อกแสดงหน้าแรก
    • Style - Views Carousel เลือกชนิดนี้มา (เดี๋ยวการคอนฟิกจะอธิบายในหัวข้อถัดไป
    • Item to displays - 5 - ให้แสดงแค่ 5 พอ ป้องกันไม่ให้โหลดเยอะเกินไป
    • Fields - อันนี้เซ็ต CCK พิเศษไว้เป็นภาพขนาดเดียวกันหมด เพื่อแสดงผลในหน้าแรก โดยในเว็บนี้เซ็ตขนาดไว้ที่ 960x300 พิกเซล และเมื่อกดแล้วจะให้ลิงก์ไปที่หน้านั้นๆ
    • ส่วนอื่นๆ อย่าง sort criteria หรือว่า filter อันนี้ก็เซ็ตไว้ให้เรียงลำดับกับเลือกผลตามที่ต้องการ 
    • ... โดยทั้งหมดก็แสดงตามภาพด้านล่าง

     ถัดมาเราก็จะคอนฟิกตัวแคเรอเซลกัน โดยกดเข้าไปตรงเครื่องหมายรูปเฟืองถัดจาก Style โดยของผมเซ็ตค่า ดังนี้

    • Grouping field - None - ไม่กรุ๊ปอะไรไว้ด้วยกัน
    • Skin - IE7 (อันนี้เป็นเทคนิคเล็กน้อย คือเราจะไม่เลือก custom เพราะจะวุ่นวาย แต่เราจะเขียน CSS ทับไปกับสกินเดิมเลย
    • First item to start on - 1
    • The number of items to scroll by - 1  (ส่วนนี้จะเลื่อนที่ละหนึ่งภาพ หากใครอยากให้เลื่อนทีละ 2 หรือ 3 ภาพ ก็ต้องมาเซ็ตส่วนนี้)
    • Speed of animation - slow (บางทีเร็วแล้วปวดหัว อันนี้แล้วแต่ความชอบ)
    • Auto scrolling - 5 (อันนี้เซ็ตไว้ว่า 5 วินาที จะให้มันเปลี่ยนภาพเอง)
    • Auto pause - yes - (ส่วนนี้จะให้มีการหยุดอัตโนมัติ)
    • Wrap content - both - (ส่วนนี้ถ้าเลือก both เมื่อหมุนถึงภาพสุดท้าย จะกลับมาที่ภาพแรกใหม่ โดยวิ่งย้อนกลับ โดยตัวเลือกอื่น เช่น disabled จะไม่มีการย้อน, first กับ last จะย้อนเฉพาะปลายด้านใดด้านหนึ่ง, circular จะวนกลับมาภาพแรก แต่จะหมุนวิ่งทิศทางเดิม) 
    • ... โดยทั้งหมดก็จะตามภาพด้านล่าง 

     

     เพียงแค่นี้เราก็จบส่วนแรก แล้วเราก็จะได้ block ที่เป็นแคเรอเซลแล้วพร้อมเอาไปแสดงในหน้าแรก หรือหน้าไหนก็ตาม แต่ทว่า พอเอาไปใส่เข้าจริงๆ หน้าตามันจะประหลาด เพราะต้องปรับแต่ง CSS อีกต่อหนึ่ง ซึ่งจะอธิบายในเอนทรีถัดไปครับ http://itshee.exteen.com/20100728/carousel-drupal-1

    Hot! Hot! Hot! Hot! Hot!
    แปะดาวก่อน ยังไม่อ่าน รอเรื่องนี้มานานแล้วครับ แต่ตอนนี้ง่วงขนาด

    #1 By mahaoath on 2010-07-28 23:27