آموزش استفاده از LightBox

[آبجی]

LightBox چیست؟

LightBox یک اسکریپت ساده و غیرمزاحم است که بصورتhttp://pnu-club.com/images/stories/ajaxphp.jpg یک مامبوت در آمده و میتوان از آن برای استفاده بهینه از فضای صفحات وب در هنگام نمایش عکس ها درون متن استفاده کرد. هنگامیکه شما عکسی را میخواهید درون یک متن نمایش دهید ناگزیر به تغییر اندازه آن عکس برای هماهنگی با متن و قالب سایت خود هستید و در این بین ممکن است با کوچک کردن عکس وضوح و زیبایی آن از بین برود. اما LightBox این مشکل را حل کرده است! شما کافیست این مامبوت را بر روی سایت خود نصب کنید تا جادوی LightBox را ببینید! اما قبل از اینکه بخواهید LightBox را نصب کنید، پیشنهاد میکنم یک Demo از آنرا مشاهده کنید:



Lightbox 2 (http://pnu-club.com/redirector.php?url=http%3A%2F%2Fwww.huddletogether .com%2Fprojects%2Flightbox2)



در این صفحه بر روی عکس ها کلیک کنید. آیا واقعا زیبا نیست؟!
و اما مراحل نصب:

1- مامبوت LightBox را از آدرس زیر دانلود و بر روی سایت خود نصب کنید:


http://antti.tuppurainen.fi/lightThumb-v21.zip (http://pnu-club.com/redirector.php?url=http%3A%2F%2Fantti.tuppurainen. fi%2FlightThumb-v21.zip)


2- در این مرحله شما بایستی کد زیر را درون فابل index.php قالب سایتتان قبل از تگ قرار دهید که در واقع به عنوان آخرین کد درون head قرار میگیرد:



<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/mambots/content/lightThumb/prototype.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/mambots/content/lightThumb/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/mambots/content/lightThumb/lightbox.js"></script>
<link href="<?php echo $mosConfig_live_site; ?>/mambots/content/lightThumb/lightbox.css" rel="stylesheet" type="text/css"/>




3- در این قسمت شما باید به بخش مامبوت ها رفته، مامبوت MOSImage را غیر فعال کنید، مامبوت LightThumb را فعال کنید. توجه داشته باشید که مامبوت LightThumb در لیست مامبوت ها اول از همه قرار گرفته باشد. معمولا در لیست مامبوت ها MOSImage اول از همه قرار گرفته و شماره چینش(order) آن هم 1000- است. شما بایستی این شماره را به عددی دیگر مثل 2 تغییر دهید و دکمه ذخیره چینش(save order) را بزنید تا بتوان LightThumb را به اول لیست آورد. حال سیستم شما آماده استفاده از LightBox می باشد!
عکس مورد نظر خود را اینبار با همان اندازه واقعی و بزرگش! در سایت خود آپلود کنید و همانند سابق درون متن با استفاده از { mosimage } آنرا فراخوانی نمایید. و در آخر به سایت خود رفته و متنی را که در آن عکستان را قرار داده اید تماشا کنید. بر روی عکس کلیک کنید! آیا واقعا زیبا نیست؟