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

[sharmin555]

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

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

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

اولین مرحله به این صورت میباشد که قبل از اینکه جاوا اسکریپت بتواند چیزی را در مورد یک تصویر تمشخص کند، آن تصویر باید به صورت کامل بر روی یک صفحه بارگذاری شود: تنها داشتن تگ <img> کافی نیست. سه روش برای حل این مسئله وجود دارد :
۱٫ تشخیص دادن اینکه قبل از اجرای JavaScript کلیه عناصر لود شده باشند.
۲٫ بارگذاری کردن عکس ها با استفاده کردن از خود JavaScript
۳٫ JavaScript را کاملا ترک کرده و ارتفاع و عرض عکس سمت سرور را با استفاده از PHPP و یا تکنولوژی های شبیه به آن تعیین کنید.
در این مقاله برای شما دو تکنیک را مثال زده ایم. با یک <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: autoo; }

​

اولین قسمت 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;
preloadImage(filename);
}
}

در دو سطر اول دستور عنصری که عکس ها به آن اضافه میشوند شناسایی میشود و عکس هایی که میخواهیم لود کنیم را به شکل لیست نشان میدهد. تابع 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;
});
}




- See more at: https://www.sinaksite.com/آموزش-ایجاد-گالری-عکس-در-css/#sthash.wEkOIdA5.dpuf
نحوه ایجاد گالری عکس در CSS

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

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

اولین مرحله به این صورت میباشد که قبل از اینکه جاوا اسکریپت بتواند چیزی را در مورد یک تصویر تمشخص کند، آن تصویر باید به صورت کامل بر روی یک صفحه بارگذاری شود: تنها داشتن تگ <img> کافی نیست. سه روش برای حل این مسئله وجود دارد :
۱٫ تشخیص دادن اینکه قبل از اجرای JavaScript کلیه عناصر لود شده باشند.
۲٫ بارگذاری کردن عکس ها با استفاده کردن از خود JavaScript
۳٫ JavaScript را کاملا ترک کرده و ارتفاع و عرض عکس سمت سرور را با استفاده از PHPP و یا تکنولوژی های شبیه به آن تعیین کنید.
در این مقاله برای شما دو تکنیک را مثال زده ایم. با یک <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: autoo; }

​

اولین قسمت 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;
preloadImage(filename);
}
}

در دو سطر اول دستور عنصری که عکس ها به آن اضافه میشوند شناسایی میشود و عکس هایی که میخواهیم لود کنیم را به شکل لیست نشان میدهد. تابع 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;
});
}




- See more at: https://www.sinaksite.com/آموزش-ایجاد-گالری-عکس-در-css/#sthash.wEkOIdA5.dpuf