แนวทางต่อไปนี้เป็นการประยุกต์การใช้งาน OWL Carousel โดยอ้างอิงการนำความรู้เก่า
จากสองบทความด้านล่าง มาดัดแปลงใช้งาน
ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า
https://www.ninenik.com/content.php?arti_id=313 via @ninenik
และ
การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON()
https://www.ninenik.com/content.php?arti_id=373 via @ninenik
ดูรายละเอียด และการใช้งาน OWL Carousel ได้ที่
ดูตัวอย่างผลลัพธ์
ก่อนเริ่ม มาดูโครงสร้างไฟล์ที่เราจะใช้งาน
1. โฟลเดอร์ js
2. โฟลเดอร์ json
3. โฟลเดอร์ photo
4. ไฟล์ slide.html ชื่อไฟล์สำหรับทดสอบ
1. เริ่มต้น ให้เราไปโหลด OWL Carousel ได้ที่
หลังจากโหลดไฟล์มาแล้ว ให้แตกไฟล์ แล้วเข้าไป copy โฟลเดอร์ ชื่อ
owl-carousel โดย copy มาวางไว้ใน โฟลเดอร์ js ด้านบน
(ใน owl-carousel ด้านในจะมีไฟล์รูปภาพและไฟล์ js และ css )
2. นำรูปภาพของเราที่มี ควรไม่ความกว้างและสูงขนาดเดียวกัน แล้ว
นำไปไว้ในโฟลเดอร์ photo
3. สร้างไฟล์ json จากการดึงชื่อรูปภาพในโฟลเดอร์ photo มาใช้งาน
โดยให้ตั้งชื่อ getphoto.php และเอาไปไว้ในโฟลเดอร์ json
โค้ดไฟล์ getphoto.php และคำอธิบาย
<?php
header("Content-type:application/json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
$allowed_types=array('jpg','jpeg','gif','png'); // ไฟล์นามสกุลรูปที่อนุญาต
$dir ="../photo/"; // ตำแหน่งของรูป (เนื่องจากไฟล์นี้อยู่ด้านใน จึงย้อนกลับหนึ่งขั้นด้วย ../)
$files1 = scandir($dir); // คำสั่ง php scan หาไฟล์ในโฟล์เดอร์
foreach($files1 as $key=>$value){ // วนลูปแสดงชื่อไฟล์
if($key>1){ // ตัด . และ .. เอาเฉพาะชื่อไฟล์ (. และ .. เป็นชื่อที่มีอยู่ในโฟลเดอร์)
$file_parts = explode('.',$value); // แยกชื่อและนามสกุลไฟล์รูป
$ext = strtolower(array_pop($file_parts)); // แยกเอาเฉพาะนามสกุลไฟล์
if(in_array($ext,$allowed_types)){ // เช็คนามสกุลไฟล์ ว่าอยู่ในที่อนุญาตหรือไม่
// สร้าง รูปแบบ json สำรหรับ owl carousel
$json_data['items'][]=array(
"img"=>"photo/".$value // $value คือชื่อไฟล์ photo/ คือโฟลเดอร์รูป อันนี้จะไม่มี ../
);
}
}
}
$json= json_encode($json_data);
echo $json;
?>
เท่านี้เราก็จะได้ไฟล์ json สำหรับดึงชื่อและ path ตำแหน่งรูปภาพมาใช้งาน
หากต้องการประยุกต์จากฐานข้อมูล ให้ดูลิ้งค์ด้านบน การสร้าง json จากฐานข้อมูล
4. สร้างไฟล์ ใช้งาน ชื่อ slide.html คำอธิบายแสดงในโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide</title>
<link rel="stylesheet" href="js/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js/owl-carousel/owl.theme.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/owl-carousel/owl.carousel.min.js"></script>
<style type="text/css">
/* จัดการ css ของ item ของแต่ละ slide*/
#owl-demo .owl-item{
background: #FFFFFF;
display: block;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
margin: 0px 0px;
}
/* จัดการ css ของรูปภาพที่ใช้งาน*/
.owl-item img{
float: left;
position: relative;
margin: 0px 5px;
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div style="margin:auto;">
<div id="owl-demo" class="owl-carousel">
</div>
</div>
<script type="text/javascript">
$(function(){
//ใช้งาน slide ปรับแต่งค่าตามต้องการ
// ดูการปรับแต่งค่าตั้งไหมได้ที่หน้า http://owlgraphic.com/owlcarousel/index.html
$("#owl-demo").owlCarousel({
lazyLoad : true,
jsonPath : "json/getphoto.php", // เรียกใช้งานไฟล์ json ทีเราสร้าง
jsonSuccess : customDataSuccess // เมื่อโหลดข้อมูลมาแล้วให้ไปทำงานที่ฟังก์ชั่น
});
//ฟังก์ชั่นกำหนดการทำงาน เมื่อได้รับข้อมูลส่งกลับจากไฟล์ josn
function customDataSuccess(data){
var content = ""; // สร้างตัวแปรสำหรับใช้งาน
for(var i in data["items"]){ // วนลูปเรียกใช้ค่า จากตัวแปร data
var img = data["items"][i].img; // ดึงค่า img จาก data มาไว้ในตัวแปร
// จัดรูปแบบ html ที่จะแสดง ในที่นี้เราต้องการแสดงรูป และใช้ img
// เนื่องจาก เรามีการใช้งาน lazyload ดังนั้นในรูป จึงมีการกำหนด class ชื่อ lazyOwl
content += "<img class=\"lazyOwl\" src=\"" +img+ "\">"
}
// นำรูปแบบเนื้อหาที่ได้จากจัดรูปแบบ ไปแสดงใน div id owl-demo
$("#owl-demo").html(content);
}
});
</script>
</body>
</html>
