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