از امروز و در پست های بعد مربوط به این موضوع مي‌خواهيم در مورد پلاگين‌هاي جي‌كوئري صحبت كنيم. قبلا در موردپلاگين‌هاي جي‌كوئري صحبت كرده‌ايم و توضيح داده‌ايم كه پلاگين ياافزونه‌هاي جي‌كوئري، ابزار‌هايي هستند كه توسط توسعه‌دهندگان اينفريم‌ورك نوشته مي‌شوند و جهت استفاده در اختيار همگان قرار مي‌گيرند. امابگذاريد تا پلاگيني كه در اين پست قرار است از آن در كار‌هاي جديدتاناستفاده كنيد را معرفي كنيم. شايد تا به‌حال سايت‌هايي كه آنها را وب2مي‌نامند بازديد كرده و زماني كه بر روي تصاوير موجود در آنها كليككرده‌ايد با جلوه خاصي روبرو شده باشيد. اين جلوه شايد چيزي شبيه به تاريكشدن كلي صفحه و پس‌از‌آن نمايش تصوير در اندازه اصلي بوده باشد. استفادهصحيح از تصاوير و نمايش آن در زمان مناسب يكي از خصوصيات وب جديد است.
يكياز رايج‌ترين روش‌هاي جديد در نمايش تصاوير در اندازه اصلي، همين روش است.نمايش تصوير در يك زمينه تاريك! اما ايده اين طرح از كجا گرفته شد؟ اگر تابه حال به صحبت‌هاي يك عكاس توجه كرده باشيد حتما در صحبت‌هايش اين نكتهرا شنيده‌ايد كه تصاوير در فضاي تيره و تاريك، نماي بهتري را از خود بهنمايش مي‌گذارند و يا در اصطلاح، بهتر خودشان را نشان مي‌دهند!
حالدر طرح‌هاي جديد وب نيز از اين نظر استفاده شده و براي اين‌كه تصاوير رابهتر نمايش دهند، آنها را در نمايي تيره براي بازديدكنندگان به نمايشمي‌گذارند.
اكنون به سراغ كار برويم و اين روش را در طرح‌هاي خود به‌كار بگيريم. اين پروژه هم اكنون بر روي گوگل‌كد در آدرس
http://code.google.com/p/jquery-lightbox
ميزبانيمي‌شود. اگر شما نيزعلاقه‌مند به ايجاد تغييراتي براي بهبود كارايي اينپلاگين هستيد مي‌توانيد تغييرات مورد نظرتان را در آن ايجاد كرده سپسپلاگين تغيير يافته را در همان بخش در اختيار ديگران نيز قرار دهيد.
براياستفاده از اين پلاگين بايد جي‌كوئري را در صفحه خود فعال كنيد. برايانجام اين كار طبق توضيحات گذشته ابتدا اين كد را در بخش صفحه قرار مي‌دهيم:
script type="text/javascript">
به مسير فايل jquery.js دقت كنيد كه آدرس صحيح فايل كتابخانه جي‌كوئري باشد.
درمرحله بعد بايد پلاگينlightbox را نيز در صفحه خود قرار دهيد تاقابليت‌هاي آن فعال شوند، براي انجام اين كار كد زير را يك خط پايين‌تر ازكد مرحله قبل درج كنيد:
script type="text/javascript">
به مسير فايل lightbox.js نيز توجه داشته باشيد كه مسيري صحيح از فايل پلاگين Lightbox باشد.
بعداز طي اين دو مرحله بايد برگه سبك يا همان دستوراتCSS مربوط به اينپلاگين را به مرورگر معرفي كنيم كه اين كار با قرار دادن خط:
link rel="stylesheet" href="css>
lightbox.css" type="text/css" /
صورت مي‌گيرد.
در اينجا نيز به آدرس css/lightbox.css دقت كنيد كه آدرس صحيح فايل مورد نظر را وارد كرده باشيد.
برااين‌كه اين پلاگين را به‌صورت دلخواه خود پياده‌سازي كنيد، بايد آدرس چندتصوير مربوط به آن را در فايل‌هاي lightbox.css و lightbox.js تغييردهيد.
در مرحله بعد بايستي تگ‌هاي img موجود در صفحه خود را ويرايش كرده و خاصيت rel="lightbox" را طبق نمونه زير به آنها اضافه كنيد:
a href="images/image-1.jpg">
rel="lightbox" title="my caption"
اگرتمام مراحل را به‌درستي انجام داده باشيد جلوه جديدي به تصاوير شما اختصاصيافته كه باعث مي‌شود از مشاهده تصاوير، لذت بيشتري ببريد.
توجه:به اين دليل كه دسترسي به گوگل‌كد براي كاربران ايراني امكان‌پذير نيست،مي‌توانيد بسته مورد نظر را از آدرس زير دريافت و در طراحي‌هاي خود مورداستفاده قرار دهيد:
hgjhgj