สำหรับภาพตัวอย่างที่ผมนำมาเสนอก็เป็นเว็บของลูกค้าผมเองครับขออนุญาติเค้ามาแล้วใจดีจริงๆ
ก่อนอื่นดาวน์โหลด Source ไปก่อนล่ะกันนะครับ
Download
1. ก่อนอื่นต้องทำการติดตั้ง เรียกใช้ Jquery Framework และ Plugin เพื่อใช้งาน
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
นำ code ทั้งหมดไปวางไว้ข้างใน Tag <head>…</head>ครับ
2.แทรกโค้ด CSS ส่วนหัวของเว็บครับ
<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />
3.นำ code นี้ไปวางไว้ที่ Tag <body>…</body>ครับ
ใส่ <div id="gallery"> ด้านบนสุดของส่วนภาพ
ใส่ </div> ท้ายสุดของส่วนภาพ
**** เพียงเท่านี้เราก็ได้เทคนิคการโชว์รูปสวยๆแล้วน่ะครับบางทีอะไรที่ดีๆก็ไม่ได้ยากเสมอไป ****
ไม่มีความคิดเห็น:
แสดงความคิดเห็น