گالری تصاویر

سلامی دوباره خدمت تک تک شما مهربونای نی نی وبلاگی...

اکثر مامان،بابا،خاله،عمه،دایی،عمو های نی نی وبلاگی دوست دارن که یک گالری ای داشته باشن که از طریق اون بتونن آرشیوی از تصاویر رو بصورت Slide Show به نمایش در بیارن، خب منم تصمیم گرفتم که تو این پست مشکل همشون رو حل کنم...

بریم سراغ کد نویسی و کمی بهتون HTML یاد بدم، نسل جدیدش اومده اما خب هنوز کار میده و اکثراً پیرو این زبان هستند، CSS هم خیلی خوب میتونه جاشو بگیره، خود نسل جدیدش که HTML5 اسم داره هم کارائی خوبی داره، بگذریم، این کارتون رو به زیبائی راه میندازه...

با نام خدا شروع میکنیم:

یکی از بهترین حالت هائی که به ذهنم رسید Marquee هستش که واقعاً میتونه نیازتون رو برطرف کنه، Css هم هست، کار میبره اما محشر به پا میکنه، با افکتهای بینظیر گالری تصاویرتون رو ارائه میده، اگه شد اونم یادتون میدم، فعلاً با این کار رو انجام بدیم، شکل کلی دستور به این صورته:

خب، طوری که میبینیم از روی تقسیم بندی رنگها ما با 3 بخش کلی طرفیم!

آبی  : بدنه اصلی مارکوئی

قرمز : وسط چین (قرار دادن تصاویر در وسط)

سبز : کد مربوط به درج تصویر

حالا بریم سراغ تفسیر تک تک خطها و آموزش کلی...

اول از همه بگم که هر کدوم از این خط ها که اینجا نشون دادم بهشون تگ (TAG) گفته میشه، نکته حائز اهمیت اینه که تگ ها همیشه باز و بسته میشن بجز چند حالت خاص که واقعاً نیازی به بستن ندارن، مثل همین تگ IMG...

تگ ها همیشه داخل هم باز و داخل هم بسته میشن، ممکن نیست تگ 1 قبل از تگ 2 باز و در تگ 2 بسته بشه، همیشه تگ 1 اگه قبل از تگ 2 باز بشه بعدش بسته میشه و اگه بعدش باز بشه قبلش بسته میشه! خودمم گیج شدم! بزارید مثال بزنم اما قبلش بگم که تگ بصورت باز میشه و بصورت بسته میشه، یعنی تفاوتشون فقط یه علامت " / " هستش...

مثال:

نمونه اول - غلط

<TAG 1>

<TAG 2>

<TAG 1/>

<TAG 2/>

___________________________________

نمونه دوم - صحیح

<TAG 1>

<TAG 2>

<TAG 2/>

<TAG 1/>

حالا بریم سراغ اصل بحث، اول از همه Marquee رو میگم، این تگ برای چرخاندن اشیاء و متون بکار میره، چهار کنترل مهم رو خدمتتون شرح میدم:

Direction - جهت حرکت هستش که میتونید چهار جهت اصلی رو براش تعریف کنید.

On Mouse Over - مشخص میکنه که وقتی ماوس وارد گالری میشه چه اتفاقی بیفته.

On Mouse Out - مشخص میکنه که وقتی ماوس از گالری خارج میشه چه اتفاقی بیفته.

ُScroll Amount - سرعت حرکت رو مشخص میکنه، هرچه عدد بزرگتر بدید سرعت بیشتر میشه و بالعکس.

دوستان گلم بگم که اینا چهار کنترل مهم برای گالری هستن اما تمام کنترل های Marquee نیستن و بیشتر از این حرفان...

تگ بعدی خود تگ IMG هستش که کار درج تصویر رو انجام میده، کنترل های مهم این تگ 5 تا هستند:

Src - فایل تصویر منبع رو شامل میشه، شما اینجا باید آدرس کامل بهمراه نام و پسوند تصویر رو درج کنید.

Width - پهنای تصویر رو مشخص میکنه.

Height - ارتفاع تصویر رو مشخص میکنه.

Border - دور تصویر یک نوار (کادر،لبه،قاب) ایجاد میکنه.

Border Color - رنگ نوار (کادر،لبه،قاب) رو مشخص میکنه.

از Width و Height برای مرتب کردن و تراز کردن تصاویر گالریتون استفاده کنید که به زیبائی کار جلوه ای خاص میده...

برای درج چندین تصویر دقیقاً کد سبز رنگ رو تنها با تفاوت نام تصویر تکرار کنید و بین هر کد
بنویسید تا فاصله ای بینشون ایجاد بشه، پیشنهاد میشه هر کد رو در یک خط بنویسید، کد کامل و تولید شده رو در محل مناسبی از وبلاگتون کپی کنید، کار تمام شد..!

سوالی بود در خدمتم، از طرف من نی نی هاتون رو ببوسید، دوستون دارم، خداحافظ