می خواهیم توسط پلاگین 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 فراخوانی می شود و افکت را اجرا می کند.
درواقع یک همچین روالی انجام می گیرد:
<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>
به این صفحه بروید و نمونه ی آنچه که اینجا یاد گرفتیم را ببینید :)
