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,032

HOME > PHP > PHP Forum > ขอตัวอย่างการโชว์รูปภาพจากฐานฯแบบเรียงแนวนอน และตัดแถวตามที่เรากำหนดหน่อยครับ



 

ขอตัวอย่างการโชว์รูปภาพจากฐานฯแบบเรียงแนวนอน และตัดแถวตามที่เรากำหนดหน่อยครับ

 



Topic : 136803



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



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




ผมอยากให้เรียกรูปภาพออกจากฐานฯ สมมติ มี10รูปในฐาน ให้เรียงแนวนอน 5รูปแล้วตัดลงแถวล่าง แล้วก็มีชื่ออยู่ด้านล่างของรูปภาพครับ
รบกวนขอตัวอย่างหน่อยครับ ขอบคุณครับ

ตัวอย่าง



Tag : PHP, HTML, CSS







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2022-09-02 14:48:30 By : tomtourism3 View : 326 Reply : 2
 

 
การจัด Layout เป็นการทำงานฝั่ง front-end กำหนดที่ HTML+CSS

ตัวอย่าง static page ที่แสดงรูปภาพแถวละ 3 รูป
<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<div class="row">
  <div class="column">
    <img src="1.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="2.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="3.jpg" alt="Mountains" style="width:100%">
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="4.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="5.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="6.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

</body>
</html>



เมื่อเห็นภาพรวมแล้วก็ทำเป็น dynamic content เข้าลูปในส่วนที่ซ้ำกัน

Code (PHP)
$x = [1, 2, 3, 4, 5, 6];
for ($i = 0; $i < count($x); $i++) {
	echo $x[$i];
    if (($i+1) % 3 == 0) echo "<br>";
}


แบบ table (PHP)
<?php
$x = [1, 2, 3, 4, 5, 6];
?>

<table>
<?php 
for ($i = 0; $i < count($x); $i++) { 
	if ($i % 3 == 0) {
?>
  <tr>
    <td><?php echo $x[$i] ?? ""; ?></td>
    <td><?php echo $x[$i+1] ?? ""; ?></td>
    <td><?php echo $x[$i+2] ?? ""; ?></td>
  </tr>
<?php 
	}
}
?>
</table> 



ส่วนการดึงข้อมูลมาจากฐานข้อมูล ใช้หลักการเดียวกัน
ลองประยุกต์ดูครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-09-02 17:46:22 By : 009
 


 
อีกตัวอย่าง loop <td> ด้วย

Code (PHP)
$x = [1, 2, 3, 4, 5, 6, 7, 8];

?>

<table>
<?php 
for ($i = 0; $i < count($x); $i++) { 
	if ($i % 3 == 0) {
?>
  <tr>
  <?php for ($j = 0; $j < 3; $j++) { ?>
    <td><?php echo $x[$i+$j] ?? ""; ?></td>
  <?php } ?>
  </tr>
<?php 
	}
}
?>
</table> 

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-09-02 17:55:09 By : 009
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอตัวอย่างการโชว์รูปภาพจากฐานฯแบบเรียงแนวนอน และตัดแถวตามที่เรากำหนดหน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 00
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 อัตราราคา คลิกที่นี่