گالری ها

ما از یک نسخه اصلاح‌شده Lightbox برای دستیابی به سازگاری PWA، preloading و سهولت استفاده در محصول خود استفاده میکنیم. در حالی که گالری‌ها در مورد بندانگشتی های های گرد و مربعی به سادگی کپی و پیست تصاویر در داخل ستون‌ها هستند، ما چند گالری را قرار داده ایم که برای جلوگیری از هرگونه سردرگمی، در اینجا توضیح خواهیم داد.

چگونه یک تصویر را در گالری‌ها نمایش دهم؟

برای فعال کردن یک لایت باکس، تنها کاری که باید انجام دهید این است که از ویژگی data-lightbox="your-gallery" استفاده کنید، که در آن، اگر میخواهید بتوانید پس از لمس دکمه، تصاویر را مرور کنید، your-gallery باید با سایر دکمه‌ها یکسان باشد. اگر میخواهید از تصاویر تکی استفاده کنید یا این تصاویر را در گالری‌ها گروه‌بندی کنید، میتوانید از نام دیگری برای your-gallery استفاده کنید.

html

<a data-lightbox="gallery-1" href="images/pictures/2t.jpg" title="Cream Cookie">
  I will show the full screen image in the href attribute and will use the
  "Title" as the caption.
</a>

این کدی است که هر تصویری را به عنوان یک لایت باکس تولید میکند. این کد همچنین تصاویر را به صورت تمام صفحه نشان میدهد.
توجه داشته باشید که همانطور که قبلاً ذکر شد، از data-lightbox و همچنین href استفاده میکنیم که محل تصویر در حالت تمام صفحه خواهد بود و عنوان ویژگی در بالای تصویر در حالت تمام صفحه نمایش داده میشود.

در مثالی که در بالا نشان داده شده است، یک متن طولانی وجود دارد و وقتی روی آن ضربه بزنید، یک تصویر باز میشود. میتوانید از این برای دکمه‌ها، کارت‌ها، متن، آیکون‌ها و هر عنصر دیگری که درون یک لینک href قرار دارد، استفاده کنید.

چگونه میتوانم تصاویر گالری گرد و مربعی ایجاد کنم؟

همانطور که در صفحات رسانه‌ با تصاویر بندانگشتی گرد و مربعی که قرار داده‌ایم مشاهده میشود، این صفحات بر اساس مفهومی که در بالا توضیح داده شد کار میکنند، فقط به جای متن، از یک تصویر درون آن استفاده میکنیم. این تصاویر با استفاده از المان ستون‌ها که توسط بوت‌استرپ ارائه میشود و کلاس‌های کمکی برای ایجاد سایه‌ها و گوشه‌های گرد، درون ستون‌ها قرار میگیرند.

چگونه یک گالری قابل فیلتر ایجاد کنم؟

html

<div class="card card-style">
    <div class="content mt-3 mb-3">
        <ul class="gallery-filter-controls">
            <li class="gallery-filter-active gallery-filter-all" data-filter="all">All</li>
            <li data-filter="2">Tech</li>
            <li data-filter="1">Food</li>
            <li data-filter="3">Nature</li>
        </ul>
    </div>
</div>
<div class="card card-style">
    <div class="content mb-3">
        <div class="gallery gallery-filter">
            <a href="images/pictures/9t.jpg" data-lightbox="gal" class="filtr-item" title="Text" data-category="1">
                <img src="images/empty.png" data-src="images/pictures/9s.jpg" class="preload-img rounded-s shadow-m" alt="image">
            </a>
            <a href="images/pictures/14t.jpg" data-lightbox="gal" class="filtr-item" title="Text" data-category="2">
                <img src="images/empty.png" data-src="images/pictures/14s.jpg" class="preload-img rounded-s shadow-m" alt="image">
            </a>
            <a href="images/pictures/18t.jpg" data-lightbox="gal" class="filtr-item" title="Text" data-category="3">
                <img src="images/empty.png" data-src="images/pictures/18s.jpg" class="preload-img rounded-s shadow-m" alt="image">
            </a>
        </div>
    </div>
</div>

در قالب هم عناصر فیلتر و هم خود گالری در سیستم کارت قرار داده شده است. توجه داشته باشید که در اینجا یک کلاس محتوا داریم. این کلاس برای ایجاد حاشیه مناسب بین تصاویر گالری، دکمه‌های قابل فیلتر و قسمت بیرونی کارت استفاده میشود. قالب فاصله بین اینها را با استفاده از کلاس‌های کمکی تغییر داده است. این کلاس‌ها در عناصری مانند این بسیار مهم هستند زیرا به شما امکان میدهند فواصل بین عناصر را به دقت تنظیم کنید.

