چگونه از پلاگین 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 یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس