แก้ไขปัญหาโมดูล JA VM Product Slider ไม่แสดงผล ใน 3 ขั้นตอน

JA-VM-Product-Sliderหลายคนที่ใช้ระบบ Joomla+VM ในการออกแบบเว็บไซต์นั้น มักจะเจอปัญหาในการเปิดใช้งานโมดูล JA VM Product Slider อยู่บ่อยๆ โดยเฉพาะมือใหม่นั่นเอง ซึ่งจะเจอปัญหาเหล่านี้อยู่ และยังหาวิธีแก้ไม่ได้สักที ปัญหาก็คือ เมื่อเราเปิดใช้งานโมดูล JA VM Product Slider แล้วไปดูการแสดงผลที่หน้าเว็บไซต์ ผลที่ออกมาคือความว่างเปล่าซะงั้น ดูเหมือนว่าจะไม่สามารถเปิดใช้งานโมดูลตัวนี้ได้แน่เลย ยกเว้นว่าจะเปิดโมดูล JA VM Product Slider ในตอนที่กำลังใช้เทมเพลต ja_larix อยู่เท่านั้น

จึงจะทำให้เจ้าโมดูล JA VM Product Slider แสดงผลออกมาถูกต้อง ที่นี่ก็เป็นปัญหาสำหรับเราๆละครับ ที่ต้องการที่จะใช้เทมเพลตตัวอื่นๆ แต่ก็ยังอยากจะใช้โมดูล JA VM Product Slider ร่วมด้วย ดังนั้น เรามาแก้ไขปัญหาตรงนี้กันครับ ง่ายๆ แค่ 3 ขั้นตอน ดังนี้ครับ

1. ดาวน์โหลดไฟล์ scripts.zip โดยคลิกดาวน์โหลดที่นี่ได้เลยครับ หลังจากดาวน์โหลดแล้ว ก็ให้คลายไฟล์ .zip แล้วก็อัพโหลด แฟ้ม scripts ขึ้นไปไว้ในเทมเพลตตัวที่กำลังใช้งานได้เลยครับ

 

2


2. เรียกใช้งาน สคริป ที่คัดลอกมา โดยการคัดลอกโค้ด ด้านล่างนี้

<script language="javascript" type="text/javascript" src="/เทมเพลต url/scripts/ja.script.js"></script>

ไปวางในไฟล์ index.php ของเทมเพลตที่เปิดใช้งานอยู่ โดยให้วางไว้ภายในแท็ก <HEAD> …</HEAD> เท่านั้น

3

 เมื่อวางโค้ดข้างต้นลงไปแล้ว ก็ให้แก้ไขตรง เทมเพลต url เสียด้วย โดยให้สังเกตโค้ด type="text/css" ตามรูปด้านล่าง ซึ่งจะมี โค้ด ซึ่งเป็น เทมเพลต url ระบุอยู่ด้วย ซึ่งแต่ละเทมเพลตอาจจะแตกต่างกัน ก็ให้คัดลอกโค้ดนั้นมาแทนที่คำว่า เทมเพลต url ในโค้ดที่เราได้ใส่เข้าไป

4

จากนั้นก็ให้บันทึกการแก้ไขทั้งหมด แล้วไปดูการแสดงผลที่หน้าเว็บ จะเห็นได้ว่างระบบเริ่มทำงานแล้ว แต่ว่าการแสดงผลก็ยังเพี้ยนๆอยู่ ก็ให้ไปดูต่อกันในขั้นตอนที่ 3 เลยครับ

 

3. แก้ไข CSS ของเทมเพลตที่กำลังใช้งานอยู่ โดยการเพิ่มโค้ดลงไป แล้วแก้ไขค่าต่างๆ ตามความเหมาะสม (เป็นการตั้งค่า การแสดงผลโมดูลในลักษณะแนวนอนนะครับ)

โค้ด

 

.addtocart_button {

 

text-indent: 0px;

 

}

/* JA slider */

#ja-sliderwrap {

       padding: 20px30px030px; /*background: url('/../images/slider-bg.gif') repeat-x top left #E6E6E6;*/

}

#ja-slider {

       margin: 0;

       padding: 0;

       height: 180px;

}

#ja-slider-center {

       margin: 0;

       padding: 0;

       float: left;

       text-align: center;

       

}

#ja-slider-left,

#ja-slider-right {

       float: left;

       width: 30px;

       position: relative;

}

#ja-slider-left img,

#ja-slider-right img {

       position: absolute;

       top: 55px;

       right: 0;

}

#ja-slider-center span {

       width: 100%;

       margin: 0;

       padding: 0;

       text-align: center;

}

