یک طراح وب » jquery http://aliha.ir آدم ها را نمی توان فقط به یک یا چند موضوع ِ خاص، محدود ساخت. آدمی که این پشت نشسته است، از هر موضوعی می نویسد! Sat, 10 Jul 2010 13:06:19 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری http://aliha.ir/2010/04/15/ajax-record-delete-from-database-with-jquery/ http://aliha.ir/2010/04/15/ajax-record-delete-from-database-with-jquery/#comments Thu, 15 Apr 2010 17:31:36 +0000 علیها http://aliha.ir/?p=1446 بعضی‌ها فکر می‌کنند که مثلاً جی‌کوئری فقط برای درست‌کردن ِ افکت‌ها و این‌چیزهاست، درصورتی که اصل ِ جی‌کوئری، ماجرای فرستادن درخواست و گرفتن پاسخ از سمت آقای سرور به‌صورت ای‌جکس می‌باشد که الان می‌خواهیم به یک مورد کوچکی از آن اشاره کنیم. این‌که چه‌طور یک رکورد از بانک‌اطلاعاتی‌مان را بدون بارگذاری‌شدن ِ هیچ صفحه‌ای حذف کنیم. این‌کار را بر پایه‌ی پی‌اچ‌پی انجام می‌دهیم.

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

برای وصل‌شدن به بانک‌اطلاعاتی، قبل از هرکاری، یک فایل با نام 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 هست. به همین خاطر در کد بالا، قبل از هرچیز می‌گوییم که وقتی روی دکمه‌ی حذف کلیک شد، آن‌وقت اتفاقاتی که در ادامه می‌گویم، بی‌اُفتند.

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

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

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

]]> http://aliha.ir/2010/04/15/ajax-record-delete-from-database-with-jquery/feed/ 17 ساخت ِ یک نمایش اسلایدی ساده به‌وسیله‌ی جی‌کوئری http://aliha.ir/2009/10/28/a-simple-jquery-slideshow/ http://aliha.ir/2009/10/28/a-simple-jquery-slideshow/#comments Wed, 28 Oct 2009 16:38:20 +0000 علیها http://aliha.ir/?p=1297 نمایش اسلایدی یا همان SlideShow، برای نمایش تصاویر، به‌صورت متحرک و پشت ِ سرهم به‌کار می‌رود. احتمالا نمونه‌هایی‌ از نمایش اسلایدی را در سایت‌های مختلف مشاهده کرده‌اید.

به روش‌های مختلف می‌شود نمایش اسلایدی ساخت، اما جی‌کوئری کارمان را در این مورد بسیار آسان و حجم کدمان را مقادیری کم‌تر کرده است. در ادامه، روش ِ ایجاد ِ نمایش اسلایدی‌ای که ایشان ساخته‌اند را باهم مرور می‌کنیم ببینیم چه می‌شود :)

jquery slideshow

لازم هم نیست که بگویم کتاب‌خانه‌ی جی‌کوئری را ابتدا از این‌جا بگیرید و اگر نشد، می‌توانید آن را از این‌جا بگیرید؟

کدهای اچ‌تی‌ام‌ال ِ زیر را می‌نویسم:

<div id="slideshow">
    <img src="01.jpg" alt="Slideshow Image 1" class="active" />
    <img src="02.jpg" alt="Slideshow Image 2" />
    <img src="03.jpg" alt="Slideshow Image 2" />
</div>

نکته: حتما باید کلاس ِ اولین تصویر، active باشد.

دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه می‌کنیم و آن را خوب هَم می‌زنیم :دی

#slideshow {
    position:relative;
    height:350px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}

خب، حالا یک فانکشن با نام ِ slideswitch تعریف می‌کنیم و کدهای مربوط به افکت ِ نمایش اسلایدی‌مان را در آن می‌نویسیم:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

مدت‌زمان توقف هرعکس بسته به مقداری‌ست که به setInterval() می‌دهید (خط 19). الان روی 5000 یعنی 5 ثانیه می‌باشد که باتوجه به نیاز خود می‌توانید آن را تغییر دهید.

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

download-zips

]]> http://aliha.ir/2009/10/28/a-simple-jquery-slideshow/feed/ 20 با کمک جی‌کوئری، یک شمارنده برای افتتاح سایت‌تان طراحی کنید http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/ http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/#comments Thu, 08 Oct 2009 15:55:38 +0000 علیها http://aliha.ir/?p=1256 از من می‌پرسید به نظرم به‌تر هست همیشه برای کارهای‌تان ارزش قائل شوید. چون اولین گام ِ موفقیت، اهمیت دادن به آن کار است. پس چه به‌تر که از همان آغاز، یک شروع ِ جالب داشته باشیم.

