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

Registered : 109,027

HOME > PHP > PHP Forum > พอจะมี code ที่เรียงภาพและข้อมูลจากฐานข้อมูลตามภาพนี้มั้ยคะ



 

พอจะมี code ที่เรียงภาพและข้อมูลจากฐานข้อมูลตามภาพนี้มั้ยคะ

 



Topic : 109018



โพสกระทู้ ( 434 )
บทความ ( 0 )



สถานะออฟไลน์




ปกติจะเรียงเป็นแถวและจำนวนคอลัมน์ เท่าๆ กัน แต่ต้องการ code php ที่สามารปรับตามรูปได้ค่ะ
ตามรูป เค้าจะเรียงไม่เท่ากัน พี่ๆ พอมี code มั้ยคะ

ตัวอย่างจากเว็บ
http://world.kapook.com/photo/star

ขอบคุณมากค่ะ

photoh



Tag : PHP, MySQL, HTML/CSS, JavaScript







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-06-08 23:02:00 By : because View : 4182 Reply : 5
 

 

No. 1



โพสกระทู้ ( 1,666 )
บทความ ( 0 )



สถานะออฟไลน์


เป็น jquery ครับ...

แต่ถ้าทำแบบบ้านๆเพื่อทดสอบนี่ได้เลยครับ Table + Div ง่ายๆเลย
สังเกตนะครับว่า แนวนอนเค้าไม่เท่ากันก็จริง แต่เส้นแนวตั้งเค้าเรียงเป็นเส้นตรง
นั้นบอกว่ามีการประกาศ max-width ของรูปภาพไว้แน่ๆ แล้วใช้ height เป็นแบบ auto

มาลองกันตรง URL ไปหารูปมาใส่เองนะครับใส่ให้ไม่ได้มันติดเงื่อนใข thaicreate ไม่ให้ใส่ลิ้งเว็บนอกซะงั้น
<style> .XX{ max-width:250px; height:auto; } </style> <body> <table width="500px;" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" > <DIV><img src="URL" class="XX"/></DIV> <DIV><img src="URL" class="XX" /></DIV> </td> <td valign="top" > <DIV><img src="URL" class="XX" /></DIV> <DIV><img src="URL" class="XX" /></DIV> </td> </tr> </table>


อันนี้ตัวอย่างการใช้โค้ดด้านบนครับ
test








ประวัติการแก้ไข
2014-06-09 00:09:53
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-08 23:55:30 By : meannerss
 


 

No. 2



