ขอบคุณทุกท่านครับ
หน้าใจริง ๆ ผมก็อยากได้แบบเลื่อน ๆ ดูง่าย ๆ ครับ
อยากลองใช้ fancybox แต่ก็แกะยากจั มีท่านไหนแนะนำผมทีครับ
วิธีใช้เบื้องต้นครับ
http://fancybox.net/howto ดาวน์โหลดไฟล์ครับ เลื่อนลงมาเรื่อยๆ จะมีให้กดโหลด ส่วนบนๆจะเป็นวิธีใช้+ตัวอย่างครับ ( ไม่แน่ใจติดLicenseไหมลองดูครับ ถ้าติดก็หาเจ้าอื่น จะใช้งานเหมือนๆกัน )
http://fancyapps.com/fancybox/ สรุปคร่าวๆประมาณนี้ครับ
1. ใช้ <!DOCTYPE html> ก่อนครับ แล้วค่อยขึ้น <html> ตามปกติ
2. Include Javascript ไว้ใน <head> ครับ จะใช้แบบ Download มาเอง หรือจะใช้ CDN ของเค้าเลยก็ได้ไม่ต้องโหลด
3. เพิ่ม CSS ครับ โหลดในเว็บเขาจะมีมาให้ แค่เพิ่มใน <head> เช่นเดิม
4. สร้าง Tag A Link ครอบรูปภาพไว้ครับ แล้วใส่ href เป็นที่อยู่ของไฟล์ภาพเช่นเดียวกับ src ของ <img>
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
5. สร้างไฟล์ Javascript (.js) มาสักอันครับแล้ว Include ไว้ใน <head> เช่นกัน และใส่โค๊ดด้านล่างลงไป
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
});
สังเกตุว่า $("a#single_image") จะเป็นการเรียก tag a ที่ id = single_image ตาม code ด้านบน ให้เรียกการทำงานของ fancybox ครับ
ซึ่งต้องตั้งให้ตรงกัน หากใน <a id="abc"> แต่ใน javascript ตั้งเป็น $("a#xyz") ก็จะไม่ทำงานครับ ^^
เสร็จเรียบร้อย ส่วนถ้าจะ Custom ก็มีตัวอย่างในเว็บครับ
ผิดถูกประการใดขออภัยไว้ ณ ที่นี้ด้วยครับ
ส่วนแบบคุณ wasantec บอก เลือกภาพซ้าย แล้วภาพขวาเปลี่ยน
ผมใช้อยู่กับเว็บ easycar ครับ โดยเป็นของ Slick ครับ
http://kenwheeler.github.io/slick/ ลองดูในส่วน Demo จะมีแบบคลิก Thumbnail แล้ว ภาพ Full เปลี่ยนครับ
^^ สงสัยไหนเพิ่มเติมถามได้ครับ