FAQ

<p>

FAQ

ตั้งค่า effect และช่วงเวลาเปลี่ยนภาพโมดูล Slideshow

โมดูล Slideshow ที่ติดตั้งมาพร้อมกับ Opencart Standard ถือเป็นโมดูลสำคัญอันดับต้น ๆ เพราะถือเป็นหน้าเป็นตาของเว็บไซต์ ตัว Slideshow ที่ติดตั้งมาเป็นของ nivo silder ซึ้งเป็นสไลด์ยอดนิยมในระบบ CMS แทบจะทุกตัว เช่น wordpress drupal joomla ลองตามไปเยี่ยมชมเว็บผู้พัฒนาได้ครับ http://dev7studios.com/plugins/nivo-slider/

สำหรับสไลด์ที่ติดมากับระบบ opencart จะสังเกตุว่า effect การเปลี่ยนภาพ จะมี effect ที่แตกต่างกันไปในแต่ล่ะภาพ เช่นบางครั้งจะเปลี่ยนภาพแบบค่อย ๆ จางหายไป หรือค่อย ๆ ปรากฏภาพโดยเลื่อนจากซ้ายไปขวา จากบนลงล่าง ซึ้งมีรูปแบบที่ไม่แน่นอนเนื่องจากค่า default เป็นการแสดงผล effect แบบสุ่มมาแสดง ซึ้งในบางครั้งก็ขัดใจเราเนื่องจากไม่เข้ากับธีมของเว็บ หรือเปลี่ยนภาพเร็วไป ซึ้งผู้ใช้ไม่สามารถเข้าไปตั้งค่าได้ ในบทความนี้ผมจะมาแนะนำวิธีควบคุมการแสดงภาพ effect ในแบบที่เราต้องการแทนที่จะเป็นการแสดงแบบสุ่ม รวมถึงการกำหนดช่วงเวลาในการเปลี่ยนภาพ โดยเข้าไปเพิ่ม Script สั้น ๆ ครับไม่ยากเลย

ก่อนอื่นต้องมาดูว่า effect ของ nivo slider มีอะไรบ้าง ทั้งหมดมีอยู่ 16 effect (จัดกลุ่มจะได้ 5 แบบหลัก ๆ)
random
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

ใน 16 effect ก็จะแบ่งได้เป็น 5 แบบดังนี้ครับ

แบบที่1 Slice จะเปลี่ยนภาพในลักษณะการเฉือนออกเป็นเเท่งสี่เหลี่ยมในแนวตั้งไล่ขนาดจากเล็กไปใหญ่ โดยเลือกได้ว่าจะให้เฉือนจากบนล่าง ซ้ายไปขวา ตรงกลาง(บนล่างพร้อมกัน)

แบบที่ 2 box จะเปลี่ยนภาพในลักษณะของกล่องสี่เหลี่ยม โดยเลือกการแสดง effect ได้เป็นแบบสุ่ม (ขนาดจะแตกต่างกัน) จากซ้ายไปขวา ขวามาซ้าย ซ้ายไปขวาและเพิ่มขนาดบ๊อกจากเล็กไปใหญ่

แบบที่3 Slide เลื่อนทั้งภาพจากซ้ายไปขวา ขวามาซ้าย

แบบที่ 4 Fade ค่อย ๆ จางทั้งภาพโดยภาพถัดไปจะค่อย ๆปรากฏขึ้นมา

แบบที่ 5 Fold เปิดออกแบบม่านมูลี่ในแนวตั้ง

นอกจาก effect แล้วเรายังสามารถกำหนดช่วงระยะเวลาในการเปลี่ยนภาพและหยุดได้ภาพได้ โดยตัวแปรที่ใช้ส่งค่าคือ

animSpeed: 500, ----> ถ้าต้องการให้ภาพสไลด์เปลี่ยนช้าก็เพิ่มตัวเลขให้เยอะเข้าไว้ครับ หน่วยคือ ms
pauseTime: 3000, ----> ถ้าต้องการให้หยุดรอก่อนเปลี่ยนภาพสไลด์ถัดไปก็เพิ่มตัวเลขให้เยอะเข้าไว้ หน่วยคือ ms

การนำไปใช้งาน
ให้เข้าไปที่ ----> pathที่ติดตั้ง/catalog/view/theme/theme-ที่ใช้งาน/template/module/slideshow.tpl

เปิดไฟล์ ด้วย text editor (ใช้ notepad ก็ได้ครับ)
จะเจอะ Script ประมาณนี้ ส่วนที่ทำไฮไล์สีแดงคือ javascript ที่ใช้สั่ง run slide ส่วนตรงลูกศรสีแดงในวงเล็บนั่นคือส่วนที่เราจะแทรก code ตัวแปรส่งค่าให้กับสไลด์ทำงานตามที่เราต้องการ

สำหรับ Code ที่ผมแทรกเข้าไปมีทั้งหมด 3 บรรทัด อยู่ภายในวงเล็บปีกกา(อย่าลืมใส่วงเล็บปีกกาด้วยนะครับ) โดยการแทรกพิมพ์แทรกเข้าไปในวงเล็บรูปแรกด้านบนได้เลยครับ

บรรทัดแรก effect: ที่ใช้คือ Boxraingrowreverse

บรรทัดที่สอง animSpeed: ผมตั้งเป็น 1000 ms (ปกติจะ default อยุ่ที่ 500 ซึ่งค่อนข้างจะเร็วไปนิดนึง )

บรรทัดที่สาม pauseTime: ผมตั้งเป็น 5000 (ปกติจะ default อยุ่ที่ 3000 ก็ประมาณเกือบ 1 วินาทีจะหยุดรอก่อนเปลี่ยนสไลด์ถัดไป )

หลังจาก save แล้วรองรีเฟรซหน้าจอก็จะเห็นผลการเปลี่ยนแปลงทันที