Favourites

Code

posted on 03 Feb 2009 11:55 by maxtrix

ทำกล่อง Scroll Bar

Code
<div style="overflow:[auto,scroll]; width:[ความกว้าง]px; height:[ความยาว]px">
. . .
</div>

ตัวอย่าง
<div style="overflow:scroll; width:500px; height:100px">
ทดสอบจ้า
</div>

ผลที่ได้
ทดสอบจ้า

ทำหน้าต่างขยายภาพ

Code
<div id="gallery" style="padding: 0px">
<a href="ตำแหน่งของรูปภาพ" target="_blank">
<img src="ตำแหน่งของรูปภาพ" alt="" width="ความกว้าง" /></a>
</div>

ตัวอย่าง
<div id="gallery">
<a href="http://maxtrix.exteen.com/images/Picture/MeizuM8.jpg" target="_blank"><img src="http://maxtrix.exteen.com/images/Picture/MeizuM8.jpg" alt="" width="500" /></a>
</div>

ผลที่ได้

คำแนะนำเพิ่มเติม
สามารถเปิด <div> ไว้ก่อนแล้วใส่ code ภาพลงไปจนพอใจแล้วจึงปิด </div> เวลากด link
เมื่อแสดงภาพแล้วเมื่อกดซ้ำจะไปรูปต่อไปเลย และจะมีจำนวนภาพบอกเช่น 1 of 2
 
เพิ่มเติม ทำภาพซูมด้วย jQuery lightBox

ทำหน้าต่างขยายภาพ [facebox]

Code
<a rel="facebox" href="ตำแหน่งรูปภาพ">
<img src="ตำแหน่งรูปภาพ" alt="" width="ความกว้าง" height="ความสูง" />
</a>

ตัวอย่าง
<a rel="facebox" href="http://maxtrix.exteen.com/images/Picture/MeizuM8.jpg">
<img src="http://maxtrix.exteen.com/images/Picture/MeizuM8.jpg" alt="" height="500" />
</a>

ผลที่ได้


คำแนะนำเพิ่มเติม
สามารถนำไปประยุกต์ใช้ได้อีกเช่น

แสดงข้อความแบบ PopUp

Code
<a href="#ชื่ออ้างอิง" rel="facebox">ชื่อ Link</a>
<div id="ชื่ออ้างอิง" style="display:none;">
. . .
</div>

ตัวอย่าง
<a href="#info" rel="facebox">ทดสอบข้อความ PopUp</a>
<div id="info" style="display:none;">
ทดสอบข้อความ PopUp จ้า
</div>

ผลที่ได้
ทดสอบข้อความ PopUp

แสดง PopUp หน้าต่าง HTML

Code
<a href="ตำแหน่ง Link" rel="facebox">ชื่อ Link</a>

ตัวอย่าง
<a href="http://www.thaiall.com/learn/html.htm" rel="facebox">ทดสอบ PopUp Link จ้า</a>

ผลที่ได้
ทดสอบ PopUp Link จ้า