การนำไปใช้

นำโค้ดบรรทัดนี้ ใส่ไว้ในหน้าที่ต้องการ ที่ส่วน head

<script type="text/javascript" src="http://static1.pg.in.th/static/javascript/pglatest.js"></script>

สร้าง div ที่ต้องการนำรูปไปแสดง และตั้งชื่อ id ให้กับ div นั้น ตัวอย่างเช่น

<div id="pgLatestDiv"></div>

---

การโหลดรูปล่าสุดของ user ใช้คำสั่ง

<div id="pgLatestDiv"></div>
<script type="text/javascript">
  pgLatest.load(userid,totalitems);
  pgLatest.showPic(elementid,itemsize);
</script>

คำสั่งนี้จะโหลดข้อมูลของรูปมาจาก playground มี parameters คือ

• userid คือ id ของ user เจ้าของรูป
• totalitems คือ จำนวนรูปที่ต้องการโหลด ถ้าไม่ใส่จะมีค่าเป็น 6
• elementid คือ id ของ html element ที่ต้องการนำรูปไปแสดง ตามตัวอย่างคือ pgLatestDiv
• itemsize คือ ขนาดของรูปที่ต้องการ ถ้าไม่ใส่จะมีค่าเป็น "100x100"

ขนาดของรูปทั้งหมดมีดังนี้ ["28x28","30x30","34x34","48x48","50x50","80x80","100x100","208x208","240x240"]

ตัวอย่างการโหลดรูปล่าสุดของ user หมายเลข id "4" จำนวน "12" รูป ขนาดรูป "100x100"

<div id="pgLatestDiv"></div>
<script type="text/javascript">
  pgLatest.load(4,12);
  pgLatest.showPic("pgLatestDiv","100x100");
</script>

---

การโหลดรูปล่าสุดตาม tag ของรูป ใช้คำสั่ง

<div id="pgLatestDiv"></div>
<script type="text/javascript">
  pgLatest.loadTag(tagname,totalitems);
  pgLatest.showPic(elementid,itemsize);
</script>

• tagname คือ ชื่อ tag ของรูปที่ต้องการ
• totalitems คือ จำนวนรูปที่ต้องการโหลด ถ้าไม่ใส่จะมีค่าเป็น 6
• elementid คือ id ของ html element ที่ต้องการนำรูปไปแสดง ตามตัวอย่างคือ pgLatestDiv
• itemsize คือ ขนาดของรูปที่ต้องการ ถ้าไม่ใส่จะมีค่าเป็น "100x100"

ตัวอย่างการโหลดรูปล่าสุดของ tag "ที่ทำงาน" จำนวน "12" รูป ขนาดรูป "100x100"

<div id="pgLatestDiv"></div>
<script type="text/javascript">
  pgLatest.loadTag("ที่ทำงาน",12);
  pgLatest.showPic("pgLatestDiv","100x100");
</script>

---

การกำหนดการแสดงผลด้วย css (Cascade Style Sheet)

โดยโครงสร้าง html ที่ได้จะมีรูปแบบดังนี้

<div id="pgLatestDiv">
    <div class="pglatest-item">
        <a title="link title" href="photo url" class="pglatest-link" target="_blank">
            <img alt="photo title" src="photo source url" class="pglatest-img"/>
        </a>
        <p class="pglatest-title">photo title</p>
	<p class="pglatest-time">photo uploadtime</p>
    </div>
    <div class="pglatest-clear"></div>
</div>

สามารถกำหนดรูปแบบได้จาก css class ที่ได้เตรียมไว้ให้ โดย

• .pglatest-item คือ div ที่ครอบรูปภาพ ลิ้งค์ และชื่อรูปภาพไว้ โดยค่าเริ่มต้นจะแสดงผลเป็น block element และไม่กำหนดขนาด ความกว้างและความสูงไว้
• .pglatest-link คือลิ้งค์ที่ลิ้งค์ไปยังรูปภาพ
• .pglatest-img คือรูปภาพ
• .pglatest-title คือชื่อรูปภาพ หรือวิดีโอ
• .pglatest-time คือเวลาที่อัพโหลดรูปภาพ หรือวิดีโอ
• .pglatest-clear สำหรับ clear float ในกรณีที่สั่งให้ div.pglatest-item แสดงผลแบบ float

หรือนำโค้ด css ต่อไปนี้ ไปใส่ไว้ในส่วน head จะได้รูปแบบเหมือนตัวอย่างด้านบน

<style type="text/css">
<!--
#pgLatestDiv { 
margin-bottom:10px; 
}

.pglatest-item { 
    margin:5px; 
    height:140px; 
    float:left; 
} 

.pglatest-link .pglatest-img { 
    border:1px solid #FFF; 
}

.pglatest-link:hover .pglatest-img { 
    border:1px solid #09F; 
}

.pglatest-title { 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:13px; 
    text-align:center; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    color:#666; 
}

.pglatest-time { 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:10px; 
    text-align:center; 
    overflow:hidden; 
    white-space:nowrap; 
    color:#666; 
}

.pglatest-clear { 
    clear:both; 
}
-->
</style>