من دقیقاً با همین قسمت آخر ماجرا کار دارم. این که یک صفحه‌ای داشته باشم و از طریق آن با یک یا چند نفر دیگر به‌صورت زنده گفت‌وگو کنم و ضمناً تایپ‌کردن من را ببینند و من هم تایپ‌کردن آن‌ها را. آماده‌اید؟

مواد لازم پی اچ پی هست و مای اس کیو ال و کتاب‌خانه‌ی جی کوئری.

ابتدا یک صفحه با نام index.php می‌سازم، کتاب‌خانه‌ی جی‌کوئری را واردش می‌کنم و یک فرم هم که حاوی یک کادرمتن هست در آن قرار می‌دهم:

<form action="" id="htForm">
     <textarea name="chatbox" class="chatbox" id="chatbox"></textarea>
</form>

دیتابیس

در ادامه یک دیتابیس باید بسازم برای ذخیره‌کردن متن گفت‌وگو. دستورات زیر را اس‌کیوال می‌کنم تا جدول و فیلد‌های موردنیازم ایجاد شوند:

CREATE TABLE IF NOT EXISTS `tbl_chat` (
`id` int(11) NOT NULL auto_increment,
`chat` LONGTEXT CHARACTER SET utf8  NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=1 ;

INSERT INTO `tbl_chat` (`chat`) VALUES ('type here...');

پی‌اچ‌پی

حالا یک فایل با نام config.php می‌سازم و با آن به دیتابیسی که ساختم، وصل می‌شوم:

<?php
// Mysql Config; enter your host name, database name, database username and password.
define('DB_HOST', 'localhost');
define('DB_NAME', 'database_name');
define('DB_USER', 'database_username');
define('DB_PASSWORD', 'database_password');

// Connecting to database...
$connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die('Database Error!');
@mysql_select_db(DB_NAME,$connection);
?>

یک فایل دیگر می‌سازم برای ارسال متن به دیتابیس. نام این فایل send.php هست:

<?php
@include('config.php');

$chat = $_POST['chatbox'];
$query = "UPDATE tbl_chat SET chat = '$chat' WHERE id = 1";
$do = @mysql_query($query);
?>

و فایلی دیگر با نام recive.php برای گرفتن متن از دیتابیس:

<?php
@include('config.php');

$query = "SELECT * FROM tbl_chat WHERE id = 1";
$do = @mysql_query($query);
$row = @mysql_fetch_array($do);
echo ($row[chat]);
?>

جی‌کوئری

حالا دیگر کارم با پی‌اچ‌پی تمام شده است؛ می‌روم سراغ جی‌کوئری.

با توابع load() و ajax() قبلاً کارهایی کرده‌ایم (این‌جا و این‌جا). این‌بار هم به این دو تابع پرکاربرد نیاز داریم و اصل کارمان را همین دو تابع انجام می‌دهند.

ابتدا باید متنی که در کادر متن نوشته می‌شود را با تابع ajax() بفرستم برای فایل send.php و این فایل هم متن را می‌گیرد و می‌فرستد به دیتابیس. و البته باید به‌خاطر داشته باشید که می‌خواهم هم‌زمان که در حال تایپ‌کردن هستم، شخص مقابل تایپ‌کردن ِ من را مشاهده کند. پس باید تابع ajax() را در یک رویدادی مثل keyup() قرار بدهم تا با هربار فشردن و رهاکردن یک دکمه‌ی کی‌برد، متن‌ها به دیتابیس ارسال شوند. به‌این‌صورت هر حرف جدیدی که تایپ می‌کنم، ذخیره می‌شود و به این ترتیب، تایپ کردن ِ من به‌صورت زنده مشاهده می‌شود.

$(document).ready(function() {
     $('#chatbox').keyup(function () {

     var chatbox = $('#chatbox');
     var data = 'chatbox=' + chatbox.val();

     $.ajax({
          url: 'send.php',
          type: 'POST',
          data: data,
          cache: false,
          success: function(){}
     });
     return false;
     });
});

تا به اینجای کار، فقط متن گفت‌وگو ذخیره می‌شود و هنوز چیزی از دیتابیس لود نشده است تا شخص مقابل مشاهده نماید. همان‌طور که پیش‌تر هم اشاره کردم، از تابع load() برای لود کردن متن از دیتابیس استفاده می‌کنم و خب باید متن گفت‌وگو درهمان کادرمتن لود شود، پس به این صورت عمل می‌کنم:

$(document).ready(function() {
	$('#chatbox').load('receive.php');
});

فایل recive.php را به تابع لود دادم و از این طریق متن گفت‌وگو لود شده و در کادرمتن #chatbox نمایش داده می‌شود.

اما مسئله این است که به این شکل فقط یک‌بار متن‌ها از دیتابیس لود می‌شوند و متن‌های جدید دیگر مشاهده نخواهند شد. راه حل ساده‌ست، من تابع لود را می‌سپارم به دست یک حلقه تا دائماً اجرا شود و متن‌های جدیدتر نیز لود و دیده شوند. بازه‌ی زمانی حلقه را روی ۱۰۰ میلی‌ثانیه می‌گذارم تا هر تغییر کوچکی که در متن‌های گفت‌وگو ایجاد شود خیلی سریع به شخص مقابل نمایش داده شود:

$(function(){
var timer = setInterval(receive_chat, 100);
});
function receive_chat() {
 $(document).ready(function() {
	$('#chatbox').load('receive.php');
 });
}

کار دیگر تمام است و می‌توانم نتیجه را در صفحه‌ی index.php ببینم.

مشکلی که وجود دارد این است که در چنین روش‌هایی با سرور ریکوئست بالایی روبه‌رو هستیم. این یعنی برای اجرا در پروژه‌های بزرگ، به سرورهای قوی نیاز داریم. تصور کنید که در هر ۱۰۰ میلی‌ثانیه یک ریکوئست فرستاده می‌شود و فایل recive.php اجرا می‌شود. جدا از این، با هربار فشردن یک دکمه از کی‌برد، باز یک ریکوئست ارسال می‌شود و فایل send.php اجرا می‌شود.

منابع:
jQuery ajax()
jQuery load()

به دلیل برخی محدودیت‌ها نمی‌توانم نسخه‌ی دمو از این نمونه قرار بدهم اما می‌توانید آن را همین پایین کامل دریافت کنید:

• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس
• آموزش ویدئویی » شروع کار با CodeIgniter
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر

می‌خواهیم ببینیم چه‌طور می‌توانیم با استفاده از جی‌کوئری محتوایی از صفحات دیگر بگیریم و در یک صفحه بارگذاری‌شان کنیم بدون این که آن صفحه رفرش شود.

فایل‌هایی که داریم:

یک

خب، ابتدا فایل‌های content1.html و content2.html و content3.html را با ادیتورمان باز می‌کنیم و دستورات اچ‌تی‌ام‌ال زیر را در آن‌ها می‌نویسیم و تنها چیزی که قرار هست در هرکدام از فایل‌ها متفاوت باشد، محتوایی هست که در تگ div با آی‌دی #content قرار می‌گیرد؛

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>بارگذاری محتوای صفحات با جی‌کوئری</title>
<link rel="stylesheet" media="all" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/AjaxLoader.js"></script>
</head>
<body>

<div id="wrapper">

  <ul id="nav">
        <li><a href="content1.html">محتوای ۱</a></li>
        <li><a href="content2.html">محتوای ۲</a></li>
        <li><a href="content3.html">محتوای ۳</a></li>
    </ul>
    <div id="content">
        <h2>عنوان محتوای ۱</h2>
      <p>متن محتوای ۱</p>
    </div>

</div>

</body>
</html>

کتابخانه‌ی جی‌کوئری و اسکریپتی که برای بارگذاری صفحات در ادامه خواهیم نوشت را به صفحه‌مان اضافه کردیم (خط‌های ۷ و ۸).  یک منوی ناوبری ایجاد کردیم و در آن به صفحاتی که قرار هست محتوای‌شان را در این صفحه بارگذاری کنیم، لینک دادیم (خط‌های ۱۴ تا ۱۸). در پایینش یک div هم داریم با آی‌دی ِ #content که محتوای بارگذاری‌شده در این قسمت قرار می‌گیرد (خط ۱۹).

دو

حالا می‌رویم سراغ جی‌کوئری. قرار هست کاری کنیم که وقتی روی هرکدام از لینک‌هایی که در منوی ناوبری قرار دادیم، کلیک کردیم، تنها محتوایی که در #content آن قرار دارد را بگیریم و در صفحه‌ای که در آن هستیم بارگذاری‌اش کنیم. یعنی وقتی در صفحه‌ی content1.html هستیم و روی لینک content2.html کلیک می‌کنیم، اسکریپت ما وارد صفحه‌ی content2.html می‌شود و می‌گردد دنبال تگ دیوی که آی‌دی ِ #content دارد و هرچیزی که در آن دیو هست را می‌گیرد و سپس در دیو #content در صفحه‌ی content1.html بارگذاری می‌کند.

$(document).ready(function() {

	var hash = window.location.hash.substr(1);
	var href = $('#nav li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #content';
			$('#content').load(toLoad)
		}
	});

	$('#nav li a').click(function(){

		var toLoad = $(this).attr('href')+' #content';
		$('#content').hide('fast',loadContent);
		$('#load').remove();
		$('body').append('<span id="load">درحال بارگذاری...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#content').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#content').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;

	});

});

