ตัวอย่าง demo.happyitshop.com
ก่อนอื่นดาว์โหลด
โหลดเมื่อแตกไฟล์ออกมาจะมี 2 foder คือ data กับ javascript
นำทั้ง2ไฟล์ไปไว้ที่ \catalog\view\theme\ธีมที่ใช้งาน\
1.เปิด ไฟล์ header.tpl ใน \catalog\view\theme\ธีมที่ใช้งาน\template\common\header.tpl
หา </head>
แล้วเอา <?php include "catalog/view/theme/ธีมที่ใช้งาน/data/slide_setup.tpl"; // setup the slide ?> ใส่บน </head>
------------------------------------
2.เปิด ไฟล์ home.tpl ใน \catalog\view\theme\ธีมที่ใช้งาน\template\common\home.tpl
หา <div id="content">
แล้วเอา <?php include "catalog/view/theme/ธีมที่ใช้งาน/data/slide_image.tpl";?> <!-- it will show the slide --> ใส่ใต้ <div id="content">
----------------------------
3.เปิด ไฟล์ footer.tpl ใน \catalog\view\theme\ธีมที่ใช้งาน\template\common\footer.tpl
หา </body></html>
แล้วเอา <script type="text/javascript" src="catalog/view/theme/ธีมที่ใช้งาน/javascript/coin-slider.min.js"></script>
และ <script type="text/javascript" src="catalog/view/theme/ธีมที่ใช้งาน/javascript/coin-slider.js"></script>
ไว้บน </body></html>
----------------------------------------------------------------------
ต่อไป เปิด ไฟล์ stylesheet.css ใน \catalog\view\theme\ธีมที่ใช้งาน\stylesheet\stylesheet.css
เพิ่ม
.coin-slider { overflow: hidden; zoom: 1; position: relative; margin: 10px; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 547px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
ลงไปที่บรรทัดสุดท้าย ในไฟล์
----------------------------------------------------
ส่วนวิธีการอัพรุปลง ก็เอารุปไปใส่ ที่ โฟลเดอร์ Data\slide
วิธีการปรับแต่ง ในไฟล์ slide_image.tpl เปิดมาจะเจอ
<div id='coin-slider'>
<a href="url ที่จะให้ลิ้งไป" target="_blank"><img src='catalog/view/theme/ธีมที่ใช้งาน/data/slide/slide1.jpg' >[/url]
<a href="url ที่จะให้ลิ้งไป" target="_blank"><img src='catalog/view/theme/ธีมที่ใช้งาน/data/slide/slide2.jpg' >[/url]
<a href="url ที่จะให้ลิ้งไป" target="_blank"><img src='catalog/view/theme/ธีมที่ใช้งาน/data/slide/slide3.jpg' >[/url]
<a href="url ที่จะให้ลิ้งไป" target="_blank"><img src='catalog/view/theme/ธีมที่ใช้งาน/data/slide/slide4.jpg' >[/url]
</div>
--------------------------------------
วิธีการปรับแต่ง ในไฟล์ slide_setup.tpl เปิดมาจะเจอ
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({
width: 567, // width of slider panel <<ความกว้างของ slide
height: 241, // height of slider panel <<ความสูงของ slide
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms <<ระยะเวลาดีเลย์ระหว่างภาพ
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: 'random', // random, swirl, rain, straight <<แรนดอมเอฟเฟค เลือกเอาตามใจชอบ
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover
});
});
</script>
---------------------------------------------------จบแล้วครับ ขอให้สนุกเน้อ ผิดพลาดประการได้ทักท้วงได้นะครับ-----------------------------------
เครดิตเว็บไซต์ผู้พัฒนา:http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/comment-page-4/#comment-2349
หัวข้อ: ติด Slide show ให้เว็บดูดีขึ้น ด้วย Coin Slider: Image Slider with Unique Effect (อ่าน 6630 ครั้ง)
