Css Random pic from Rearrange Albums

หลังจากได้เรียนรู้วิธี random ภาพ ไปเมื่อสองสามวันก่อนรู้สึกสนุกดีเลยนำไปประยุกต์ใช้เพิ่มครับ

เคยสงสัยไว้นานแล้วว่า  ถ้าเรามีอัลบั้มภาพมากๆเข้า เวลาจะเข้าไปดูแต่ละอันก็ต้องตั้งใจเข้าไปดูจากหน้า photo ทีละหน้า ซึ่งถ้าไม่เข้าไปดูอีกเลย  บางทีอัลบั้มนั้นๆก็อาจจะถูกลืมไปเลยก็ได้  (เพราะอัลบั้มเยอะ แหะๆ)
แล้วจะมีวิธีไหนบ้าง ที่จะเอารูปเหล่านั้นขึ้นมาดูย้ำเตือนความทรงจำ  จะทำลิ้งค์ทีละรูปทำสไลด์ทีละรูปก็ดูเหนื่อยไปหน่อย

พอมาเจอวิธีแรนด้อมภาพ เลยเกิดปิ้งไอเดียครับ

งั้นเราก็แรนด้อมภาพขึ้นมาโชว์เองเลยดีก่า เข้ามาทีก็จะเห็นปกอัลบั้ม 1 อัลบั้ม เปลี่ยนไปเรื่อยๆไม่ซ้ำกัน  เหมือนที่เห็นตอนนี้ข้างบนเฮดเดอร์โน่น

จริงๆแล้ว อยากมีหน้าหนึ่งที่มีภาพรันขึ้นมาทุกอัลบั้ม เหมือนที่ piclens ทำได้
แต่ตอนนี้ยังทำแบบนั้นไม่เป็น จึงเอาแค่ภาพมาโชว์ทีละภาพก่อนละกัน


ในขั้นตอนการแรนดอม จะต้องได้รายชื่อภาพ(ผมใช้ภาพปกอัลบั้ม)ทั้งหมดมาก่อนว่าอยู่ที่ไหนบ้าง
ซึ่งที่ที่เราจะเข้าไปหารายชื่อปกอัลบั้มทั้งหมดนั้นก็คือ ที่นี่ครับ 

หากเข้าไปที่ photos ของตัวเอง แล้วมองลงไปข้างล่าง คลิ้กที่ลิ้ง Rearrange Albums  ก็จะพบอัลบั้มของเราทั้งหมดเรียงกันเป็นพืด

ขั้นตอนต่อมา คือ ลอกที่อยู่ของรูปหน้าปกอัลบั้มที่เห็นมาเซฟเป็นไฟล์เพื่อแรนดอม  วิธีคัดลอกของผมคือ ผมใช้ firefox ซึ่งสามารถคลิกขวาที่หน้าที่มีรูป แล้วเลือก view page info  แล้วเลือกไปที่ media ก็จะเห็นที่อยู่ของรูปภาพทั้งหมด ก็เลือกก้อปเอามาเซฟเพื่อทำแรนด้อมได้โดยง่ายครับ


วิธีใช้อย่างง่ายคือ วางแท้ก html ลงไปแบบนี้  เช่นที่ผมวางไว้บนไตเดิ้ล
*img src="http://202.44.54.2/cskku12/temp/random.php?file=http://ที่อยู่ของเท้กไฟล์ที่เซฟมา.txt" border="0">

อย่าลืมแทนค่า * ด้วย <



วิธีใช้แบบยากขึ้นมาหน่อยคือ  เอาไปวางไว้ที่headshot ครับ

ผมลองทำตัวอย่าง วางที่เฮดชอตไว้สองเวป ลองเข้าไปดูได้  ilovemacro และ plantlovers
ทั้งสองเวปนี้ ตรงเฮดชอตจะเป็นรูปที่แรนดอมมาจากหน้า Rearrange Albums  ครับรีเฟรชที รูป hs ก็จะเปลี่ยนที

โดยใช้โค้ดนี้ครับ


.railbody .userlogo a img#user_logo_image {
visibility:hidden;
}

.railbody .userlogo {
background:white url(http://202.44.54.2/cskku12/temp/random.php?file=http://ที่อยู่ไฟล์.txt);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
}

.railbody .userlogo a, .railbody .userlogo a:link, .railbody .userlogo a:visited { visibility:hidden;
}



จบ ห้วนๆ

--------------------------------------

ภาคสองครับ

ขอก้อปมาเลยละกัน  เครดิต  http://sawasdeemultiply.multiply.com/links/item/1070/1070

การทำ random background Sep 20, '09 4:07 AM by CloveR for everyone Link: http://app.cloverink.com/fwurl.php จำได้ว่า เคยเห็นคนทำอยู่ครับ แต่ผมหาไม่เจอ เลยมานั่งทำเอง พอทำแล้วก็มาแชร์ให้คนอื่นๆใช้กันน่ะครับ  มาเริ่มวิธีกันเลยดีกว่า 1) หาภาพที่ต้องการจะ random ทั้งหมดมาก่อน ( เป็น url นะครับ ) 2) นำ url ของข้อ 1 มาต่อท้ายเว็บตัวนี้ตัวนี้ครับ http://app.cloverink.com/fwurl.php?url=XXX,YYY 3) ลองเข้าไปยัง url ที่สร้างขึ้นมาในข้อ 2 เพื่อตรวจสอบว่าเข้าได้หรือไม่ 4) หากเข้าได้แล้วลอง refresh ระบบจะทำการ random รูปภาพออกมาให้เจ้าของภาพเองครับ 5) กลับไปเว็บของเรา แล้ว customize css ครับ 6) นำ url ในข้อ 2 ไปใส่ไว้ใน code css ที่ไว้แสดง background ได้เลยครับ ex. h1#page_owner_title{ background:url(http://app.cloverink.com/fwurl.php?url=http://xxxx/yyyy.jpg,http://yyyy/zzz.jpg) repeat-x top center; } ปล. สำคัญมากครับ อย่าลืม ใส่ http:// ใน url ที่ใส่ต่อท้ายเข้าไปนะครับ  สามารถเข้าไปอ่าน manual ที่ตัว app โดยตรงได้ครับ ^ ^ ref: http://app.cloverink.com/fwurl.php