آموزش ساخت گالری تصاویر با Masonry

دوشنبه، 23، جولای، 2018 در ساعت 05:42

خیلی وقتا شده که با دیدن گالری سایت های مثل Pinterest و ویسگون یا حتی Google keep به این فکر افتاده باشیم که چطوری میشه همچین گالری قشنگی درست کرد؟

یا با قرار دادن عکس ها با ارتفاع و عرض مختلف بپرسیم چرا کلی فضای خالی بینشون پیش میاد؟

خب راه حل همه اینها کار با کتابخونه Masonry میتونه باشه :)

گالری تصاویر Masonry

در این آموزش قدم به قدم قالب یک گالری جذابُ برای سایت خودمون ایجاد میکنیم که میتونید در وردپرس یا جومولا استفاده کنید

نکته: تسلط به HTML و CSS در این آموزش مهم می‌باشد

1- ساخت فایل HTML

ابتدا فایل index خود با پسوند html را ایجاد میکنیم و کدهای اولیه خود را برای آن وارد میکنیم

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>گیکتاب</title>
	</head>

	<body>
		<h1>گالری تصاویر</h1>
	</body>

</html>

<!DOCTYPE html>

<head>

<title>گیکتاب</title>

</head>

<body>

<h1>گالری تصاویر</h1>

</body>

</html>

نتیجه آن به صورت زیر می‌باشد:

نکته: برای مشاهده نتیجه، فایل HTML را در مرورگر خود با استفاده از کلید های ترکیبی Ctrl+O بارگذاری کنید

2- ساخت فایل CSS

سپس اقدام به ساخت استایلشیت خود میکنیم و مقادیر اولیه آن را تنها به راست چین کردن متن اختصاص میدهیم

* {
	direction: rtl;
}

* {

direction: rtl;

}

3- لینک دادن فایل CSS به HTML

در تگ head با استفاده از تگ link به صورت زیر نسبت به لینک کردن استایل خود اقدام میکنیم:

<head>
	<meta charset="UTF-8">
	<title>گیکتاب</title>
	<link rel="stylesheet" href="style.css">
</head>

<head>

<title>گیکتاب</title>

</head>

همچین برای اطمینان حاصل کردن از لینک شدن درست میتوانیم بک گراند خود را تغییر دهیم و با رفرش کردن فایل index نتیجه آن را مشاهده کنیم:

body {
	color: white;
	background: red;
}

body {

color: white;

background: red;

}

4- پوشه تصاویر

خب باید یک سری تصاویر در پوشه پروژه خود قرار دهیم،توجه داشته باشید که در wordpress قرار دادن تصاویر به صورت داینامیک انجام میشود که باید با php این کار صورت پذیرد

5- کدهای HTML

خب با ایجاد یک div به عنوان دربرگینده تصاویر به تکمیل فایل HTML خود میپردازیم

<!-- Start gallery -->
<div class="gallery">
	
	<!-- Start picture show -->
	<div class="item"></div>
	<!-- End picture show -->

</div>
<!-- End gallery -->

</div>

در خط اول ما یک div که حاوی تصاویر ما خواهد بود میسازیم، این div بعد از تگ h1 ما میباشد و تا قبل از بسته شد تگ body تمام تصاویر ما را شامل میشود. در خط بعد ما یک div دیگر با کلاس item تعریف کرده ایم که هر یک از تصاویر ما داخل این div قرار میگیرند پس ما با استفاده از تگ img تصاویر خود را بارگذاری میکنیم

<!-- Start picture show -->
<div class="item">
	<img src="" class="pic">
</div>
<!-- End picture show -->

</div>

همانطور که میبینید ما تگ img خود را با کلاسی تحت عنوان pic همراه ساختیم تا بتوانیم تصاویر خود را قالب بندی کنیم

6- بارگذاری تصاویر

پس از اینکه ما کلاس های خود را تعریف کردیم نوبت به بارگذاری تصاویر میرسد، پس با توجه به نام تصاویر و آدرس پوشه آن اتریبیت src را به آدرس تصاور اختصاص میدهیم

<!-- Start picture show -->
<div class="item">
	<img src="src/art.jpg" class="pic">
</div>
<div class="item">
	<img src="src/galaxy.jpg" class="pic">
</div>
<div class="item">
	<img src="src/got.jpg" class="pic">
