[برای دیدن لینک ها ابتدا باید عضو انجمن شوید. برای ثبت نام اینجا کلیک کنید...]

نحوه ایجاد گالری عکس در CSS


شاید بارها تلاش کرده اید که بتوانید با استفاده از یک افکت خود در flexbox یک گالری زیبا و جذاب ایجاد کنید به صورتی که عکس ها مثل آجر های دیوار کنار هم چیده شده شده باشند. شما میتوانید از روش جاوا اسکریپت برای خواندن نسبت به ابعاد تصویر برای مشخص کردن مقدار flex صحیح برای هر عنصر استفاده کنید. شما با استفاده از این روش این امکان وجود دارد که عکس هایی با هر اندازه و نسبت ابعاد را در یک عنصر container بارگذاری کنند همینطور به آن ها کلاس دهند و با استفاده کردن از استاندارد های مدرن [برای دیدن لینک ها ابتدا باید عضو انجمن شوید. برای ثبت نام اینجا کلیک کنید...] بدون آنکه احتیاجی به افزونه یا Framework خاصی داشته باشید یک گالری عکس یکپارچه داشته باشید. این مقاله را برای ایجاد گالری عکس در CSS دنبال کنید.


چالش بارگذاری عکس (Loading)


اولین مرحله به این صورت میباشد که قبل از اینکه جاوا اسکریپت بتواند چیزی را در مورد یک تصویر تمشخص کند، آن تصویر باید به صورت کامل بر روی یک صفحه بارگذاری شود: تنها داشتن تگ <img> کافی نیست. سه روش برای حل این مسئله وجود دارد :


۱٫ تشخیص دادن اینکه قبل از اجرای JavaScript کلیه عناصر لود شده باشند.
۲٫ بارگذاری کردن عکس ها با استفاده کردن از خود JavaScript
۳٫ JavaScript را کاملا ترک کرده و ارتفاع و عرض عکس سمت سرور را با استفاده از PHP و یا تکنولوژی های شبیه به آن تعیین کنید.


در این مقاله برای شما دو تکنیک را مثال زده ایم. با یک <div> خالی شروع می کنیم. عکس هایی که در این <div> اضافه می شوند شامل عناصر <figure> خواهند بود، پس باید استایل ها را تنظیم کنیم :


* { box-sizing: border-box; }
.quantize { display: flex; flex-flow: row wrap; font-size: 0; width:80%; margin: 0 auto; }
.quantize figure { margin: 0; }
.quantize figure img { width: 100%; height: auto; }




اولین قسمت JavaScript :





var container = document.getElementsByClassName(‘quantize’)[0];
var butterflies = [ “orange-butterfly.jpg”, “butterfly-on-yellow-flower.jpg”, “butterfly-on-petal.jpg”, “albino-butterfly.jpg”, “blue-butterfly.jpg”];
function preloadImage(filename){
var img=new Image();
img.onload = function(){
img.aspectRatio = img.naturalWidth / img.naturalHeight;
var fig = document.createElement(‘figure’);
fig.appendChild(img);
container.appendChild(fig);
};
img.src= filename;
img.alt = “”;
}
function loadImages() {
for (var i = 0; i < butterflies.length; ++i) {
var filename = butterflies[i];
preloadImage(filename);
}
}


ایجاد گالری عکس در CSS


در دو سطر اول دستور عنصری که عکس ها به آن اضافه میشوند شناسایی میشود و عکس هایی که میخواهیم لود کنیم را به شکل لیست نشان میدهد. تابع preloadImage اسم فایل ها را از آرایه ها پیدا میکند و عنصر های عکس جدید را اضافه میکند. از این طریق برای هر کدام از عکس ها یک ویژگی جدید میسازدکه نسبت میان عرض و ارتفاع جدید را ایجاد میکند. با استفاده کردن از این اطلاعات اضافه شذه به عکس، تابع عکس را در عنصر <figure> قرار می دهد و آن را درون Container اضافه می کند.
مثال :


function fitFlex() {
var flexGroup = container.querySelectorAll(“figure”);
var flexArray = Array.prototype.slice.call(flexGroup, 0);
flexArray.sort(function (a, b) {
imageAspectRatioA = a.firstElementChild.aspectRatio;
imageAspectRatioB = b.firstElementChild.aspectRatio;
if (imageAspectRatioA < imageAspectRatioB) { return 1; }
if (imageAspectRatioA > imageAspectRatioB) { return -1; }
return 0;
});
var widest = flexArray[0].firstElementChild.aspectRatio;
var smallestWidth = “300”;
flexArray.forEach(function(box) {
var flex = 1 / (widest / box.firstElementChild.aspectRatio);
if (flex == 0) { flex = 1; }
boxWidth = smallestWidth * flex;
box.style.cssText = “flex: “+flex+”; min-width:”+boxWidth+”px;
});