وقتی روی هرکدام از لینک‌ها در منوی ناوبری کلیک می‌کنیم، ابتدا با تابع ()attr. مقداری که در href آن لینک هست گرفته می‌شود و از این طریق آن صفحه را بارگذاری می‌کند و البته ما نمی‌خواهیم همه‌ی محتویات آن صفحه بارگذاری شود، بلکه تنها آن چیزی که در دیو #content آن صفحه قرار دارد را می‌خواهیم بگیریم (خط ۱۴).

دیو #content در صفحه‌ای که الان در آن هستیم را حذف می‌کنیم (خط ۱۵).

یک پیغام به‌عنوان Loading بعد از تگ body قرار داده می‌شود (خط ۱۷ و ۱۸).

حالا باید دسترسی‌پذیری کارمان را ببریم بالا. یعنی برای کاربر یک آدرسی وجود داشته باشد که هر زمان خواست محتوای فایل content2.html را ببیند، اول نرود به صفحه‌ی content1.html و روی لینک content2.html کلیک کند و باقی ماجرا، بلکه با استفاده از آدرسی که در ادامه ایجاد می‌کنیم، تنها با وارد کردن آن در نوار آدرس مرورگرش، محتوای content2.html مستقیما برایش بارگذاری شود. چیزی مانند جی‌میل که اگر این آدرس https://mail.google.com/mail/#sent را در نوار آدرس مرورگرتان وارد کنید، لیست ایمیل‌های ارسالی‌تان بارگذاری می‌شود. برای این‌کار باز هم از تابع ()attr. استفاده می‌کنیم و مقدار href لینک را می‌گیریم و بعد ۵ کرکتر از آخرش حذف می‌کنیم تا .html از نام آن صفحه جدا شود. یعنی content2.html بشود content2 (خط ۱۹).

