آموزش بارگذاری تصاویر در لایت باکس با HTML , CSS

۳.۹
(۸)

نمایش تصاویر به صورت لایت باکس یکی از جذاب‌ترین حالت‌های نمایش عکس‌ها در وب سایت‌ها است. زمانی که برروی بعضی از تصاویر در وب سایت‌ها کلیک می‌کنید، آن تصویر در قالب یک لایت باکس نمایش داده می‌شود؛ به این معنی که وقتی برروی تصویر کلیک می‌کنم، تصویر بزرگ شده و در بخش بالاتر نمایش داده می‌شود که می‌توانیم آن را با جزئیات بیشتری مشاهده کنیم. اما چگونه می‌توان قابلیت نمایش تصاویر به صورت لایت باکس با HTML و CSS را در طراحی سایت پیاده‌سازی کرد؟

دوره آموزش طراحی وب - صفر تا سایت نیک آموز

روش نمایش تصاویر به صورت لایت باکس با HTML و CSS

برای نمایش تصاویر به شکل لایت باکس با HTML و CSS به یک تگ image نیاز داریم که باتوجه به ساختار پروژه خود، می‌توانید آن را در جای موردنظر قرار دهید و تصویر خود را فراخوانی کنید:

نمایش تصاویر به صورت لایت باکس با HTML و CSS

در هدر نیز تنظیمات استایل my image را انجام دهید که شامل width, max – width, border – radius و transition است. حالا و باتوجه به این موارد، تصویر شما نمایش داده می‌شود. اما می‌خواهیم وقتی روی تصویر کلیک می‌کنیم، تصویر بزرگ‌تر در وسط صفحه نمایش داده شود. برای این کار، ابتدا لازم است تنظیماتی مبنی‌بر اینکه وقتی کاربر موس خود را برروی تصویر می‌برد، قابلیت کلیک کردن آن را ببیند:

نمایش تصاویر به صورت لایت باکس با HTML و CSS

در ادامه، به‌دنبال تنظیمات تگ image می‌رویم. توجه داشته باشید که با ایجاد span می‌خواهیم وقتی کاربر تصویر را مشاهده کرد، این span در قالب یک ضربدر به او نمایش داده شود. درنهایت همه این‌ها، ساختار modal را تشکیل می‌دهند:

نمایش تصاویر به صورت لایت باکس

در ادامه و برای نمایش تصاویر به صورت لایت باکس با HTML و CSS تنظیمات مربوط به استایل Modal را انجام می‌دهیم. در تنظیم z-index باید این نکته را مدنظر قرار دهید که اگر المان‌های دیگری دارید که z-index آن‌ها را تغییر داده‌اید، Modal حتماً باید z-index: 1 باشد تا روی آن‌ها نمایش داده شود.

همچنین چون می‌خواهیم وقتی Modal نمایش داده شد، یک لایه خاکستری یا مشکی رنگ برروی مابقی المان‌ها درج شود، به آن یک background-color اضافه می‌کنیم:

نمایش تصاویر به صورت لایت باکس

در ادامه نیز به‌سراغ تنظیمات استایل modal image می‌رویم:

نمایش لایت باکس تصاویر در وب

همچنین تنظیمات استایل closeModal را انجام می‌دهیم:

نمایش لایت باکس تصاویر در وب

حالا با کمک جاوا اسکریپت در طراحی سایت، کدی می‌نویسیم که وقتی روی تصویر کلیک کردیم، modal را نمایش دهد:

نمایش لایت باکس تصاویر در وب

همچنین می‌خواهیم براساس class نیز این کار را انجام دهیم:

نمایش لایت باکس تصاویر در وب

جمع بندی 

نمایش تصاویر به صورت لایت باکس در وب سایت به کاربران امکان می‌دهد تا تصاویر را با جزئیات بیشتری ببینند و به‌راحتی بین تصاویر جابجا شوند. همچنین، این روش به طراحان وب سایت‌ها این امکان را می‌دهد تا تصاویر را به‌صورت زیبا و حرفه‌ای نمایش دهد و تجربه کاربری بهتری را برای کاربران فراهم کند. به این ترتیب، با استفاده از انواع زبان های برنامه نویسی و با چند خط کد جاوااسکریپت، HTML و CSS می‌توان لایت باکس مدنظر خود را ایجاد کرد.

چه رتبه ای می‌دهید؟

میانگین ۳.۹ / ۵. از مجموع ۸

اولین نفر باش

title sign
برچسب ها
title sign
دانلود ویدئو
آموزش بارگذاری تصاویر در لایت باکس با HTML , CSS
فرمت MP4
زمان ویدئو 16 دقیقه
حجم مگابایت
دانلود ویدئو
title sign
معرفی نویسنده
مقالات
0 مقاله توسط این نویسنده
محصولات
4 دوره توسط این نویسنده

رضا هاشمیان تجربه حدود 6 ساله در حوزه برنامه‌نویسی سمت سرور دارد و در این مدت، پروژه‌های نرم‌افزاری متنوعی از قبیل اتوماسیون هوشمند ساخت طلا و جواهر، پیاده‌سازی سیستم مدیریت یادگیری آنلاین (LMS)، و ایجاد صرافی رمزارز را با موفقیت به انجام رسانده است. او همچنین فعالیت‌های حرفه‌ای خود را در پلتفرم آپورک آغاز کرده و در پروژه‌های برون‌مرزی با شرکت‌های معتبری همچون Cegid همکاری داشته است. 

title sign
معرفی محصول
title sign
ویدیوهای مرتبط
title sign
دیدگاه کاربران

وبینار رایگان SQL Server؛ مسیری به سوی فرصت‌های شغلی بی‌شمار       پنج‌شنبه 30 فرودین ساعت 15
ثبت نام رایگان
close-image