خط 1 کارتی است که کنترل‌های گالری قابل فیلتر را در خود جای میدهد.
خط 2 کلاس محتوا است، این کلاس برای ایجاد فاصله بین کنترل‌ها و کارت استفاده میشود.
خط 3 این لیست کنترل‌های گالری است که قالب استفاده میکند.
خط 4 دکمه‌ی "همه" است که به طور پیشفرض هنگام بارگذاری صفحه، تمام دسته‌بندی‌ها را نشان میدهد. همچنین، توجه داشته باشید که این دکمه دارای data-filter="all" است. این ویژگی، همراه با ویژگی‌های موجود در خطوط 5، 6 و 7، به تصاویری که هنگام ضربه زدن نشان داده میشوند، متصل میشوند.
خط 11 یک کارت جداگانه برای تصاویر گالری است.
خط 12 محتوای تصاویر گالری است. توجه داشته باشید که ما در اینجا پارامتر mb-3 را برای ایجاد فضایی در زیر تصاویر داریم تا آنها با طراحی کارت هم‌تراز شوند.
خط 13 جایی است که تصاویر گالری خود را در آن نگه میداریم. این wrapper ضروری است.

حالا بیایید یک گروه تصویر از کد بالا بگیریم. این گروه را میتوان برای ایجاد تصاویر بیشتر کپی کرد.

خط 14 یک آیتم دسته‌بندی است که از یک تصویر Lightbox استفاده میکند و یک ویژگی خاص نیز به آن اضافه شده است. توجه داشته باشید که این آیتم دارای کلاس filtr-item و data-category="1" است. این data-category با همان شماره خط 6 مطابقت دارد، به این معنی که وقتی روی دسته‌بندی "غذا" در خط 6 کلیک میکنید، فقط این تصویر را خواهید دید و بقیه پنهان میشوند.
شما میتوانید هر تعداد تصویر که میخواهید برای یک دسته خاص ایجاد کنید، تا زمانی که همه آنها ویژگی data-category="your-category" یکسانی داشته باشند، وقتی روی آن دسته کلیک شود، همه آنها نمایش داده میشوند.
خط 15 تصویر بندانگشتی است که نمایش داده خواهد شد. برای دیدن نحوه استفاده از این موارد، بخش المان تصاویر را بررسی کنید.
خطوط 17 تا 19 و 20 تا 22 دقیقاً مشابه موارد فوق هستند، اما این خطوط، دسته داده متفاوتی را هدف قرار میدهند.

شما میتوانید کل کد بالا را در هر کجا که میخواهید کپی و جایگذاری و دکمه‌ها، گروه‌های دسته‌بندی را برای ایجاد موارد بیشتر کپی کنید، در حالی که data-category را برای مطابقت با تصاویر مورد نظر خود تنظیم میکنید.

چگونه یک مجموعه گالری ایجاد کنم؟

یک مجموعه گالری، یک div است که درون خود 4 تصویر را به صورت همزمان نگه میدارد. کافیست کد زیر را کپی کنید و آیکون را با آیکون خود جایگزین کنید و همه چیز آماده است.

html

<div class="gallery gallery-collection gallery-collection-round">
    <a href="#">
        <i class="fa fa-heart color-red2-dark"></i>
        <img src="images/empty.png" alt="img" class="preload-img round-small" data-src="images/pictures/isolated/1.jpg">
        <img src="images/empty.png" alt="img" class="preload-img round-small" data-src="images/pictures/isolated/2.jpg">
        <img src="images/empty.png" alt="img" class="preload-img round-small" data-src="images/pictures/isolated/3.jpg">
        <img src="images/empty.png" alt="img" class="preload-img round-small" data-src="images/pictures/isolated/4.jpg">
    </a>            
</div>

به کمک بیشتری نیاز دارید؟

همانطور که قبلاً اشاره کردم، بنده به دلیل تنبلی، بخش‌هایی از مستندات را از قلم نینداختم. من روزهای زیادی را صرف نوشتن این مستندات و پوشش تمام جنبه‌های ممکن کردم، اما ممکن است که نکته‌ی مهمی را برای شما از قلم انداخته باشم، یا شما ندانید چگونه فلان کار را انجام دهید. اما نگران نباشید.
در راست چین تیکت خود را ثبت کنید بنده در سریع‌ترین زمان(کمتر از 2 ساعت) پاسخگوی شما هستم مگر اینکه خواب باشم.🛌