حالا محتوای جدید بارگذاری و سپس نمایش داده می‌شود (خط‌های ۲۰ تا ۲۵).

در آخر هم پیغام Loading را مخفی می‌کنیم (خط‌های ۲۶ تا ۲۸).

تمام

از این سایت هم می‌توانید برای درست‌کردن تصاویر انیمیشنی ِ Loading استفاده کنید.

نمونه‌ای از آنچه با هم درست کردیم را اینجا ببینید و برای دریافت آن همین پایین کلیک کنید!

• ای‌جکس بازی » به‌یاد هایپرترمینال
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید

اتصال به بانک‌اطلاعاتی

برای وصل‌شدن به بانک‌اطلاعاتی، قبل از هرکاری، یک فایل با نام config.php می‌سازیم و آن را با ادیتورمان باز می‌کنیم و کد زیر را در آن می‌نویسیم:

<?php
$db_host = 'localhost';
$db_name = 'your database name';
$db_user = 'your username';
$db_pass = 'your password';
?>

کار خاصی نکردیم، فقط چند متغیر به‌نام‌های db_host، db_name، db_user و db_pass تعریف کردیم که مقادیر آن‌ها را به‌ترتیب، نوع هاست (که اصولا همان localhost می‌باشد)، نام بانک‌اطلاعاتی، نام‌کاربری‌ای که با آن به بانک اطلاعاتی دسترسی پیدا می‌کنیم و در آخر هم رمزعبور را دادیم.

حالا دیگر هرجایی که خواستیم به بانک‌اطلاعاتی وصل بشویم، کافی است این فایل را فراخوانی کنیم.

حذف رکورد

ابتدا باید یک صفحه‌ای برای نمایش رکوردها داشته باشیم. پس یک فایل با نام index.php می‌سازیم و کدهای زیر را در آن می‌نویسیم:

<html>
<head>
<title>حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/delete.js" type="text/javascript"></script>
</head>
<body>
<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Database Connection Error!');
@mysql_select_db($db_name);

$query = "SELECT * FROM my_tbl ORDER BY id DESC";
$result = @mysql_query($query) or die(mysql_error());
while($row = @mysql_fetch_array($result))
{
?>
<div class="record">
<div class="content"><?php echo($row[content]); ?></div>
<div class="date"><?php echo($row[content_date]); ?></div>
<div class="tools"><a class="delete" id="<?php echo($row[id]); ?>" href="#">حذف</a></div>
</div>
<?php
}
mysql_close($connect);
?>
</body>
</html>

