Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
   
 

Registered : 102,635


HOME > บทความจากสมาชิก > ColorBox jQuery Images SlideShow ทำ Gallery แบบ สไลด์รูปภาพแสดงภาพเปลี่ยนไปเรื่อยๆ

ColorBox jQuery Images SlideShow ทำ Gallery แบบ สไลด์รูปภาพแสดงภาพเปลี่ยนไปเรื่อยๆ

 
 
       
Bookmark.   
Share
       
ColorBox jQuery Images SlideShow ใช้ ColorBox ของ jQuery ในการทำ SlideShow แสดงรูปภาพใน Gallery ในฐานข้อมูล PHP กับ MySQL โดยสไลด์ภาพเลื่อนแสดงภาพเปลี่ยนไปเรื่อยๆ บทความนี้เป็นภาคต่อ PHP Create Album Images Gallery / jQuery Lightbox ซึ่งก่อนหน้านี้จะเป็นในรูปแบบของ jQuery Lightbox เท่านั้น ไม่มี Slideshow รูปภาพ ซึ่งบทความนี้ได้ดัดแปลงในส่วนของไฟล์ show_gallery.php ให้สามารถ Slideshow รูปภาพ โดยสไลด์ภาพเลื่อนแสดงภาพเปลี่ยนไปเรื่อยๆ ตามจำนวนของรูปภาพ โดยทำงานเป็น Loop รูปแบบสวยงาม น่าใช้และเป็นจุดน่าสนใจในเว็บได้อย่างดี

Screenshot

ColorBox jQuery Image  Slide Show

อ้างถึงบทความ Go to : PHP Create Album Images Gallery / jQuery Lightbox


ตาราง
CREATE TABLE `album` (
`AlbumID` int(4) unsigned zerofill NOT NULL auto_increment,
`AlbumName` varchar(100) NOT NULL,
`AlbumShot` varchar(100) NOT NULL,
PRIMARY KEY (`AlbumID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;


CREATE TABLE `gallery` (
`GalleryID` int(4) unsigned zerofill NOT NULL auto_increment,
`AlbumID` int(4) unsigned zerofill NOT NULL,
`GalleryName` varchar(100) NOT NULL,
`GalleryShot` varchar(100) NOT NULL,
PRIMARY KEY (`GalleryID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;


นำ SQL นี้ไปรันเพื่อสร้าง table บน phpMyAdmin


Code ทั้งหมด สามารถดาวน์โหลดได้จากข่างล่าง

show_gallery.php
<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
	<link media="screen" rel="stylesheet" href="colorbox.css" />
	<script type="text/javascript" src="scripts/jquery.min.js"></script>
	<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){

			$(".galery").colorbox({rel:'galery', slideshow:true});

		});
	</script>

</head>
<body>
<?php
		$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
		$objDB = mysql_select_db("mydatabase");

		$strSQL = "SELECT * FROM album WHERE AlbumID = '".$_GET["AlbumID"]."' ";
		$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
		$objResult = mysql_fetch_array($objQuery);
?>
<h1><?php echo $objResult["AlbumName"];?></h1>
<?php

		$strSQL2 = "SELECT * FROM gallery WHERE AlbumID = '".$_GET["AlbumID"]."' ORDER BY GalleryID ASC ";
		$objQuery2 = mysql_query($strSQL2) or die ("Error Query [".$strSQL2."]");

		echo"<table border=\"1\"  cellspacing=\"1\" cellpadding=\"1\"><tr>";
		$intRows = 0;
		while($objResult2 = mysql_fetch_array($objQuery2))
		{
			echo "<td>"; 
			$intRows++;
	?>
			<center>
				<a href="myfile/<?php echo $objResult2["GalleryShot"];?>" class="galery" title="<?php echo $objResult2["GalleryName"];?>"><img src="myfile/<?php echo $objResult2["GalleryShot"];?>" width="100" height="100"></a><br>
				<?php echo $objResult2["GalleryName"];?>
				<br>
			</center>
	<?php
			echo"</td>";
			if(($intRows)%4==0)
			{
				echo"</tr>";
			}
		}
		echo"</tr></table>";

		mysql_close($objConnect);
	?>
</body>
</html>



เมื่อลองรันผลลัพธ์ก็จะได้ดังภาพ


Screenshot

http://localhost/myphp/show_album.php



ColorBox jQuery Image  SlideShow

แสดง Album ทั้งหมดที่ได้สร้าง ให้ลิกที่รูปเพื่อเล่นสไลด์ภาพ


ColorBox jQuery Image  SlideShow

ภาพจะแสดง สไลด์ภาพเลื่อนแสดงภาพเปลี่ยนไปเรื่อยๆ โดยแสดงผลเป็น Loop


ColorBox jQuery Image  SlideShow

สังเกตุว่าพื้นที่อื่น ๆ จะถูกทำให้เป็นสีดำ และจะชัดเฉพาะรูปภาพสไลด์เท่านั้น



คำอธิบายเพิ่มเติม
สำหรับตัวอย่างนี้ได้พัฒนาเพิ่มเติมมาจากบทความ PHP Create Album Images Gallery / jQuery Lightbox สามารถกลับไปศึกษา Code เต็มรูปแบบได้จากบทความนี้ ซึ่งบทความนี้ได้ดัดแปลงในส่วนของการ Slide Show ด้วย ColorBox เท่านั้น

สำหรับรายละเอียดการใช้งาน ColorBox อ่านต่อได้ที่นี่ สามารถดัดแปลงใช้งานได้หลากหลาย