โพสกระทู้ ( 434 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณค่ะพี่ meannerss
มีอีกนิดนึง พอดีน้องดึงจากฐานข้อมูลตาม code ด้านล่างนี้อ่ะค่ะ ไม่รู้จะแก้ยังไงต่อดี อยากให้แต่ละภาพต่อกันโดยไม่ต้องมีช่องว่าง (ตามลูกศรสีแดงเข้มอ่ะค่ะ) พอช่วยดูทีได้มั้ยคะ

Code (PHP)
  <div align="center"> 
    <?
		$strSQL = "SELECT * FROM pic";
		$objQuery = mysql_query($strSQL);
		$Num_Rows = mysql_num_rows($objQuery);

		$Per_Page = 20;   // Per Page

		$Page = $_GET["Page"];
		if(!$_GET["Page"])
		{
			$Page=1;
		}

		$Prev_Page = $Page-1;
		$Next_Page = $Page+1;

		$Page_Start = (($Per_Page*$Page)-$Per_Page);
		if($Num_Rows<=$Per_Page)
		{
			$Num_Pages =1;
		}
		else if(($Num_Rows % $Per_Page)==0)
		{
			$Num_Pages =($Num_Rows/$Per_Page) ;
		}
		else
		{
			$Num_Pages =($Num_Rows/$Per_Page)+1;
			$Num_Pages = (int)$Num_Pages;
		}

		$strSQL .=" order  by id desc LIMIT $Page_Start , $Per_Page";
		$objQuery  = mysql_query($strSQL);


		echo"<table border=\"0\"  cellspacing=\"1\" cellpadding=\"1\"><tr>";
		$intRows = 0;
		while($objResult = mysql_fetch_array($objQuery))
		{
		$idg = $objResult["id"];
		$topicg = $objResult["topic"];
		$photog = $objResult["photo"];
			echo "<td>"; 
			$intRows++;
	?>
    <table width="162" border="0" align="center" cellpadding="1" cellspacing="1" class="brdc">
      <tr> 
        <td width="102" height="21" align="center"> 
          <?
echo "<img src=picimg/$photog width=170 border=0>";
?>
        </td>
      </tr>
      <tr> 
        <td  align="center"> <div align="left"> 
            <?  echo "<font size=2 color=#666666>$topicg</font>"; ?>
          </div></td>
      </tr>
    </table>
    <div align="left"> </div>
  </div>
  <div align="center"> 
    <?
			echo"</td>";
			if(($intRows)%4==0)
			{
				echo"</tr>";
			}
		}
		echo"</tr></table>";
	?>
  </div>


ผลลัพท์

mphoto

ขอบคุณมากๆ ค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-09 21:25:54 By : because
 

 

No. 3



โพสกระทู้ ( 1,666 )
บทความ ( 0 )



สถานะออฟไลน์


ไม่ไช่แบบนั้นนะครับ
- 1แถวแนวตั้งจะมีแค่ 1 TD เท่านั้น
- ข้อเสียของการเรียงแบบนี้คือเราจะได้ภาพที่ 1 2 3..N เรียงลงมาในแนวตั้ง และตัดแถวใหม่เมื่อถึงจำนวนที่ต้องการ

ลองๆแบบนี้ดูทั้งหมดทั้งปวงมีแค่ 1 TR และ 3 TD
** Per_Page = 21 ละกันเพื่อให้ลงตัวแถวละ 7 รูป

Code (PHP)
  <div align="center"> 
    <?
		$strSQL = "SELECT * FROM pic";
		$objQuery = mysql_query($strSQL);
		$Num_Rows = mysql_num_rows($objQuery);

		$Per_Page = 21;   // Per Page

		$Page = $_GET["Page"];
		if(!$_GET["Page"])
		{
			$Page=1;
		}

		$Prev_Page = $Page-1;
		$Next_Page = $Page+1;

		$Page_Start = (($Per_Page*$Page)-$Per_Page);
		if($Num_Rows<=$Per_Page)
		{
			$Num_Pages =1;
		}
		else if(($Num_Rows % $Per_Page)==0)
		{
			$Num_Pages =($Num_Rows/$Per_Page) ;
		}
		else
		{
			$Num_Pages =($Num_Rows/$Per_Page)+1;
			$Num_Pages = (int)$Num_Pages;
		}

		$strSQL .=" order  by id desc LIMIT $Page_Start , $Per_Page";
		$objQuery  = mysql_query($strSQL);


		echo"<table border=\"0\"  cellspacing=\"1\" cellpadding=\"1\"><tr>";
		$intRows = 0;
		while($objResult = mysql_fetch_array($objQuery))
		{
		$idg = $objResult["id"];
		$topicg = $objResult["topic"];
		$photog = $objResult["photo"];
if(($intRows)%7==0)
			{
				echo"<td valign='top' >";   
			} 
	?>
    <table width="162" border="0" align="center" cellpadding="1" cellspacing="1" class="brdc">
      <tr> 
        <td width="102" height="21" align="center"> 
          <?
echo "<img src=picimg/$photog width=170 border=0>";
?>
        </td>
      </tr>
      <tr> 
        <td  align="center"> <div align="left"> 
            <?  echo "<font size=2 color=#666666>$topicg</font>"; ?>
          </div></td>
      </tr>
    </table>
    <div align="left"> </div>
  </div>
  <div align="center"> 
    <?
//ขอตัดส่วนปิดTD ออกก่อนขี้เกียจคิด(อันที่จริงไม่ใส่ก็ได้) แต่เพื่อความสมบูรณ์ของ HTML ค่อยมาเติมเอาทีหลัง 
			//if(($intRows)%7==0)
			//{
			//	echo"</td>";
			//}
$intRows++;
		}
		echo"</tr></table>";
	?>
  </div>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-09 23:21:32 By : meannerss
 


 

No. 4



โพสกระทู้ ( 434 )
บทความ ( 0 )



สถานะออฟไลน์


พี่ meannerss คะ จาก No.3 อ่ะค่ะ
ถ้าทำตาม code ที่ให้มา มันจะได้ 7 แถว ๆ ละ 3 รูปอ่ะค่ะ

ซึ่งถ้าเปลี่ยนจาก 7 สมมุติเป็น 5 มันก็จะได้แถวละ 7 รูป
ซึ่งดูแล้ว มันมีค่าตามแถวของ if(($intRows)%7==0) ตรงนี้อ่ะค่ะ

ถ้าต้องการแถวละ 4 รูป สักประมาณ 5 แถว ต้องเขียนยังไงอ่ะคะ

ขอบคุณค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-17 06:17:28 By : because
 


 

No. 5



โพสกระทู้ ( 9,542 )
บทความ ( 2 )



สถานะออฟไลน์


Code (PHP)
$td=array(); // ใช้เก็บ html แต่ละแถว
$col=5; // อยากได้กี่คอลัมน์ก็กำหนดเอา
$row=4; // อยากได้กี่ภาพต่อคอลัมน์กำหนดเอา
$w=100;  // ความกว้างของ image

$idx=0; // กำหนดค่าเริ่มต้นที่ คอลัมน์ 0

$rs=msyql_query('select id from tb limit '.($col*$row));
while($ro=mysql_fetch_assoc($rs)){

     $td[$idx].="<img src='image_[$ro[id]].jpg' width=$w /><br />";
     $idx=($idx +1) ^ $col; 

}

echo "<table><tr>";
for($i=0; $i<$col; $i++) echo "<td>$td[$i]</td>";
echo '</tr></table>';


โค๊ดนี้ แสดง 5 คอลัมน์ ๆ ละ 4 ภาพ ส่วนอื่นประยุกต์ใช้เอานะครับ พวกข้อความที่จะให้แสดง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-06-18 13:18:04 By : Chaidhanan
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : พอจะมี code ที่เรียงภาพและข้อมูลจากฐานข้อมูลตามภาพนี้มั้ยคะ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่