در خط نهم، فایل کانفیگ که حاوی مشخصات بانک‌اطلاعاتی‌مان بود را فراخوانی کردیم. در خط یازدهم و دوازدهم، به بانک‌اطلاعاتی وصل شدیم. در خط‌های چهاردهم و پانزدهم هم تیبل ِ موردنظرمان را انتخاب کردیم و از خط شانزدهم تا بیست‌وسوم هم یک حلقه برای نمایش رکوردهایی که در تیبل ِ انتخاب‌شده‌مان قرار دارد ایجاد کردیم.
در خط بیست‌وششم، اتصال به بانک‌اطلاعاتی را بستیم که البته این دستور فقط جنبه‌ی امنیتی دارد و کاری به عمل‌کرد ِ کدمان ندارد.

حالا دیگر فقط دو مرحله پیش ِ رو داریم. اولی نوشتن اسکریپت ِ حذف رکورد با پی‌اچ‌پی و دومی نوشتن کد جی‌کوئری‌ای که درخواست ِ ما (همان حذف رکورد) را بفرستد به اسکریپتی که در مرحله‌ی اول نوشتیم و آن را اجرا کند.

پس اول یک فایل با نام delete.php می‌سازیم و کدهای زیر را در آن می‌نویسیم:

<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Connection Error');
@mysql_select_db($db_name);

$id = $_GET['id'];

$query = "DELETE FROM my_tbl WHERE id = '$id'";
mysql_query($query);

mysql_close($connect);
?>

باز هم در ابتدا فایل کانفیگ را فراخوانی کردیم و بعد از آن هم به بانک‌اطلاعاتی وصل شدیم. در خط هفتم یک متغیر با نام id تعریف کردیم که جلوتر در مورد ماهیتش توضیح می‌دهم. در خط نهم و دهم هم کد مربوط به حذف رکورد را نوشتیم و در پایان اتصال به بانک‌اطلاعاتی را بستیم.

حالا می‌رویم سراغ کد جی‌کوئری‌مان. یک فایل با نام delete.js می‌سازیم و آن را با ادیتورمان باز می‌کنیم. کدهای زیر را در آن می‌نویسیم:

$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
 if(confirm("مطمئنید که قصد حذف این رکورد را دارید؟ این غیرقابل‌بازگشت خواهد بود!"))
		  {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   }
 });
	$(this).parents(".record").css({ backgroundColor: "red" }, "fast")
	.animate({ opacity: "hide" }, "slow");
 }

return false;
});
});

اگر دقت کرده باشید، در صفحه‌ای که رکوردهای‌مان نمایش داده می‌شوند یک دکمه‌ای قرار دادیم که کلاس ِ آن delete هست. به همین خاطر در کد بالا، قبل از هرچیز می‌گوییم که وقتی روی دکمه‌ی حذف کلیک شد، آن‌وقت اتفاقاتی که در ادامه می‌گویم، بی‌اُفتند.

اولین‌کاری که باید بکنیم این هست که شناسه‌ی رکوردی که دکمه‌ی حذف ِ آن را زده‌ایم، مشخص شود. برای این‌کار، در صفحه‌ای که رکوردها نمایش داده می‌شوند، در آی‌دی ِ هر رکورد، شناسه‌ی آن را برمی‌گرداندیم. حالا دیگر کارمان راحت شد و در کد بالا می‌بینید که شناسه‌ی رکورد را خیلی راحت در می‌آوریم (خط‌های ۳ تا ۵). یادتان هست که در فایل delete.php، متغیر ِ $id را ایجاد کرده بودیم؟ مقدار آن برابر با شناسه‌ی رکورد که در کد بالا مشخصش می‌کنیم می‌شود. حالا باید یک پیغام به کاربر بدهیم که اگر آن را تایید کند، آن‌وقت عملیات ِ حذف ِ رکورد انجام بشود.

اصل ماجرا این‌جاست. ما از تابع $.ajax() برای ارسال اطلاعات به اسکریپتی که برای حذف رکورد نوشته بودیم استفاده می‌کنیم. مقدار ِ متد ِ url، را برابر با آدرس فایل delete.php قرار می‌دهیم. این تابع یک متدی دارد به‌نام success. کار اصلی این متد این است که وقتی عملیات با موفقیت انجام شد، یک رویدادی انجام گیرد. مثلاً یک پیغام نمایش داده شود و بگوید که رکورد حذف شد یا یک همچین‌چیزی.
یک افکتی هم در آخر درست می‌کنیم که وقتی رکورد حذف شد، از دید‌مان پنهان شود که در خط‌های پانزده و شانزده، کد ِ مربوط به افکت را می‌بینید. ابتدا رنگ‌زمینه‌ی رکورد را قرمز و بعد از آن، مخفی‌اش می‌کنیم. همین!

