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

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

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

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

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

در ادامه، به‌دنبال تنظیمات تگ 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 می‌توان لایت باکس مدنظر خود را ایجاد کرد.