مشاهده ی خروجی در JSBin این مثال تصاویر را به صورت بسیار ساده نمایش می دهد. ما می توانیم یک قدم پیش برویم و آن را responsive یا واکنش گرا طراحی کنیم:
Responsive Image Gallery
Resize the browser window to see the effect.
این کد از media query ها استفاده می کند تا این گالری را واکنش گرا کند. برای صفحاتی با سایز 700 پیکسل و بیشتر، چهار تصویر را کنار هم نمایش می دهد. برای صفحاتی با سایز کوچک تر تصاویر را به صورت دو به دو کنار هم نمایش می دهد. در آخر اگر عرض صفحه 500 پیکسل یا کمتر باشد صفحه آنقدر کوچک می شود که تصاویر به صورت عمودی زیر هم قرار می گیرند.
درباره ی media query ها در جلسات بعدی صحبت خواهیم کرد.
مشاهده ی خروجی در JSBin ما در این کد از media query ها استفاده کرده ایم تا این گالری را واکنش گرا کنیم. برای صفحاتی با سایز 700 پیکسل و بیشتر، چهار تصویر را کنار هم (در یک خط) نمایش می دهد. برای صفحاتی با سایز کوچک تر تصاویر را به صورت دو به دو کنار هم نمایش می دهد. در آخر اگر عرض صفحه 500 پیکسل یا کمتر باشد صفحه آنقدر کوچک می شود که تصاویر به صورت عمودی زیر هم قرار می گیرند. اما آیا این حد از سادگی در دنیای مدرن امروزی قابل قبول است؟ Slideshow چیست؟ Slideshow ها نوعی image gallery هستند که به جای نمایش تمام تصاویر، آن ها را دانه به دانه و به نوبت نشان می دهند. به مثال زیر توجه کنید:
مشاهده ی خروجی در JSBin همانطور که میبینید این کدها شامل کدهای جاوا اسکریپت نیز می باشند و از موارد قبل بسیار پیچیده تر هستند! در واقع آموزش آنها چند جلسه ای طول می کشد و از موضوع CSS نیز خارج می شود بنابراین ما زیاد روی آن ها مانور نمی دهیم و آشنایی با این موارد را به بعد از اتمام دوره های جاوا اسکریپت، HTML و CSS واگذار می کنیم. در واقع این پیشرفته شدن تا بی نهایت ادامه پیدا می کند و انواع خلاقیت ها را می توان در آن پیاده سازی کرد. به مثال زیر نگاه کنید:
Lightbox
