ไปเจอมาอีกแล้ว ของที่ต้องใช้ในอนาคต !!

พอดีนั่งทำเว็บอยู่แล้วความต้องการคือ มีรูปภาพกิจกรรมอยู่อยากจะทำเป็นแกลลอรี่ เพื่อประชาสัมพันธ์กิจกรรมขององค์กรหรือสถานที่นั้น ๆ นั่งหาอยู่ครึ่งวัน ก็โอเค ได้ตัวนี้ลงตัวดี เป็นคอมโพเน้นท์ชื่อ LightGallery รูปแบบการแสดงผลสามารถแสดงทั้ง หมวดหมู่ แล้วคลิ๊กที่หมวดหมู่นั้นแล้วเจอรูปข้างในมากมาย ถึงจะอัพรูปได้เพียงครั้งละรูป แต่ก็โอเคเรายอมได้ เมื่อคลิ๊กที่รูปการแสดงผลจะเป็นลักษณะแบบ Lightbox และภาพจะเริ่มวิ่งเป็นสไลท์โชว์ไปเรื่อย ๆ จนหมดอัลบัมนั้น
การใช้งาน ตัวนี้มีเพียวแค่คอมโพเน้นท์เพียงตัวเดียว การติดตั้ง ทำการติดตั้งแบบปกติ (ศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)

เมื่อติดตั้งแล้วก็เข้ามาที่ components >> LightGallery

หน้าตาก็เป็นประมาณนี้ครับ ขั้นแรกก่อนจะอัพโหลดรูปขึ้นไปต้องมี category (ประเภทหรือโฟล์เดอร์ที่เก็บรูป) เสียก่อน

โดยการคลิ๊กที่ new

กำหนดชื่อ Category ตารางที่มี (*) จำเป็นต้องใส่ข้อมูล
ตั้งชื่อ Category เรียบร้อยแล้วจากนั้นก็ทำการ save

การอัพโหลดรูปภาพ เข้าที่แท็บเมนู LightGallery images

คลิ๊กที่ new เพื่อสร้างการอัพโหลดใหม่

เลือก category ใส่ชื่อ images title (รองรับภาษาไทย) จากนั้นกดปุ่ม browse.... เพื่อเลือกรูปภาพจากในเครื่อง จากนั้นให้ทำการ save

รูปภาพก็จะถูกอัพโหลดแล้วมาแสดงใน list รูปภาพ

ขั้นตอนต่อไปก็ทำการสร้างลิ้งก์เมนูเพื่อลิ้งก์เข้าไปหาตัวคอมโพเน้นท์โดยเข้าที่ admin menu >> menus >> main menu

คลิ๊กที่ new เพื่อสร้างเมนูใหม่

คลิ๊กเลือกที่ LightGallery จะมีเมนูการแสดงผล 2 แบบ เลือกเอาอันใดอันหนึ่ง จากนั้นทำการ save

ลอง perview ดู ก็จะเป็นแบบนี้


เมื่อคลิ๊กขยายรูปก็จะเป็นลักษณะนี้
ดาวน์โหลด LightGallery
ที่มา : http://www.joomlathaiclub.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น