این‌جا دمو را ببینید و این نمونه را دریافت کنید:

• ای‌جکس بازی » به‌یاد هایپرترمینال
• آموزش ویدئویی » شروع کار با CodeIgniter
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر

در این پست به معرفی ۵ فرم تماس رایگان برای استفاده در سایت ها و وبلاگ ها می پردازم که همگی به صورت ای جکس و حرفه ای می باشند.

۱- فرم تماس با استفاده از پی اچ پی و جی کوئری – نمایش نمونه

یک فرم تماس متناسب که با استفاده از PHP و JQuery نوشته شده است. هنگام ارسال، فیلدها را چک می کند و در صورت وجود مشکل، پیغام خطای مربوط به آن را نمایش می دهد.

۲- فرم تماس با استفاده از xAjax و PHPMailer – نمایش نمونه

فرم تماسی خوب و امن. برای چک کردن فیلدها و نمایش پیغام خطا از جاوا اسکریپت استفاده می کند.
از توابع xAjax در آن استفاده شده و برای ارسال ایمیل از PHPMailer ِ معروف بهره گرفته است.

۳- فرم تماس جی کوئری – نمایش نمونه

این فرم تماس به طور کامل از جی کوئری استفاده می کند و برای چک کردن فیلدها هم از Jquery form plugin استفاده می کند.

۴- فرم تماس مدرن – نمایش نمونه

در این فرم تماس از script.aculo.us و WForms استفاده شده است.
یکی از ویژگی های منحصر به فرد آن این است که ابتدا به سروری که بر روی آن نصب شده است، متصل می شود و پس از بررسی ِ صحت اطلاعات تماس، اجازه ی ارسال ایمیل را می دهد.
همچنین می توان برای تعداد کاراکترهای به کار رفته در متن تماس، محدودیت ایجاد کرد و تعداد کاراکترها را هم نمایش می دهد.

۵- فرم تماس LightForm – نمایش نمونه

لایتفرم، یک فرم تماس جذاب است. از FormCheck2 برای چک کردن صحت فیلدها و از NiceForms برای استایل دهی به اجزای فرم استفاده کرده است.
یک captcha-like هم دارد برای جلوگیری از اسپم شدن که حاصل جمع ۲ عدد را از کاربر می پرسد. سیستم ارسال ایمیل آن با پی اچ پی نوشته شده است و همچنین آی پی، یوزر ایجنت و صفحه ی ارجاع دهنده ی کاربر را به همراه ایمیل می فرستد.

• ای‌جکس بازی » به‌یاد هایپرترمینال
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• تشخیص پلتفرم‌های مختلف با پی اچ پی

چگونه از پلاگین Lightbox استفاده کنم؟

۱٫ دریافت فایل های موردنیاز:
ابتدا پلاگین Lightbox و سپس کتابخانه ی جی کوئری را دریافت کنید.

Download Lightbox Plugin
Download JQuery Library

نکته: از آنجایی که در تحریم ِ گوگل به سر می بریم، برای دریافت کتابخانه ی جی کوئری، قطعا به مشکل بر می خورید. به همین خاطر می توانید همین الان جی کوئری را از اینجا دریافت کنید.

۲٫ فراخوانی اسکریپت ها و استایل ها:
باید کتابخانه ی جی کوئری و پلاگین Lightbox را در صفحه قرار دهیم. کدهای زیر را بین تگ head قرار دهید:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lightbox-0.4.js" type="text/javascript"></script>

یک فایل سی اس اس هم در پوشه ی پلاگین موجود هست که آن را هم باید در صفحه فراخوانی کنید. توسط کد زیر و مانند کدهای بالا بین تگ head:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

3. فعال سازی:
برای اینکه تصاویر با Lightbox هماهنگ شوند، احتیاجی به تغییر و اصلاح کدهای اکس اچ تی ام ال ندارید. این پلاگین نهایت انعطاف پذیری را داراست.
فقط لازم هست در صفحه یک همچین چیزی داشته باشید:

<a href="image1.jpg"><img src="thumb_image1.jpg" alt="" width="72" height="72" /></a>

حالا اگر روی این تصاویر کلیک کنیم، Lightbox فراخوانی می شود و افکت را اجرا می کند.

اسکریپت زیر را هم داخل تگ head قرار دهید:

<script type="text/javascript"><!--
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
// --></script>

به این صفحه بروید و نمونه ی آنچه که اینجا یاد گرفتیم را ببینید :)

• ای‌جکس بازی » به‌یاد هایپرترمینال
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس