random image บน header ใน exteen
posted on 21 Feb 2008 12:42 by robocon in Programing** ก่อนอื่นถ้าหน้า Page มัน ดู แปลกๆไปก็ Ctrl+F5 กันไปตามระเบียบก็แล้วกัน **
เป็นอะไรไม่รู้ชอบมาเปลี่ยนธีม ช่วงตอนจะสอบตลอดเลยฮ่าๆ...
ความจริงก็คิดไว้ตั้งนานแล้วล่ะครับว่า จะลองใช้ ดู เพราะเคยเข้าไปดูในบล็อค
ของคุณ NERD GOD ไม่แน่่ใจว่าเป็นเจ้าของเดียวกันกับ http://nerd.exteen.com/ ด้วยรึป่าว
อยากเห็นต้นฉบับ ก็ คลิกตาม link นี้เลยจ้า
แล้วสังเกตุเห็นว่า ภาพตรง head เข้าเปลี่ยนเองได้ด้วย
เวลาเรา Refresh หน้าใหม่ ก็เลยแอบเข้าไปดูใน Styles sheet เลยรู้ว่า
มันใช้ php ได้ด้วยแหะ....แต่เนื่องจากไป view source ดูแล้วปรากฏว่า
มันอ่านเป็นภาษาต่างดาว ก็เลยไปหา code จาก เว็บ hot script มาแทน
(เว็บ hot script ต้องสมัครเป็นสมาชิกก่อนนะครับ)
ถ้าใครขี้เกียจก็ ตาม link นี้เลยจ้าแล้วไปดู code เอาเอง
ส่วนใคร ยัง งง ๆ อยู่ มีวิธีการง่ายๆ คือ ก็อป code นี้ไปซะ
<?php
// Change the folder name to your one in the line below
$folder = "images";
srand( time() );
if ($directory = @opendir($folder)) {
while (($image = readdir($directory)) !== false) {
if ( eregi( '.(jpg|gif)$', $image ) ) { $images[] = $image; }
}
closedir($directory);
}
$image = $images[rand() % sizeof( $images )];
if ( eregi( '.jpg$', $image ) ) {
header( "Content-Type: image/jpeg" );
} else {
header( "Content-Type: image/gif" );
}
header( "Content-Length: " . filesize( $folder."/".$image ) );
readfile( $folder."/".$image );
?>
แล้วก็ save เป็นชื่ออะไรก็ได้ตามที่เราต้องการ ที่เป็นนามสกุล .php
ต่อมาก็สร้างโฟล์เดอร์ที่มีชื่อว่า images ขึ้นมา แล้วก็หาภาพที่เราต้องการยัดใส่เข้าไปในโฟล์เดอร์นั้น
ส่วนไฟล์ php ที่เราสร้างขึ้นมาอยู่นอกโฟล์เดอร์นะครับ
Edit ณ วันที่29/12/51 โฮสต์ภาพมันได้หายไปแล้ว....กาก
ตัวอย่างดังภาพ ไฟล์ php ผม ตั้งชื่อไว้ว่า randomimage.php ส่วนใน โฟล์เดอร์ images ผมก็ใส่ภาพเอาไว้
** ส่วนถ้าใครใช้ชื่อโฟล์เดอร์อื่น ก็เข้าไปเปลี่ยน ใน php บรรทัด $folder = "images"; ก็เปลี่ยนจาก
images เป็นชื่อตามที่เราต้องการนะครับ
ทดสอบก่อนส่งขึ้น host จริงด้วยล่ะครับ เพื่อความชัวร์
ส่วนการประยุกต์ใช้ใน exteen ก็โคตรง่ายเลยครับคือเอามาใส่ในส่วนที่เราต้องการให้เป็น background
อย่างเช่น
#coverimage{
margin-top:32px;
background:url(http://your domainname/your folder/randomimage.php) no-repeat;
height:300px;
width:730px;
}
ดังตัวอย่างผมใช้ในส่วนของภาพ header นะครับ ถ้าลอง F5 จะเห็นว่าสีมันเปลี่ยนไป
แต่ช่วงแรกๆภาพอาจจะโหลดช้านะครับสำหรับคนที่เน็ตช้าๆอย่างผม
เสร็จแล้วครับกับการ random ภาพที่นำมาประยุกต์ใช้ใน exteen ก็นำไป apply กันเอาเองเด้อครับ
สำหรับวันนี้ สวัสดีคร๊าบ
ใครที่ยังสอบไม่เสร็จ หรือว่ากำหลังสอบ ก็ขอให้ตั้งใจอ่านหนังสือมากๆนะครับ
โชค A+++ กันทุกๆคนนะครับ
บ๋ายบาย ~~~~~
เขียนแทรกเข้ามาใหม่ ณ วัน ที่ 29/12/51 เวลา15.01น.
long.rar <<< ไอ่ตัวนี้ผมได้อัพโหลดขึ้นไปไว้ใน FileFactory นะครับ เป็นเคสตัวอย่าง

วิธีโหลด ตามภาพเลยนะครับ ผมไม่ขออธิบายอะไรมากแล้ว
พอโหลดมาแล้วก็ทำการแตก rar เลยครับ แล้วจับ Folder ที่ชื่อว่า long ยัดเข้าไปใน localhost เลย
เสร็จแล้วให้เข้า localhost ตามปกติเลยครับเพื่อดูผลงาน
ตัวอย่างนะครับ ในเครื่องของผมเอง http://localhost/long/
หรือถ้าเราเข้าไปดูใน Folder จะเห็นเป็นดังภาพเลยครับ
stepการทำงานมันก็จะเริ่มจาก ในตัว index ก่อนใช่มั้ยล่ะครับ
แล้วใน file index ก่อน body เราก็แทรกตัว css เข้าไป
ก็จะเป็นการให้ไฟล์ css ทำงานร่วมกับ index
จากนั้นในตัว body ตอนถึง div id="coverimage" ก็คือเราเรียกใช้งาน id นั้นๆ
มันก็จะวิ่งไปหาตัว coverimage ซึ่ง เราตั้ง backgroudไว้เป็นไฟล์ php
มันก็เลยวิ่งไปหาตัว ไฟล์ php ที่เราได้เขียนเอาไว้เอามาใช้งานเป็น Background
หวังว่าคงจะไม่งง นะครับ
ปล. อีกหนึ่งเรื่องคือ ในไฟล์ style.css นั้นตรง coverimage ถ้าเรียกใช้พาธตามปกติไม่ออก
ให้ใส่พาธเต็มไปเลยครับ
อย่างเช่น http://localhost/long/codeimg.php เป็นต้น
เรื่อง Random Image น่าสนใจมากครับ ^^ ขอบคุณนะครับผม พอดีรูปในคลังมีเยอะ...
#1 By ณ on 2008-02-21 13:50