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

Registered : 105,492

HOME > บทความจากสมาชิก > prettyPhoto jQuery lightbox SlideShow สร้าง lightbox ทำ Gallery ด้วย prettyPhoto


 
VPS  250 ҷ͹

prettyPhoto jQuery lightbox SlideShow สร้าง lightbox ทำ Gallery ด้วย prettyPhoto

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

Screenshot

prettyPhoto jQuery lightbox SlideShow

อ้างถึงบทความ
Go to : PHP Create Album Images Gallery / jQuery Lightbox
Go to : ColorBox jQuery Images SlideShow ทำ Gallery แบบ สไลด์รูปภาพแสดงภาพเปลี่ยนไปเรื่อยๆ


ตาราง
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>
	<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
	<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen">
		
		body {
			font: 62.5%/1.2 Arial, Verdana, Sans-Serif;
			padding: 0 20px;
		}
		
	</style>

			<script type="text/javascript" charset="utf-8">
				$(document).ready(function(){
					$("area[rel^='prettyPhoto']").prettyPhoto();
					
					$("a[rel^='prettyPhoto']").prettyPhoto({ animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true });
					$("a[rel^='prettyPhoto']").prettyPhoto({ animation_speed:'fast',slideshow:3000, hideflash: 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"];?>" rel="prettyPhoto[gallery]"  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



prettyPhoto jQuery lightbox SlideShow

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


prettyPhoto jQuery lightbox SlideShow

จะเห็นว่าจะมีการ แสดงรูป Thumbnails เป็นกล่องเล็ก ๆ ในรูปภาพ สามารถคลิกเพื่อดูภาพนั้น ๆ ได้ และมี Facebook / Twitter สามารถ Shared ได้อย่างง่ายดาย










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

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


บทความอื่นๆ ที่เกี่ยวข้อง
Go to : PHP Create Album Images Gallery / jQuery Lightbox
Go to : ColorBox jQuery Images SlideShow ทำ Gallery แบบ สไลด์รูปภาพแสดงภาพเปลี่ยนไปเรื่อยๆ
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
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2011-10-28
  Download : Download  prettyPhoto jQuery lightbox SlideShow  สร้าง lightbox  ทำ Gallery ด้วย prettyPhoto (2.7000 MB)
Sponsored Links
Bootstrap Themes SB Admin ของดีแนะนำต่อ ธีม Bootstrap กับ jQuery plugins
Bootstrap Themes SB Admin ของดีแนะนำต่อ ธีม Bootstrap กับ jQuery plugins
เป็นธีม Bootstrap ที่ผมได้ใช้กับหลายโปรเจคมาแล้ว มันมีรูปแบบที่ใช้งานง่าย มีความสวยงาม เรียบง่าย ไม่ซับซ้อน สามารถปรับแต่งได้ง่ายมาก สามารถดาวน์โหลดใช้งานได้ฟรี
Rating : Update : 2017-03-30 11:28:05
เรามาใช้ Line Notify กันดีกว่า ด้วยการใช้ PHP ง่ายๆ และใช้งานได้ดี
เรามาใช้ Line Notify กันดีกว่า ด้วยการใช้ PHP ง่ายๆ และใช้งานได้ดี
การส่ง LINE เข้ากลุ่มโดยใช้ Line Notify ด้วย PHP แบบง่ายๆ
Rating : Update : 2017-06-23 08:28:13
การใช้ PHP แบบ Short if/else (Shorthand) ช่วยการสร้างเงื่อนไขแบบสั้นๆ ง่ายและสะดวกมากๆ
การใช้ PHP แบบ Short if/else (Shorthand) ช่วยการสร้างเงื่อนไขแบบสั้นๆ ง่ายและสะดวกมากๆ
วิธีการเขียน php แบบ short if/else หรือ if แบบสั้นๆ ช่วยให้การสร้างเงื่อนไขใน php ง่ายและสะดวกมากๆ สามารถใช้พร้อมกับการรวมค่าตัวแปร หรือ รวมค่า string ได้ทันที
Rating : Update : 2017-04-16 22:04:57
แนะนำการใช้งาน CRUDigniter 3  + Bootstrap เบื้องต้น
แนะนำการใช้งาน CRUDigniter 3 + Bootstrap เบื้องต้น
หากคุณเป็นอีกคนหนึ่งที่หลงไหลในการพัฒนาระบบหรือเว็บไซต์ โดยยึดเอา framework เป็นหลักในการพัฒนา ปกติ framework จะถูกออกแบบให้ทำงานแบบ MVC อยู่แล้ว ยิ่งทำให้เราง่ายต่อการพัฒนา หรือแก้ไข หรือทำงานเป็นทีมด้วยกันได้ ผมขอแนะนำ Tool Online ตัวหนึ่งชื่อว่า crudigniter ซึ่งเป็นระบบที่ทำงานแบบออนไลน์ crudigniter นี้ผมว่าน่าจะตอบโจทย์ให้กับนักพัฒนารุ่นเก่าหรือใหม่ที่กำลังสนใจ Codeigniter อยู่ เรามาร่วมใช้งานง่ายๆกันเลยครับ ซึ่ง crudigniter ตัวนี้จะเป็นการนำเอาฐานข้อมูลที่เราได้ออกแบบและสร้าง table ไว้แล้วนะครับ จากนั้นเราก็แค่นำเข้า(import)ฐานข้อมูล MySQL เข้าไปตัวระบบเขาก็จะทำการ Generated Code ให้เอง จากนั้นเราก็แค่กำหนดค่าต่างๆ เช่น อยากให้ หน้าฟอร์ม เป็นแบบไหน เราก็สามารถกำหนดได้ครับ ง่ายๆ แค่ 5 ขั้นตอน
Rating : Update : 2016-08-26 09:11:29
ติดตั้ง SSL Certificate (https) บน Direct Admin แบบง่าย ๆ (Step by Step)
ติดตั้ง SSL Certificate (https) บน Direct Admin แบบง่าย ๆ (Step by Step)
วิธีการติดตั้ง SSL Certificate ให้เว็บไซต์สามารถเปิดแบบ https รองรับมารฐานการรับส่งข้อมูล อย่างปลอดภัยและสร้างความน่าเชื่อถือให้กับเว็บไซต์
Rating : Update : 2017-12-22 17:20:49
Upload VDO จาก Youtube พร้อมสร้าง Screenshort ด้วย FFmpeg Power by Asp.net core c#
Upload VDO จาก Youtube พร้อมสร้าง Screenshort ด้วย FFmpeg Power by Asp.net core c#
Upload VDO จาก Youtube พร้อมสร้าง Screenshort ด้วย FFmpeg Power by Asp.net core c#
Rating : Update : 2017-07-06 06:26:54
ดาวน์โหลดและติดตั้ง Visual Studio 2017 Tools ที่ใช้สำหรับพัฒนา .Net Application
ดาวน์โหลดและติดตั้ง Visual Studio 2017 Tools ที่ใช้สำหรับพัฒนา .Net Application
หลังจากที่ Visual Studio 2017 ได้อยู่ในสถานะ RC มาหลายเดือน ตอนนี้ Microsoft ได้เปิดให้ดาวน์โหลดและติดตั้ง Visual Studio 2017 อย่างเป็นทางการ สามารถดาวน์โหลดและติดตั้งกันได้แล้ว
Rating : Update : 2017-04-14 21:40:13
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
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน 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
VBScript Tutorial
VBScript Validation
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 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2018 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่