بگذریم. می‌خواهیم یک چیز ِ کوچولو درست کنیم که تا زمان ِ آغاز به‌کار ِ سایت یا وبلاگ و یا هرچیز ِ دیگری که هست، تعداد روزها و ساعات ِ باقی‌مانده را برای بازدیدکننده‌گان بشمارد. مثلا بگوید “به‌زودی تا 5 روز و 8 ساعت و 27 دقیقه و 40 ثانیه‌ی دیگر سایت افتتاح خواهد شد” یا یک همچین‌چیزی :)

coming-soon

کار ِ سختی نیست. اول، کتاب‌خانه‌ی جی‌کوئری را از اینجا بگیرید (اگر اجازه نداد، از اینجا بگیرید).

سپس این اسکریپت را دریافت کنید.

یک فایل با نام index.html بسازید و کدهای زیر را در آن بگذارید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>به‌زودی...</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<center><div id="count_down_container"></div></center>
<script type="text/javascript">
var currentyear=new Date().getFullYear()
var target_date=new cdtime("count_down_container", "december 31, "+currentyear+" 18:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
</body>
</html>

در خط ِ 12، تاریخ ِ مربوط به پایان ِ شمارنده را باید تعیین کنید. مثلا من آن را روی آخرین روز ِ سال گذاشته‌ام. یعنی 31اُم دسامبر و همچنین هجده ساعت هم به آن اضافه کرده‌ام.

حالا دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه کنید:

body {background-color: #ddeef6;}
#count_down_container {color: #e43c01; font: bold 150px Georgia; direction: rtl;}
sup {font: bold 13px Tahoma; color: #666; margin-left: 60px;}

در انتخاب‌گر ِ count_down_container، دستورات مربوط به فونت و ظاهر ِ اعداد ِ شمارنده را تعریف می‌کنیم.

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

download-zips

]]> http://aliha.ir/2009/10/08/coming-soon-page-with-jquery/feed/ 24 با استفاده از جی کوئری، عناصر را مخفی یا نمایش دهید! http://aliha.ir/2009/07/24/jquery-show-hide-plugin/ http://aliha.ir/2009/07/24/jquery-show-hide-plugin/#comments Fri, 24 Jul 2009 16:40:07 +0000 علیها http://aliha.ir/?p=1168 تصور کنید محتوای بخشی از وبلاگ یا سایتتان، بسیار زیاد یا به عبارتی طولانی شده است. مثلا آرشیوی چند ساله دارید که با گذشت زمان، به تعداد ماه های آن اضافه شده است و یک شکل طویل به خود گرفته است. به نظر من که کمی زشت می کند ظاهر سایت یا وبلاگ را.

show-hide-jquery

می خواهیم با کمک جی کوئری، کاری کنیم که وقتی روی چیزی مثل “آرشیو” کلیک کردیم، آرشیو وبلاگ نمایش داده شود یا به اصطلاح باز شود و اگر دوباره روی همان کلیک کردیم، بسته و مخفی شود. البته روشی که قرار هست یاد بگیریم را می توانید برای کارهای مختلف استفاده کنید که یکی از آن همینی هست که گفتم. همان آرشیو و این صحبت ها…

مثل همیشه ابتدا اگر کتابخانه ی جی کوئری را ندارید، آخرین نسخه ی آن را از اینجا دریافت کنید (اگر نشد از اینجا بگیرید).

1. جی کوئری

کتابخانه ی جی کوئری را به صفحه اضافه می کنیم (در قسمت head):

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

کدهای زیر را در قسمت head قرار دهید. می بینید چقدر ساده و کوچولو است؟ :)

<script type="text/javascript">
$(document).ready(function(){
$("#toggle-content").hide();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next("#toggle-content").slideToggle("slow");
});
});
</script>

2. اچ تی ام ال

کدهای اچ تی ام ال زیر را قرار دهید:

<h2 class="trigger" id="title-trigger">نمایش / مخفی</h2>
<div id="toggle-content">
<ul>
<li>July 2009</li>
<li>June 2009</li>
<li>May 2009</li>
</ul>
</div>

یک گزینه گذاشتیم برای باز و بسته کردن و یک لیست هم درست کردیم به عنوان آرشیو.

3. سبک دهی – سی اس اس

حالا دستورات سی اس اس زیر را هم اضافه می کنیم:

.trigger {
cursor: pointer;
}
#toggle-content {
overflow: hidden;
}

نکته ای که مورد توجه است این است که اگر می خواهید درحالت پیش فرض، محتوا نمایش داده شود، باید در ابتدای اسکریپت:

