วิธีใช้Jquerylightboxเปิดรูปในหน้าเว็บ

Posted: July 9, 2010 in Jquery
Tags: ,


จะมาใช้  Jquery ในการเปิดรูปขึ้นมาในหน้าเว็บ
ข้อดีก็ ไม่ต้องเปิดหน้าใหม่ หรือ ทำให้เกะกะ งานสวยเรียบร้อยเปิดรุปเพลินๆๆเลย พร้อม description
ตัวอย่าง

มาดูวิธีทำกันเลย

เริ่มต้นก็ไปดาวโหลดไฟล์ jquery lightbox มากันก่อน โหลดโลด
1.พอโหลดมา ก้จะเห้นมี JS  Folder กับ CSS folder  และ  folder images ก็ ก็อบมาใส่ที่งานเรา ต่อจากนั้น เดียวจะเรียกใช้ plugin จากหน้าเว็บเรา
2.ใส่ โค็ต เพื่อเรียก ไฟล์ .JS เข้ามาใช้งาน และ CSSด้วยเน้อ  ใส่ในส่วน <head> tag เนอะ

<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />  <br />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>  <br />
<script type=”text/javascript”>

3. คร่าวนี้เรียกใช้เรียบร้อย ใส่ไอ้นี้ในส่วน head อีกนิส

<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>

4.คร่าวนี้จะมาใส่รูปกันแล้ว

<div id=”gallery”>
<a href=”images/motor.jpg” title=”รถมอไซค์ผมเอง heheheh”><img src=”images/motor.jpg” alt=”” width=”72″ height=”72″ border=”0″ /></a>
</div>

5.เป็นอันเรียบร้อย อยากใส่เพิ่มก็ ใส่ได้เลย ก็อบส่วนนี้ใส่เพิ่มได้เลย

<a href=”images/motor.jpg” title=”รถมอไซค์ผมเอง heheheh”><img src=”images/motor.jpg” alt=”” width=”72″ height=”72″ border=”0″

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s