#ja-slider-center img {

       margin: 0;

       padding: 0;

}

คัดลอกโค้ดด้านบนไปวางในไฟล์ /templates/เทมเพลตที่เปิดใช้งานอยู่/css/template.css (บางเทมเพลต ระบบอาจจะไม่ได้เรียกใช้ CSS จากไฟล์นี้ ก็ให้เราสังเกตในไฟล์ index.php ของเทมเพลตอีกครั้ง ตรงบรรทัด type="text/css" ว่าระบบได้เรียกใช้ CSS จาก template.css หรือไม่ หรือว่าเป็นไฟล์อื่น)

5

ต่อไปก็ให้แก้ไขค่า CSS โดยการแก้ไขนั้นจะทำไปพร้อมกับการตั้งค่าโมดูล ดังนั้นให้เปิดโมดูล JA VM Product Slider ขั้นมาด้วยเลยครับ

- กำหนดค่าความสูงของโมดูลที่ต้องการ ในช่อง Height of div และแก้ไข CSS ตรงหัวข้อ #ja-slider ค่า height:....px ให้ตรงกันด้วย

6

- กำหนดค่าความกว้างของแต่ละคอลัมน์ ในช่อง Width of div และกำหนด จำนวนคอลัมน์ที่ต้องการในช่อง Number Element (ค่า Width of div คูณ Number Element จะได้ความกว้างของโมดูล แต่จะไม่รวมความกว้างของลูกศรซ้าย-ขวา ซึ่งกว้างรูปละ 30 px ) ส่วนค่าอื่นๆ นั้น อาจจะทดสอบตั้งค่าตามรูปด้านล่างได้เลยครับ

8

7

- เมื่อตั้งค่าต่างๆและบันทึกเรียบร้อยแล้ว ต่อไปก็ให้ดูการแสดงผลที่หน้าเว็บว่าเป็นที่พอใจหรือยัง ถ้าการแสดงผลนั้นยังตกเป็น 2 บรรทัดอยู่ หรือ ยังแสดงผลไม่เต็มพื้นที่อยู่ ก็ให้ทดสอบ ลด หรือ เพิ่ม ค่า Width of div ดูได้เลยครับ แต่ถ้าเห็นว่าลูกศร ซ้าย-ขวา ไม่อยู่ในตำแหน่งกึ่งกลาง ก็ให้ไปปรับค่า CSS ตรงหัวข้อ #ja-slider-left img, #ja-slider-right img ได้เลยครับ โดยการทำการแก้ไขค่า top: 55px; ให้เป็น top: ระยะห่างจากขอบบนที่ต้องการ px;

9

หากถูกใจบทความ สามารถกด Like  ได้เลยนะครับ เพื่อเป็นกำลังใจในการเขียนบทความให้เพื่อนๆ ได้อ่านกันแบบนี้ต่อๆไปครับ

 
กลับไป
Joomla Templates
Joomla Extension
บทความ อื่นๆ

รับเขียน Resume

บทความ แนะนำ
บทความเมื่อ 28 มีนาคม 2011, 20.10
IyosisJ2-v2-0-for-joomla-1-5-template IyosisJ2 v2.0 Standart Features:Lightweight, modern and fast-loading design.Multi level dropdown menu or split menuAll module positions are fully...
บทความเมื่อ 08 มีนาคม 2012, 20.49
Cloudbase-2-0-joomla-2-5-templates-สีฟ้าสวย หลังจากที่ห่างหายจากการอัพเดทบทความไปนาน วันนี้ผมกลับมากับบทความแนะนำ joomla 2.5 templates สีสันสวยงามครับ ตอนรับ joomla 2.5 ด้วยเทมเพลตสวยๆ...
บทความ ได้รับความนิยม
บทความเมื่อ 08 มีนาคม 2012, 20.49
Cloudbase-2-0-joomla-2-5-templates-สีฟ้าสวย หลังจากที่ห่างหายจากการอัพเดทบทความไปนาน วันนี้ผมกลับมากับบทความแนะนำ joomla 2.5 templates สีสันสวยงามครับ ตอนรับ joomla 2.5 ด้วยเทมเพลตสวยๆ...
บทความเมื่อ 19 กุมภาพันธ์ 2011, 04.56
Lime-Green ฟรี Joomla Template 1.5 Lime Green สีเขียว สวยงาม ใครที่ชื่นชอบสีเขียวก็จัดกันไปเลยครับ สำหรับเทมเพลตตัวนี้ คงจะถูกใจคนที่ชืนชอบสีเขียวกันนะครับ...