จากบทความก่อนนี้เราได้ code สำหรับการ upload image ไปแล้วเพื่อให้เกิดความต่อเนื่องผมก็เลยคิดว่า เราน่าจะเอารูปภาพ จากการ upload มาทำเป็น slide ด้วยเลยดีกว่า ผมก็เลยไป download plugin ของ jQuery ที่เขียนเป็น slide มาชื่อว่า pikachoose มาปรับแต่งตามใจฉันนิดหน่อย......
ก่อนอื่นหากท่านต้องการตัว master ก็ไป download ที่นี่ http://pikachoose.com/download/
ตัวที่ผมนำมาปรับแต่งนี้เป็น Version 4.1.6 ครับ เมื่อ download มาแล้วผมก็คัดเอาเฉพาะ folder
js, images, css แล้วก็ไฟล์ readme.html มา จากนั้นก็เปิดไฟล์ readme.html
ขึ้นมาให้ท่านกดที่ลิงค์แรก ก็จะเห็นเป็น slide ตัวอย่าง หลังจากนั้นก็ให้ท่านคลิกขวาเลือก
View Page Source (firefox) ท่านก็จะได้ code มาคล้ายๆแบบนี้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link type="text/css" href="with-carousel_files/styles.css"
rel="stylesheet">
<script type="text/javascript"
src="with-carousel_files/jquery.js"></script>
<script type="text/javascript"
src="with-carousel_files/jquery_003.js"></script>
<script type="text/javascript"
src="with-carousel_files/jquery_002.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
$("#pikame").jcarousel({
initCallback: function(carousel)
{
$(carousel.list).find('img').click(function() {
var clicked = parseInt($(this).parents('.jcarousel-item')
.attr('jcarouselindex'));
var last = ($(this).parents('ul').find('li:last')
.index() == clicked-1) ? true : false;
if(!last){
clicked = (clicked-2<=0) ? 0 : clicked-2;
}
carousel.scroll(clicked);
});
}
});
});
-->
</script>
</head>
<body>
<div class="pikachoose">
<ul id="pikame" class="jcarousel-skin-pika">
<li><img src="pic1.jpg"/></li>
<li><img src="pic2.jpg"/></li>
<li><img src="pic3.jpg"/></li>
<li><img src="pic4.jpg"/></li>
<li><img src="pic5.jpg"/></li>
<li><img src="pic6.jpg"/></li>
</ul>
</div>
</body>
</html>
จากนั้นผมก็สร้างไฟล์ใหม่ขึ้นมา ชื่อ slide.php ก๊อปโค้ดด้านบนมาใส่ แล้วก็เริ่มปรับแต่ง เริ่มจาก
<link type="text/css" href="css/slidestyles.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.pikachoose.js"></script> <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
ตามมาด้วยตัดส่วนที่ไม่ต้องการออก
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
$("#pikame").jcarousel({scroll:4,
initCallback: function(carousel)
{
$(carousel.list).find('img').click(function() {
//console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
carousel.scroll(parseInt($(this).parents('.jcarousel-item')
.attr('jcarouselindex')));
});
}
});
});
-->
</script>
มาถึงจุดสำคัญของบทความนี้กันแล้ว นั่นก็คือการดึงข้อมูลรูปภาพจากฐานข้อมูลมาแสดงนั่นเอง
จากบทความเรื่อง "วิธีการ upload รูป + SQL + Resize + Show image from SQL"
เราจะนำฐานข้อมูลมาใช้กับบทความนี้ ด้วยเชื่อมต่อฐานข้อมูลเพื่อดึงรูปมาแสดงดังนี้
<div class="pikachoose">
<ul id="pikame" class="jcarousel-skin-pika">
<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$image = $row['image'];
if($image != ""){
echo "<li>";
echo "<img src='../upload/$image'>";
echo "</li>";
}
$i++;
}
?>
</ul>
</div>
ส่วนของไฟล์ CSS ก็แล้วแต่ท่านจะปรับแต่ง ตามใจชอบครับ
ไฟล์ตัวอย่างที่ผมนำมาให้ Download นี้
ผมได้ปรับแต่งไว้แล้ว โดยให้ width:270px; overflow:hidden; ส่วน height
ก็แล้วแต่ท่านจะปรับแต่งตามสัดส่วนของรูปภาพ.....
ในส่วนของไฟล์ upload image จากบทความก่อน ก็ให้ท่านกำหนดตัวแปร $newwidth = 270px;ด้วย
ความกว้างของรูปจะได้เท่ากัน
Code ที่เสร็จแล้ว
ไฟล์ slide.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link type="text/css" href="css/slidestyles.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
$("#pikame").jcarousel({scroll:4,
initCallback: function(carousel)
{
$(carousel.list).find('img').click(function() {
//console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
carousel.scroll(parseInt($(this)
.parents('.jcarousel-item').attr('jcarouselindex')));
});
}
});
});
-->
</script>
<style>
#name{margin-top:100px;color:#4F5C4F;}
#name a{text-decoration: none;}
</style>
</head>
<body>
<!-- not really needed, i'm using it to center the gallery. -->
<center>
<div id="name"><b><a href="http://www.bookneo.com">Bookneo.com</a></b></div>
<div class="pikachoose">
<ul id="pikame" class="jcarousel-skin-pika">
<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$image = $row['image'];
if($image != ""){
echo "<li>";
echo "<img src='../upload/$image'>";
echo "</li>";
}
$i++;
}
?>
</ul>
</div>
</center>
</body>
</html>
ไว้พบกันบทความต่อไปครับ ^_^
ถ้าภาพกระตุกก็ให้ไปลองเปลี่ยนรูปแบบการสไลด์ดูครับ ด้วยการปรับ transition:[0] ในไฟล์ jquery.pikachoose.js ซึ่งมีอยู่ 6 รูปแบบ ค่าเริ่มต้นจะเป็น 0 ครับ เราก็ลองเปลี่ยน จากเลข 0 - 6 ดูครับ
ตอบลบเพราะว่า รูปแบบ ที่ 0 เป็นการ fadeIn() , fadeOut() ของ jQuery browser อาจต้องมีความเร็วพอในการเล่นสไลด์ เพราะถ้าเปิดด้วย Chrome สไลด์ก็จะเล่นลื่นดีครับ
พอจะมีไฟล์มั้ยคับ Version 4.1.6 โหลดไม่ได้แล้วคับ
ตอบลบ