لایت باکس
عکس تکی لایت باکس
<div class="grid lg:grid-cols-4 gap-5">
<div>
<a href="assets/images/small/img-1.jpg" class="image-popup">
<img src="assets/images/small/img-1.jpg" alt="work-thumbnail" class="rounded-lg">
</a>
</div>
<div>
<a href="assets/images/small/img-2.jpg" class="image-popup">
<img src="assets/images/small/img-2.jpg" alt="work-thumbnail" class="rounded-lg">
</a>
</div>
<div>
<a href="assets/images/small/img-4.jpg" class="image-popup">
<img src="assets/images/small/img-4.jpg" alt="work-thumbnail" class="rounded-lg">
</a>
</div>
<div>
<a href="assets/images/small/img-5.jpg" class="image-popup">
<img src="assets/images/small/img-5.jpg" alt="work-thumbnail" class="rounded-lg">
</a>
</div>
</div>
عکس ها با توضیحات
شما میتوانید موقعیت توضیحات را به روشهای مختلف تنظیم کنید، به عنوان مثال بالا، پایین، چپ یا راست
مثال لینک گوگل ایپسوم وسیلهای برای راحتی ویرایش است. از ایپسوم به عنوان نمونهای از متن استفاده میشود. ایپسوم وسیلهای برای راحتی ویرایش است. از ایپسوم به عنوان نمونهای از متن استفاده میشود.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
شما میتوانید موقعیت توضیحات را به روشهای مختلف تنظیم کنید، مثلاً بالا، پایین، چپ یا راست
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
<div class="grid lg:grid-cols-3 gap-5">
<div>
<a href="assets/images/small/img-4.jpg" class="image-popup-desc" data-glightbox='title:توضیحات پایین; description: You can set the position of the description <a href="http://google.com">with a link to Google</a>'>
<img src="assets/images/small/img-4.jpg" alt="work-thumbnail">
</a>
</div>
<div>
<a href="assets/images/small/img-5.jpg" class="image-popup-desc" data-glightbox="title: توضیحات راست; description: .custom-desc1; descPosition: right;">
<img src="assets/images/small/img-5.jpg" alt="work-thumbnail">
</a>
<div class="glightbox-desc custom-desc1">
<p>
You can set the position of the description in different ways for example
<strong style="text-decoration: underline">top, bottom, left or right</strong>
</p>
<p>
<a href="http://google.com" target="_blank" style="text-decoration: underline; font-weight: bold">Example Google link</a>
ipsum vehicula eros ultrices lacinia Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis quis ipsum vehicula eros ultrices lacinia.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
</p>
<p>
Primis pharetra facilisis lorem quis penatibus ad nulla inceptos, dui per tempor taciti aliquet consequat sodales, curae tristique gravida auctor interdum malesuada sagittis.
Felis pretium eros ligula natoque ad ante rutrum himenaeos, adipiscing urna mauris porta quam efficitur odio, sagittis morbi tellus nisi molestie mus faucibus.
</p>
<p>
Primis pharetra facilisis lorem quis penatibus ad nulla inceptos, dui per tempor taciti aliquet consequat sodales, curae tristique gravida auctor interdum malesuada sagittis.
Felis pretium eros ligula natoque ad ante rutrum himenaeos, adipiscing urna mauris porta quam efficitur odio, sagittis morbi tellus nisi molestie mus faucibus.
</p>
</div>
</div>
<div>
<a href="assets/images/small/img-1.jpg" class="image-popup-desc" data-glightbox="title: Description Left; description: .custom-desc2; descPosition: left;">
<img src="assets/images/small/img-1.jpg" alt="work-thumbnail">
</a>
<div class="glightbox-desc custom-desc2">
<p>You can set the position of the description in different ways for example top, bottom, left or right</p>
<p>Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
</div>
</div>
</div>
پاپ آب به همراه ویدئو یا نقشه
<div class="flex flex-wrap gap-4">
<!-- Youtube Video -->
<a href="https://www.youtube.com/watch?v=0O2aH4XLbto" class="image-popup-video-button rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold leading-5 text-white hover:bg-indigo-500" data-title="YouTube Video" data-description="YouTube Video Popup">
Open YouTube Video
</a>
<!-- Vimeo Video -->
<a href="https://vimeo.com/45830194" class="image-popup-video-button rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold leading-5 text-white hover:bg-indigo-500" data-title="Vimeo Video" data-description="Vimeo Video Popup">
Open Vimeo Video
</a>
</div>
گالری ویدئو ها
شما میتوانید ویدیوهایی با پخش خودکار اختیاری برای ویمیو ، یوتیوب و ویدیوهای میزبان خود اضافه کنید. شما میتوانید یک عرض پیشفرض برای ویدیوها مشخص کنید یا عرضهای مختلفی را برای هر ویدیو در گالری خود تنظیم کنید. ویدیوها 100% واکنشگرا هستند و به درستی بر روی دستگاههای موبایل پخش خواهند شد.
<div class="grid lg: grid-cols-3 gap-4">
<div>
<div>
<a href="https://vimeo.com/115041822" class="image-popup-video">
<img src="assets/images/small/img-1.jpg" alt="image" >
</a>
</div>
</div>
<div>
<div>
<a href="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk" class="image-popup-video">
<img src="assets/images/small/img-2.jpg" alt="image" >
</a>
</div>
</div>
<div>
<div>
<a href="assets/images/lightbox-video.mp4" class="image-popup-video">
<img src="assets/images/small/img-12.jpg" alt="image" >
</a>
</div>
</div>
</div>
آی فریم و المان خطی
شما میتوانید به راحتی با وارد کردن آدرس URL، آیفریمها را اضافه کنید، این URL میتواند یک صفحه وب، یک ویدیو، نقشه گوگل و غیره باشد. همچنین میتوانید هر div از صفحه خود را با وارد کردن ID در ویژگی href نمایش دهید.
<div class="grid lg: grid-cols-3 gap-4">
<div>
<a href="https://tailwindcss.com/" class="image-iframe-elements">
<img src="assets/images/small/img-5.jpg" alt="image" >
</a>
</div>
<div>
<a class="image-iframe-elements" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642">
<img src="assets/images/small/img-7.jpg" alt="image" >
</a>
</div>
</div>