บทความอื่นๆ ที่เกี่ยวข้อง
Go to : prettyPhoto jQuery lightbox SlideShow สร้าง lightbox ทำ Gallery ด้วย prettyPhoto
Go to : PHP Create Album Images Gallery / jQuery Lightbox
Go to : JQuery Lightbox สร้างกล่อง Lightbox แบบง่าย ๆ ด้วย JQuery
Go to : PHP MySQL Multiple Column
Go to : PHP สร้างฟอร์มสำหรับ Upload รูปภาพลงในฐานข้อมูล MySQL พร้อมกับแบบ Form สำหรับการแก้ไขรูปภาพ
Go to : PHP Resize Thumbnails Image and Insert to MySQL
Go to : PHP Multiple Upload and Multiple Resize to MySQL
Go to : PHP MySQL Upload File to MySQL Database - Multiple Dynamic CreateElement Input File Upload
Go to : PHP MySQL Multiple Upload File to MySQL Database - CreateElement Input File Upload
Go to : jQuery Tutorial : สอน jQuery เขียน jQuery กับ JavaScript เรียน jQuery ในประเทศไทย


   
Share

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2011-10-28
  Download : Download  ColorBox jQuery Images  SlideShow  ทำ Gallery แบบ สไลด์รูปภาพแสดงภาพเปลี่ยนไปเรื่อยๆ (0.4000 MB)
Sponsored Links
 

Sponsored Links
การพัฒนาศักยภาพบุคคลากรด้านซอฟต์แวร์สู่ประชาคมอาเซียน (MCSD)
การพัฒนาศักยภาพบุคคลากรด้านซอฟต์แวร์สู่ประชาคมอาเซียน (MCSD)
หลักสูตรนี้เป็นหลักสูตรการอบรมและการสอนของผู้ที่มีความชำนาญด้าน IT Professional สำหรับนักพัฒนาโปรแกรม (Developer) โดยมุ่งหวังเพื่อให้ผู้เข้าอบรมได้รับประโยชน์เช่น มีทักษะการพัฒนา Web Application ในระดับมืออาชีพ การเป็นนักพัฒนาขั้นสูง
Rating : Update : 2014-07-30 08:02:26
โครงสร้างของ Project บน Windows Store Apps และไฟล์ต่าง ๆ ที่เกี่ยวข้อง (C#)
โครงสร้างของ Project บน Windows Store Apps และไฟล์ต่าง ๆ ที่เกี่ยวข้อง (C#)
บทความก่อนหน้านี้เราได้เรียนรู้วิธีการสร้าง Project ในรูปแบบต่าง ๆ จาก Project Template แล้ว ในหัวข้อที่สอง นี้ เราจะทำความรู้จักกับไฟล์ต่าง ๆ ที่เราได้จากการสร้าง Project
Rating : Update : 2014-05-03 18:21:03
ตอนที่ 4 : ติดตั้ง Xamarin บน Mac (OS X) และการเขียน Android บนเครื่อง Mac ด้วย C#
ตอนที่ 4 : ติดตั้ง Xamarin บน Mac (OS X) และการเขียน Android บนเครื่อง Mac ด้วย C#
กติแล้วบนเครื่อง Mac เราสามารถเขียน App บน Smartphone ของ Android และ iOS ได้โดยใช้ Tools อย่าง Xcode (สำหรับ iOS) และ Eclipse กับ Android Studio (สำหรับ Android) แต่ภาษาการเขียนนั้นยังจะต้องใช้ภาษา Objective-C
Rating : Update : 2014-09-23 14:18:24
CSS : ความลับที่คุณอาจไม่เคยรู้ [เกี่ยวกับ script ที่ฝังมากับ host ฟรี ]
CSS : ความลับที่คุณอาจไม่เคยรู้ [เกี่ยวกับ script ที่ฝังมากับ host ฟรี ]
CSS : ความลับที่คุณอาจไม่เคยรู้ [เกี่ยวกับ script ที่ฝังมากับ host(ฟรี) ใครรู้แล้วขออภัยครับ : ) ] และวิธีนี้เหมาะกับเว็บเล็กๆ ที่ไม่ค่อยมีไรมากนะครับ
Rating : Update : 2011-07-28 06:54:08
รู้จักกับ Web Site และ การสร้าง Web Site บน Windows Azure
รู้จักกับ Web Site และ การสร้าง Web Site บน Windows Azure
สำหรับ Service ที่มีชื่อว่า Web Sites เป็นบริการแรกสุดที่เราจะได้พบเจอบน Windows Azure วัตุประสงค์ของ Web Site คือ ต้องการที่จะให้ผู้ที่มีเว็บไซต์สามารถที่จะนำ Web หรือ Web Application ของตัวเองไปรันบน Windows Azure ได้
Rating : Update : 2013-02-21 12:04:04
วิธีการ Update iOS 6 (Step by Step) บน iPhone,iPad เมื่อ Apple ปล่อยให้อัพเดท iOS6
วิธีการ Update iOS 6 (Step by Step) บน iPhone,iPad เมื่อ Apple ปล่อยให้อัพเดท iOS6
เมื่อวันที่ 20 กันยายน 2555 ตามเวลาประเทศไทย Apple ได้ปล่อย iOS6 มาให้กับลูกค้าที่ใช้ iPhone และ iPad ได้อัพเดดกันแล้ว มีอะไรน่าสนใจมาดูกัน
Rating : Update : 2012-09-22 06:55:36


ThaiCreate.Com Forum
Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน Struts การเขียนโปรแกรม Java Struts Framework
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน Yii  Framework การเขียนโปรแกรม ภาษา PHP กับ Yii
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว

สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   




Acc : thaicreate@hotmail.com






Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2015 All Rights Reserved.
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 084-715-5121 อัตราราคา คลิกที่นี่

Back to Top