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


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


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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

5- کدهای HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


avatar