[แจกฟรี] Intro Page ไว้อาลัยในหลวง

เป็น Intro Page และยังเป็น Gallery แบบหน้าเดียวได้ในตัว ตัวอย่างนี้ผมใช้แสดงรูปภาพในหลวงรัชการที่ 9 ในช่วงไว้อาลัยสุดท้าย ก่อนจะมีการถวายพระเพลิงพระบรมศพ ในวันที่ 26 ต.ค. 2560
การนำไปใช้งาน ถ้าต้องการใช้เป็น Intro Page สามารถนำไฟล์ทั้งหมดไปวางไว้ที่ root ของเว็บไซต์ได้เลย แต่ก่อนจะแทนที่ต้องตรวจสอบก่อนว่ามีไฟล์ index.html อื่นๆ อยู่หรือไม่ ถ้ามีและเป็นไฟล์ที่จำเป็นของเว็บไซต์จะไม่สามารถนำไปแทนที่ได้ ให้เปลี่ยนชื่อไฟล์ index.html ของ Intro Page เป็นชื่ออื่นก่อน (เช่น intro.html)

รูปภาพตามตัวอย่าง มีทั้งหมด 36 รูป (0.jpg - 35.jpg) สามารถเปลี่ยนเป็นรูปภาพที่ต้องการได้ สามารถใช้รูปขนาดใดก็ได้ แต่ไม่แนะนำให้ใช้รูปขนาดเล็กหรือขนาดใหญ่เกินไป เนื่องจากอาจจะเสียเวลาในการรอโหลดภาพ เมื่อมีการแก้ไขจำนวนรูปภาพให้แก้ไข tag figure ตามจำนวนไฟล์รูปภาพที่มี
<figure><a style="background-image:url(img/0.jpg)"></a></figure>

และควรแก้ไขขนาดของรูปภาพและจำนวนแถวที่ต้องการ ให้เหมาะสมกับจำนวนรูปภาพที่มี
/* ขนาดรูปเล็กสูงสุด */
var thumb_width = 200;
/* จำนวนแถวของรูปภาพ */
var rows = 4;

สามารถแก้ไขข้อความในไตเติลบาร์ได้
<title>สถิตอยู่ในใจตราบนิรันดร์ น้อมสำนักในพระมหากรุณาธิคุณเป็นล้นพ้นอันหาที่สุดมิได้ ข้าพระพุทธเจ้า xxxx xxxxxx</title>

ลิงค์ด้านล่างก็สามารถแก้ไขได้เองเช่นกัน
<a class=next href="index.php">เข้าสู่เว็บไซต์...</a>


ในกรณีที่เรียกไปยัง URL ของเว็บไซต์แล้วแต่ไม่ยอมแสดง Intro Page (เช่น https://www.goragod.com/) อาจเป็นเพราะ Server มีการกำหนดค่าหน้าแรกเป็นอย่างอื่นอยู่ (ค่าเริ่มต้นทั่วๆไปคือ index.html) เราสามารถเปลี่ยนชื่อไฟล์ Intro Page ให้สอดคล้องกับค่าที่กำหนดไว้ได้ (อาจต้องสอบถามจากผู้ดูแล) หรือในกรณีที่สามารถใช้ .htaccess ได้ ให้กำหนดค่าหน้า Intro Page เป็นอันดับแรกลงใน .htaccess
<IfModule mod_rewrite.c>
   RewriteEngine On
   DirectoryIndex index.html index.php
   .....
</IfModule>

ในกรณีนี้ index.html คือหน้า Intro Page และ index.php คือหน้าเว็บไซต์ปกติ

เว็บไซต์ตัวอย่าง https://acc.in.th/index.html

ดาวน์โหลดโค้ดได้จาก Github

หากต้องการสนับสนุนผู้เขียน สามารถบริจาคช่วยเหลือค่า Server ได้ที่
ธนาคาร กสิกรไทย สาขากาญจนบุรี
เลขที่บัญชี 221-2-78341-5
ชื่อบัญชี กรกฎ วิริยะ
0SHAREFacebookLINE it!