</div>
<div class="item">
	<img src="src/hero.jpg" class="pic">
</div>
<div class="item">
	<img src="src/jungle.jpg" class="pic">
</div>
<div class="item">
	<img src="src/meAndMyFirendBFF.jpg" class="pic">
</div>
<div class="item">
	<img src="src/nature.jpg" class="pic">
</div>
<div class="item">
	<img src="src/no.jpg" class="pic">
</div>
<!-- End picture show -->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

پس از آن یکبار دیگر فایل index.html را در مرورگر خود رفرش میکنیم و نتیجه را مشاهده میکنیم!

نتیجه آنطور که باید و شاید باب میل ما نیس دلیل آن تکمیل نکردن کد های CSS است.

7- تکمیل کدهای CSS

برای آنکه گالری ما جدا از قسمت های دیگر باشد رنگی برای پس زمینه آن انتخاب میکنیم همچنین باید طول و عرضی برای آن معین کنیم

.gallery {
	width: 1280px;
	height: 1280px;
	background-color: #FF8484;
}

.gallery {

width: 1280px;

height: 1280px;

background-color: #FF8484;

}

نوبت به کلاس item ما میرسد

.item {
	float: left;
	width: 300px;
	margin: 10px;
}

.item {

float: left;

width: 300px;

margin: 10px;

}

در خط اول float را برابر left قرار میدهیم تا همه‌ی item های ما از سمت چپ شروع به بارگذاری کنند، در خط عرض item هارا برابر با 300 پیکسل قرار میدهیم اما برای ارتفاع آن های مقداری انتخاب نمیکنیم تا نسبت طول و عرض تصاویر حفظ شود و در آخر margin را برابر 10 پیکسل قرار میدهیم تا خط مرزی بین تصاویر وجود داشته باشد

خب همچنان نتجیه دلخواه خود را حاصل نکردیم شاید باید کلاس pic خود را تکمیل کنیم

.pic {
	width: 100%;
}

.pic {

width: 100%;

}

تنها عرض این کلاس را 100% قرار میدهیم، پس از تکمیل کلاس pic نتیجه تقریبا ماننده آن چیزی شد که ما انتظار داشتیم

8- بارگذاری اسکریپت های jQuery و Masonry

فایل index خود را بار دیگر باز میکنیم و نسبت به تکمیل کد های خود اقدام میکنیم، برای بارگذاری اسکریپت های خود باید آن‌ها را قبل از بسته شدن تگ body قرار دهیم، دلیل اینکار لود شدن سریعتر صفحات وب است ینی اول عناصر HTML ما بارگذاری میشوند سپس در انتها اسکریپت های ما که همان jQuery و Masonry میباشند. پس با استفاده از تگ script و قرار دادن آدرس اسکریپت های خود در اتریبیت src پیش میرویم

<!-- Strat Script -->
<script src="jquery-3.3.1.min.js"></script>
<script src="masonry.pkgd.js"></script>
<!-- End Script -->

نکته اول: برای دانلود آخرین نسخه از این اسکریپت ها میتوانیم آن هارا دانلود و در پوشه پروژه خود قرار دهیم یا اینکه از طریق CDN نسبت به بارگذاری آنها اقدام کنیم
نکته دوم: ترتیب لود شدن اسکریپت ها مهم است، ابتدا jQuery سپس Masonry زیرا Masonry به jQuery وابسته است و بدون لود شدن آن نمیتواند وظایف خود را به درستی انجام دهد.

<!-- Strat Script -->
<!-- Load from CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- End Script -->

9- تکمیل اسکریپت نهایی

تگی دیگر از script را بعد از آخرین تگ اسکریپت باز میکنیم و کد های زیر را داخل آن قرار میدهیم:

<script>
$('.gallery').masonry({
	itemSelector: '.item',
	columnWidth: 0
});
</script>

$('.gallery').masonry({

itemSelector: '.item',

columnWidth: 0

});

</script>

به طور خلاصه این کد به ما میگوید که از کلاس gallery آیتم هایی را انتخاب کن و با Grid بندی Masonry نمایش بده، در اینجا تنها مقدار columnWidth قابل تغییر است که فاصله بین ستون هارا تعیین میکند.

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

شاد باشید و خندون :)

حمایت مالی