;
/* =================================================
VIDEO PLAY SYSTEM
================================================= */
function initializeVideo(wrapper) {
if (!wrapper) {
return;
}
const video =
wrapper.querySelector(
"video"
);
const playButton =
wrapper.querySelector(
".custom-video-play"
);
if (!video || !playButton) {
return;
}
/* ---------------------------------------------
Play Button
--------------------------------------------- */
playButton.addEventListener(
"click",
function (event) {
event.preventDefault();
event.stopPropagation();
video.play()
.then(function () {
wrapper.classList.add(
"playing"
);
})
.catch(function () {});
}
);
/* ---------------------------------------------
Play
--------------------------------------------- */
video.addEventListener(
"play",
function () {
wrapper.classList.add(
"playing"
);
}
);
/* ---------------------------------------------
Pause
--------------------------------------------- */
video.addEventListener(
"pause",
function () {
wrapper.classList.remove(
"playing"
);
}
);
/* ---------------------------------------------
End
--------------------------------------------- */
video.addEventListener(
"ended",
function () {
wrapper.classList.remove(
"playing"
);
}
);
}
/* =================================================
تمام ویدیوهای اولیه
================================================= */
gallery
.querySelectorAll(
".custom-video-wrapper"
)
.forEach(function (wrapper) {
initializeVideo(wrapper);
});
/* =================================================
DESKTOP GALLERY
================================================= */
const thumbs =
gallery.querySelectorAll(
".desktop-gallery-thumb"
);
const mainContainer =
gallery.querySelector(
".desktop-main-image"
);
thumbs.forEach(function (thumb) {
thumb.addEventListener(
"click",
function () {
const slideIndex =
parseInt(
this.dataset.index,
10
);
if (
!slidesData[slideIndex] ||
!mainContainer
) {
return;
}
/* -----------------------------------------
Active Thumbnail
----------------------------------------- */
thumbs.forEach(function (item) {
item.classList.remove(
"active"
);
});
this.classList.add(
"active"
);
/* -----------------------------------------
توقف ویدیو قبلی
----------------------------------------- */
const oldVideo =
mainContainer.querySelector(
"video"
);
if (oldVideo) {
oldVideo.pause();
}
/* -----------------------------------------
اسلاید جدید
----------------------------------------- */
const slide =
slidesData[slideIndex];
/* -----------------------------------------
Video
----------------------------------------- */
if (
slide.type === "video"
) {
mainContainer.innerHTML =
'' +
'' +
'' +
'';
const newWrapper =
mainContainer.querySelector(
".custom-video-wrapper"
);
initializeVideo(
newWrapper
);
}
/* -----------------------------------------
Image
----------------------------------------- */
else {
mainContainer.innerHTML =
'
';
}
}
);
});
/* =================================================
MOBILE SLIDER
================================================= */
const mobileSlider =
gallery.querySelector(
".mobile-product-slider"
);
const mobileTrack =
gallery.querySelector(
".mobile-slider-track"
);
const mobileSlides =
gallery.querySelectorAll(
".mobile-slider-item"
);
const mobileDots =
gallery.querySelectorAll(
".mobile-slider-dot"
);
if (
!mobileSlider ||
!mobileTrack ||
mobileSlides.length <= 1
) {
return;
}
let index = 0;
let startX = 0;
let startY = 0;
let currentX = 0;
let currentY = 0;
let isDragging = false;
let isHorizontalDrag = false;
let pointerId = null;
/* =================================================
Slide Step
================================================= */
function getSlideStep() {
const firstSlide =
mobileSlides[0];
if (!firstSlide) {
return 0;
}
const slideWidth =
firstSlide
.getBoundingClientRect()
.width;
const trackStyle =
window.getComputedStyle(
mobileTrack
);
const gap =
parseFloat(
trackStyle.columnGap ||
trackStyle.gap
) || 0;
return slideWidth + gap;
}
/* =================================================
Video Control
فقط ویدیوهای غیر فعال را متوقف میکند
================================================= */
function updateMobileVideos() {
mobileSlides.forEach(
function (slide, i) {
const video =
slide.querySelector(
".mobile-slider-video"
);
if (!video) {
return;
}
if (i !== index) {
video.pause();
try {
video.currentTime = 0;
} catch (error) {}
}
}
);
}
/* =================================================
Go To Slide
================================================= */
function goToMobileSlide(i) {
if (i < 0) {
i = 0;
}
if (
i >= mobileSlides.length
) {
i =
mobileSlides.length - 1;
}
index = i;
const move =
getSlideStep() * index;
mobileTrack.style.transition =
"transform .4s cubic-bezier(.22,.61,.36,1)";
mobileTrack.style.transform =
"translate3d(-" +
move +
"px,0,0)";
mobileDots.forEach(
function (dot) {
dot.classList.remove(
"active"
);
}
);
if (mobileDots[index]) {
mobileDots[index]
.classList
.add("active");
}
updateMobileVideos();
}
/* =================================================
Dots
================================================= */
mobileDots.forEach(
function (dot) {
dot.addEventListener(
"click",
function (event) {
event.preventDefault();
event.stopPropagation();
const target =
parseInt(
this.dataset.index,
10
);
goToMobileSlide(
target
);
}
);
}
);
/* =================================================
Drag Start
================================================= */
function dragStart(event) {
if (
event.pointerType === "mouse" &&
event.button !== 0
) {
return;
}
isDragging = true;
isHorizontalDrag = false;
pointerId =
event.pointerId;
startX =
event.clientX;
startY =
event.clientY;
currentX =
startX;
currentY =
startY;
mobileTrack.style.transition =
"none";
if (
mobileSlider.setPointerCapture &&
pointerId !== null
) {
try {
mobileSlider.setPointerCapture(
pointerId
);
} catch (error) {}
}
}
/* =================================================
Drag Move
================================================= */
function dragMove(event) {
if (!isDragging) {
return;
}
currentX =
event.clientX;
currentY =
event.clientY;
const diffX =
currentX - startX;
const diffY =
currentY - startY;
/* ---------------------------------------------
تشخیص جهت
--------------------------------------------- */
if (!isHorizontalDrag) {
if (
Math.abs(diffX) < 8 &&
Math.abs(diffY) < 8
) {
return;
}
/*
* اگر حرکت عمودی بود
* اسکرول صفحه انجام شود
*/
if (
Math.abs(diffY) >
Math.abs(diffX)
) {
isDragging = false;
mobileTrack.style.transition =
"transform .4s cubic-bezier(.22,.61,.36,1)";
return;
}
isHorizontalDrag = true;
}
/* ---------------------------------------------
جلوگیری از Scroll هنگام Swipe افقی
--------------------------------------------- */
if (
isHorizontalDrag &&
event.cancelable
) {
event.preventDefault();
}
const baseMove =
getSlideStep() * index;
let dragPosition =
-baseMove + diffX;
/* ---------------------------------------------
مقاومت ابتدا
--------------------------------------------- */
if (
index === 0 &&
diffX > 0
) {
dragPosition =
-baseMove +
(diffX * 0.35);
}
/* ---------------------------------------------
مقاومت انتها
--------------------------------------------- */
if (
index === mobileSlides.length - 1 &&
diffX < 0
) {
dragPosition =
-baseMove +
(diffX * 0.35);
}
mobileTrack.style.transform =
"translate3d(" +
dragPosition +
"px,0,0)";
}
/* =================================================
Drag End
================================================= */
function dragEnd(event) {
if (!isDragging) {
return;
}
const distance =
currentX - startX;
isDragging = false;
if (
mobileSlider.releasePointerCapture &&
pointerId !== null
) {
try {
mobileSlider.releasePointerCapture(
pointerId
);
} catch (error) {}
}
/* ---------------------------------------------
Swipe
--------------------------------------------- */
if (isHorizontalDrag) {
if (distance < -45) {
goToMobileSlide(
index + 1
);
}
else if (distance > 45) {
goToMobileSlide(
index - 1
);
}
else {
goToMobileSlide(
index
);
}
}
else {
goToMobileSlide(index);
}
isHorizontalDrag = false;
pointerId = null;
}
/* =================================================
Pointer Events
================================================= */
mobileSlider.addEventListener(
"pointerdown",
dragStart,
{
passive: true
}
);
mobileSlider.addEventListener(
"pointermove",
dragMove,
{
passive: false
}
);
mobileSlider.addEventListener(
"pointerup",
dragEnd,
{
passive: true
}
);
mobileSlider.addEventListener(
"pointercancel",
dragEnd,
{
passive: true
}
);
/* =================================================
جلوگیری از Drag تصویر
================================================= */
gallery
.querySelectorAll("img")
.forEach(function (image) {
image.setAttribute(
"draggable",
"false"
);
image.addEventListener(
"dragstart",
function (event) {
event.preventDefault();
}
);
});
/* =================================================
Resize
================================================= */
let resizeTimer;
window.addEventListener(
"resize",
function () {
clearTimeout(
resizeTimer
);
resizeTimer =
setTimeout(
function () {
goToMobileSlide(
index
);
},
100
);
}
);
/* =================================================
مقدار اولیه
================================================= */
requestAnimationFrame(
function () {
goToMobileSlide(0);
}
);
}
);
این مجموعه شامل فونت زیبای lovefern می باشد که شما می توانید به راحتی با استفاده از این فونت زیبا یک طراحی حرفه ای برای خود انجام دهید. همچنین می توانید از این فونت ها در پروژه های تبلیغاتی خودتان نیز استفاده نمایید و به مشتری خود تحویل دهید. این فونت های زیبا توسط طراحان حرفه ای و با تجربه شرکت های بزرگ گرافیکی تولید شده و مورد استفاده کاربران عموم قرار می گیرد. طراحان فونت های آماده را طوری طراحی کرده اند که بیشتر کاربران توانایی نصب و استفاده از آن را به راحتی داشته باشند و نیز بتوانند تغییر در متن و اجرای رنگ های متفاوت در فونت پروژه های خود داشته باشند. فونتهای بیشتر رو میتونید از سایت abasvp.ir دانلود کنید.
همچنین لازم به ذکر است که برای استفاده از این فونت ها به هیچ افزونه ای لازم نیست و کار با فونت ها به ساده ترین شکل ممکن هستند. و برای دانلود مجموعه فونت های انگلیسی تحریری بیشتر میتونید رو این متن کلیک کنید با خرید اشتراک، به هزاران فایل گرافیکی، فونت، لایهباز، پرامپت هوش مصنوعی و صدها دستهبندی دیگر، به راحتی دانلود کنید.
با خرید اشتراک یکساله فونت، به مدت ۳۶۵ روز به آرشیو بیش از ۱۰,۰۰۰ فونت فارسی و انگلیسی دسترسی خواهید داشت. همچنین در طول مدت اشتراک، تمامی فونتهای جدید، بهروزرسانیهای منظم، دانلود سریع و پشتیبانی آنلاین بدون محدودیت در اختیار شما خواهد بود.
اگر فقط به فونت نیاز دارید، این پلن بهترین انتخاب برای شماست. اما اگر طراح، گرافیست، تدوینگر، تولیدکننده محتوا یا ادیتور هستید، پیشنهاد میکنیم اشتراک کامل سایت را تهیه کنید تا علاوه بر تمامی فونتها، به تمام فایلها و امکانات سایت نیز دسترسی داشته باشید.
توضیحات کامل هر پلن، امکانات و مزایای اشتراک، شرایط خرید و استفاده و همچنین پاسخ سؤالات متداول را میتوانید در صفحه راهنمای اشتراک مشاهده کنید.
نقد و بررسیها
هنوز بررسیای ثبت نشده است.