نمایش Thumbnail با اندازه کامل در وب

نمایش Thumbnail با اندازه کامل در وب

در صفحات وب گاهی شما تعدادی عکس برای نمایش می گذارید و اندازه ی کوچکی دارند؛ ( این تصاویر Thumbnail نامیده می شوند.)

شما لازم دارید تا کاربر با کلیک روی آنها بتوانند آن تصویر را با اندازه ی بزرگ و کامل ببینید.

در این آموزش کوتاه به شما روش انجام اینکار را به کمک یکی از کتابخانه های سی اس اس که Bootstrap می باشد را به شما خواهیم داد.

 

نمایش Thumbnail با اندازه کامل در وب

قبل از شروع کار ابتدا نتیجه ی نهایی را مشاهده کنید:

نمایش تصویر با اندازه کامل در modal بوت استرپ - پیش نمایش 1
نمایش تصویر با اندازه‌کامل در modal بوت استرپ – پیش نمایش ۱
نمایش تصویر با اندازه کامل در modal بوت استرپ - پیش نمایش 2
نمایش تصویر با اندازه‌کامل در modal بوت استرپ – پیش نمایش ۲
روش انجام کار:
  • ابتدا فریم ورک بوت استرپ را نصب می کنیم.
  • بعد از اینکا کدهای زیر را به عنوان مثال در تگ body قرار می دهیم.
  • بعد از اینکار شما محتوای “پیش نمایش شماره ۱” را دارید.
  • در مرحله ی بعد شما یک modal می سازید که تصاویر را با سایز بزرگ در modal نمایش دهید:
  • در نهایت کد شما باید به حالت زیر شود:
  • کار تمام شد.
  • حالا شما با کلیک روی هر تصویر کوچک به صورت بزرگ شده آنرا می بینید.

 

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

منتظر نظرات شما هستیم.

موفق باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: ۰ میانگین: ۰]
با دوستانتان به اشتراک بگذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code