اگر قصد دارید در سایتتان یک گالری تصاویر داشته باشید بهتر است در همان ابتدا پیش بینی کنید که آیا تعداد تصاویری که می خواهید در گالری قرار دهید کم هستند یا زیاد ؟
اگر فکر می کنید قرار است در این صفحه تعداد زیادی تصاویر را به نمایش بگذارید پس بهتر است برای ساماندهی تصاویر، حتما آن ها را در دسته بندی های مرتبط قرار دهید. با این کار شما باید در صفحه گالری تصاویر خود تمامی دسته بندی ها را به صورت زیر منو قرار دهید.
در فایلی که برای شما فراهم کرده ایم، تمامی این نکات رعایت شده و شما می توانید به سادگی تصاویر خود را گروه بندی کنید و آن ها را در زیر منوی مربوطه قرار دهید. این گالری کاملا ریسپانسیو بوده و کدنویسی آن ساده و قابل فهم است.
در این فایل یک تگ div با کلاس toolbar مشاهده می کنید که دارای تعدادی button می باشد. هر دکمه دارای یک خاصیت data-rel می باشد که نشان دهنده نام دسته بندی شماست. برای تعریف دسته بندی ها تنها کافیست این خاصیت را برابر با نام دسته بندی مورد نظر خود قرار دهید.
در بخشی دیگر یک div با کلاس portfolio مشاهده می کنید که هر یک از تصاویر در یک div در زیر مجموعه این بخش قرار می گیرد. برای تکمیل گالری کافیست مقدار data-rel که در بخش قبلی تعریف کرده اید را به کلاس مربوط به این div اضافه کنید تا تصویر مورد نظر به دسته بندی مرتبط تعلق بگیرد.