$("#toggle-content").hide();

دستور hide را به show تغییر دهید و همینطور برعکس، اگر می خواهید در حالت پیش فرض، محتوا مخفی باشد، hide بگذارید.
خب تمام شد. حالا دیگر یاد گرفته اید از این افکت در طراحی های خود استفاده کنید :)

می توانید نمونه ی این افکت را ببینید و همچنین یک مثال کامل از این افکت را دریافت کنید:

download-zip

]]> http://aliha.ir/2009/07/24/jquery-show-hide-plugin/feed/ 27 آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری http://aliha.ir/2009/06/04/easiest-tooltip-using-jquery/ http://aliha.ir/2009/06/04/easiest-tooltip-using-jquery/#comments Thu, 04 Jun 2009 13:38:37 +0000 علیها http://aliha.ir/?p=1119 همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.

tooltip-23213

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

1- ایجاد پنجره شناور متنی – نمایش نمونه

برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:

ابتدا این اسکریپت را دریافت کنید.

سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:

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

با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.

دستورات سی اس اس زیر را هم اضافه می کنیم:

#tooltip{
position:absolute;
border:1px solid #eee;
background:#f9f9f9;
padding:2px 5px;
color:#999;
display:none;
font: 11px Tahoma;
}

حالا کافی است یک لینک مانند زیر داشته باشیم:

<a class="tooltip" title="یک طراح وب" href="http://aliha.ir/">یک طراح وب</a>

هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.

2- ایجاد پنجره شناور تصویری – نمایش نمونه

اسکریپت آن را از اینجا دریافت کنید.

مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.

حالا دستورات سی اس اس زیر را باید اضافه کنیم:

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

سپس در پرونده HTML، کدهای زیر را قرار می دهیم:

<ul>
<li><a class="preview" href="1.jpg"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="2.jpg"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="3.jpg"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="4.jpg"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>

همانطور که می بینید، یک لیست از چند تصویر ایجاد کردیم و به لینک شان، کلاس ِ preview دادیم.

پنجره شناور تصویری مان ایجاد شد :) می توانید به لینک های تصاویر، title هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.

فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(250 کیلوبایت):

download-zip

]]> http://aliha.ir/2009/06/04/easiest-tooltip-using-jquery/feed/ 25 معرفی 5 فرم تماس ِ رایگان ِ ای جکس http://aliha.ir/2009/05/30/5-free-ajax-contact-form/ http://aliha.ir/2009/05/30/5-free-ajax-contact-form/#comments Sat, 30 May 2009 14:45:29 +0000 علیها http://aliha.ir/?p=1100 اگر صاحب یک وبلاگ یا وبسایت باشید، مسلما یکی از نیازهای اساسی تان داشتن ِ یک فرم تماس ِ ایده آل است که کارایی لازم را دارا باشد.
فرم های تماس می توانند خیلی ساده و ابتدایی و یا خیلی حرفه ای و دارای امکانات باشند که بسته به نیاز خود، از آن ها استفاده می کنیم.

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

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

contact-form-with-php-ajax

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

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

contact-form-with-phpmailer-xajax

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

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

contact-form-jquery

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

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

contact-form-chic

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

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

contact-form-lightform

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

]]> http://aliha.ir/2009/05/30/5-free-ajax-contact-form/feed/ 11 پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر http://aliha.ir/2009/01/30/how-to-use-lightbox-jquery-plugin/ http://aliha.ir/2009/01/30/how-to-use-lightbox-jquery-plugin/#comments Fri, 30 Jan 2009 23:19:49 +0000 علیها http://aliha.ir/?p=795 می خواهیم توسط پلاگین Lightbox، تصاویری که در صفحات خود داریم را در پنجره ای به صورت ایجکس نمایش دهیم همراه با افکتی زیبا.
البته این پلاگین برای سیستم هایی مثل مووبل تایپ یا وردپرس، هماهنگ شده است و خیلی راحت می توانید از آن در این سیستم ها استفاده کنید. پلاگین Lightbox برای مووبل تایپ را از اینجا و برای وردپرس را از اینجا دریافت کنید.
مسلما این آموزش برای کسانی است که از موبل تایپ یا وردپرس استفاده نمی کنند و صرفا می خواهند با خود ِ Lightbox آشنا شوند.

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

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

Download Lightbox Plugin
Download JQuery Library

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

2. فراخوانی اسکریپت ها و استایل ها:
باید کتابخانه ی جی کوئری و پلاگین 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>

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

]]> http://aliha.ir/2009/01/30/how-to-use-lightbox-jquery-plugin/feed/ 33