دوشنبه، 23، جولای، 2018 در ساعت 05:42
خیلی وقتا شده که با دیدن گالری سایت های مثل Pinterest و ویسگون یا حتی Google keep به این فکر افتاده باشیم که چطوری میشه همچین گالری قشنگی درست کرد؟
یا با قرار دادن عکس ها با ارتفاع و عرض مختلف بپرسیم چرا کلی فضای خالی بینشون پیش میاد؟
خب راه حل همه اینها کار با کتابخونه Masonry میتونه باشه :)
در این آموزش قدم به قدم قالب یک گالری جذابُ برای سایت خودمون ایجاد میکنیم که میتونید در وردپرس یا جومولا استفاده کنید
ابتدا فایل index خود با پسوند html را ایجاد میکنیم و کدهای اولیه خود را برای آن وارد میکنیم
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>گیکتاب</title> </head> <body> <h1>گالری تصاویر</h1> </body> </html> |
نتیجه آن به صورت زیر میباشد:
سپس اقدام به ساخت استایلشیت خود میکنیم و مقادیر اولیه آن را تنها به راست چین کردن متن اختصاص میدهیم
1 2 3 |
* { direction: rtl; } |
در تگ head با استفاده از تگ link به صورت زیر نسبت به لینک کردن استایل خود اقدام میکنیم:
1 2 3 4 5 |
<head> <meta charset="UTF-8"> <title>گیکتاب</title> <link rel="stylesheet" href="style.css"> </head> |
همچین برای اطمینان حاصل کردن از لینک شدن درست میتوانیم بک گراند خود را تغییر دهیم و با رفرش کردن فایل index نتیجه آن را مشاهده کنیم:
1 2 3 4 |
body { color: white; background: red; } |
خب باید یک سری تصاویر در پوشه پروژه خود قرار دهیم،توجه داشته باشید که در wordpress قرار دادن تصاویر به صورت داینامیک انجام میشود که باید با php این کار صورت پذیرد
خب با ایجاد یک div به عنوان دربرگینده تصاویر به تکمیل فایل HTML خود میپردازیم
1 2 3 4 5 6 7 8 9 |
<!-- Start gallery --> <div class="gallery"> <!-- Start picture show --> <div class="item"></div> <!-- End picture show --> </div> <!-- End gallery --> |
در خط اول ما یک div که حاوی تصاویر ما خواهد بود میسازیم، این div بعد از تگ h1 ما میباشد و تا قبل از بسته شد تگ body تمام تصاویر ما را شامل میشود. در خط بعد ما یک div دیگر با کلاس item تعریف کرده ایم که هر یک از تصاویر ما داخل این div قرار میگیرند پس ما با استفاده از تگ img تصاویر خود را بارگذاری میکنیم
1 2 3 4 5 |
<!-- Start picture show --> <div class="item"> <img src="" class="pic"> </div> <!-- End picture show --> |
همانطور که میبینید ما تگ img خود را با کلاسی تحت عنوان pic همراه ساختیم تا بتوانیم تصاویر خود را قالب بندی کنیم
پس از اینکه ما کلاس های خود را تعریف کردیم نوبت به بارگذاری تصاویر میرسد، پس با توجه به نام تصاویر و آدرس پوشه آن اتریبیت src را به آدرس تصاور اختصاص میدهیم
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- 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 --> |
پس از آن یکبار دیگر فایل index.html را در مرورگر خود رفرش میکنیم و نتیجه را مشاهده میکنیم!
نتیجه آنطور که باید و شاید باب میل ما نیس دلیل آن تکمیل نکردن کد های CSS است.
برای آنکه گالری ما جدا از قسمت های دیگر باشد رنگی برای پس زمینه آن انتخاب میکنیم همچنین باید طول و عرضی برای آن معین کنیم
1 2 3 4 5 |
.gallery { width: 1280px; height: 1280px; background-color: #FF8484; } |
نوبت به کلاس item ما میرسد
1 2 3 4 5 |
.item { float: left; width: 300px; margin: 10px; } |
در خط اول float را برابر left قرار میدهیم تا همهی item های ما از سمت چپ شروع به بارگذاری کنند، در خط عرض item هارا برابر با 300 پیکسل قرار میدهیم اما برای ارتفاع آن های مقداری انتخاب نمیکنیم تا نسبت طول و عرض تصاویر حفظ شود و در آخر margin را برابر 10 پیکسل قرار میدهیم تا خط مرزی بین تصاویر وجود داشته باشد
خب همچنان نتجیه دلخواه خود را حاصل نکردیم شاید باید کلاس pic خود را تکمیل کنیم
1 2 3 |
.pic { width: 100%; } |
تنها عرض این کلاس را 100% قرار میدهیم، پس از تکمیل کلاس pic نتیجه تقریبا ماننده آن چیزی شد که ما انتظار داشتیم
فایل index خود را بار دیگر باز میکنیم و نسبت به تکمیل کد های خود اقدام میکنیم، برای بارگذاری اسکریپت های خود باید آنها را قبل از بسته شدن تگ body قرار دهیم، دلیل اینکار لود شدن سریعتر صفحات وب است ینی اول عناصر HTML ما بارگذاری میشوند سپس در انتها اسکریپت های ما که همان jQuery و Masonry میباشند. پس با استفاده از تگ script و قرار دادن آدرس اسکریپت های خود در اتریبیت src پیش میرویم
1 2 3 4 |
<!-- Strat Script --> <script src="jquery-3.3.1.min.js"></script> <script src="masonry.pkgd.js"></script> <!-- End Script --> |
1 2 3 4 5 |
<!-- 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 --> |
تگی دیگر از script را بعد از آخرین تگ اسکریپت باز میکنیم و کد های زیر را داخل آن قرار میدهیم:
1 2 3 4 5 6 |
<script> $('.gallery').masonry({ itemSelector: '.item', columnWidth: 0 }); </script> |
به طور خلاصه این کد به ما میگوید که از کلاس gallery آیتم هایی را انتخاب کن و با Grid بندی Masonry نمایش بده، در اینجا تنها مقدار columnWidth قابل تغییر است که فاصله بین ستون هارا تعیین میکند.
شما میتوانید کدهای نهایی را از آدرس زیر در گیتهاب من ببینید.
شاد باشید و خندون :)