کتابخانه baguetteBox
سلام کتابخانه baguetteBox.js با rtl مشکل داره و هر کاری میکنم درست نمیشه ممنون میشم اگر سورسی در اینجا قرار دهید.
تغییرات لازمی که باید در baguetteBox.js اعمال کنید، اینهاست:
1)
var options = {},
defaults = {
RTL:false, // این خط رو اضافه کنید
captions: true,
buttons: 'auto',
fullScreen: false,
noScrollbars: false,
bodyClass: 'baguetteBox-open',
titleTag: false,
async: false,
preload: 2,
animation: 'slideIn',
afterShow: null,
afterHide: null,
onChange: null,
overlayBackgroundColor: 'rgba(0,0,0,.8)'
};
2)
function updateOffset() {
// var offset = -currentIndex * 100 + '%'; این خط رو حذف کنید
// به جاش سه خط زیر رو اضافه کنید
var offset;
if (options.RTL) offset = currentIndex * 100 + '%';
else offset = -currentIndex * 100 + '%';
if (options.animation === 'fadeIn') {
slider.style.opacity = 0;
setTimeout(function() {
supports.transforms ?
slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)'
: slider.style.left = offset;
slider.style.opacity = 1;
}, 400);
} else {
supports.transforms ?
slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)'
: slider.style.left = offset;
}
}
برای حل مشکل راست به چپ هم این رو بررسی کن:
https://github.com/feimosi/baguetteBox.js/issues/192
قبلا هم دیدم و این طوری گزاشتم حل نشد
var options = {},
defaults = {
RTL:false,
captions: true,
buttons: 'auto',
fullScreen: false,
noScrollbars: false,
bodyClass: 'baguetteBox-open',
titleTag: false,
async: false,
preload: 2,
animation: 'slideIn',
afterShow: null,
afterHide: null,
onChange: null,
overlayBackgroundColor: 'rgba(0,0,0,.8)'
};و این کتابخانه را امتحان کردم rtl اش کار نکرد
http://s11.picofile.com/file/8404941618/compact_gallery.rar.html
این خودش پیشفرض است و من فق 2 خط اضاقه کردم
<html dir="rtl">با این کدی که در جاوااسکریپت دادی رو قرار دادم
بررسی کردم، راه حلی که ارائه شده بودش به درستی کار می کنه. ولی احتمالا شما به درستی اعمالش نکردید که نتیجه نگرفتید.
https://github.com/feimosi/baguetteBox.js/issues/192
1) ابتدا صفحه رو همونجوری که خودتون گفتید در html راست به چپ کنید.
2) سپس شما باید وارد فایل اولیه ی baguetteBox.js بشید و همونطور که ایشون گفتن تغییراتی رو اعمال کنید.
تغییرات لازمی که باید در baguetteBox.js اعمال کنید، اینهاست:
1)
var options = {},
defaults = {
RTL:false, // این خط رو اضافه کنید
captions: true,
buttons: 'auto',
fullScreen: false,
noScrollbars: false,
bodyClass: 'baguetteBox-open',
titleTag: false,
async: false,
preload: 2,
animation: 'slideIn',
afterShow: null,
afterHide: null,
onChange: null,
overlayBackgroundColor: 'rgba(0,0,0,.8)'
};
2)
function updateOffset() {
// var offset = -currentIndex * 100 + '%'; این خط رو حذف کنید
// به جاش سه خط زیر رو اضافه کنید
var offset;
if (options.RTL) offset = currentIndex * 100 + '%';
else offset = -currentIndex * 100 + '%';
if (options.animation === 'fadeIn') {
slider.style.opacity = 0;
setTimeout(function() {
supports.transforms ?
slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)'
: slider.style.left = offset;
slider.style.opacity = 1;
}, 400);
} else {
supports.transforms ?
slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)'
: slider.style.left = offset;
}
}در نهایت، این نسخه ی جدیدی که از baguetteBox.js بوجود آوردید بجای نسخه ی قبلی جایگزین کنید.
حالا میمونه مرحله آخر، یعنی بکارگیری اون. بدین صورت بکار بگیریدش:
<script>
window.addEventListener('load', function() {
/*initial gallery with RTL option*/
baguetteBox.run('.compact-gallery', {RTL:true});
});
</script>مرحله به مرحله و جدا جدا کارهایی که باید انجام بدی رو نوشتم برات که گویاتر باشه.
خودمم روی فایل شما امتحانش کردم، بدرستی کار می کنه.
انجامش بده، بازم اگه مشکل داشتی اینجا بگو تا راهنمایی تون کنم.
توی سایت که این موارد رو بردم و اپلود کرردم کار نمیکنه یه خطا در console داره
Uncaught (in promise) TypeError: Failed to execute 'exitFullscreen' on 'Document': Document not active
خب به نظرم این خطا مستقل از کلیت کار هستش، واسه این خطا ی گفتگوی جدید درست کن، ببنیم نظر دوستان چیه.
توی اینترنت باید گشت.
من الان چهار تا jquery دارم
<script src="{{ asset('themes/js/jquery-3.5.1.slim.min.js') }}"></script>
<script src="{{ asset('themes/js/popper.min.js') }}"></script>
<script src="{{ asset('themes/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('themes/js/baguetteBox.js') }}"></script>
<script>
window.addEventListener('load', function() {
/*initial gallery with RTL option*/
baguetteBox.run('.compact-gallery', {RTL:true});
});
</script>اینجوری که نوشتی یکیش جی کوئری هستش، چهارتا نیست که.
بررسی کردم، دیدم exitFullscreen یکی از توابع baguetteBox هستش. توی گیتهاب هم خطاش گزارش شده بود. منتها چون توی سیستم من خطایی نداره، نمی تونم مشکلش رو درست سنجش کنم.