محمود خسروی
4 سال پیش توسط محمود خسروی مطرح شد
14 پاسخ

کتابخانه baguetteBox

سلام کتابخانه baguetteBox.js با rtl مشکل داره و هر کاری میکنم درست نمیشه ممنون میشم اگر سورسی در اینجا قرار دهید.


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

تغییرات لازمی که باید در 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;
        }
    }

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

برای حل مشکل راست به چپ هم این رو بررسی کن:
https://github.com/feimosi/baguetteBox.js/issues/192


محمود خسروی
تخصص : طراح و برنامه نویس
@oxbir 4 سال پیش آپدیت شد
0

@milad

قبلا هم دیدم و این طوری گزاشتم حل نشد

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 اش کار نکرد


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

کدهای html و js مرتبط رو اینجا قرار بده، من کپی کنم و بررسی کنم روی سیستم خودم.


محمود خسروی
تخصص : طراح و برنامه نویس
@oxbir 4 سال پیش مطرح شد
0

http://s11.picofile.com/file/8404941618/compact_gallery.rar.html

این خودش پیشفرض است و من فق 2 خط اضاقه کردم

    <html dir="rtl">

با این کدی که در جاوااسکریپت دادی رو قرار دادم


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

بررسی کردم، راه حلی که ارائه شده بودش به درستی کار می کنه. ولی احتمالا شما به درستی اعمالش نکردید که نتیجه نگرفتید.
https://github.com/feimosi/baguetteBox.js/issues/192


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

1) ابتدا صفحه رو همونجوری که خودتون گفتید در html راست به چپ کنید.
2) سپس شما باید وارد فایل اولیه ی baguetteBox.js بشید و همونطور که ایشون گفتن تغییراتی رو اعمال کنید.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

تغییرات لازمی که باید در 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;
        }
    }

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
1

در نهایت، این نسخه ی جدیدی که از baguetteBox.js بوجود آوردید بجای نسخه ی قبلی جایگزین کنید.
حالا میمونه مرحله آخر، یعنی بکارگیری اون. بدین صورت بکار بگیریدش:

<script>
    window.addEventListener('load', function() {
        /*initial gallery with RTL option*/
          baguetteBox.run('.compact-gallery', {RTL:true});
    });
</script>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

مرحله به مرحله و جدا جدا کارهایی که باید انجام بدی رو نوشتم برات که گویاتر باشه.
خودمم روی فایل شما امتحانش کردم، بدرستی کار می کنه.
انجامش بده، بازم اگه مشکل داشتی اینجا بگو تا راهنمایی تون کنم.


محمود خسروی
تخصص : طراح و برنامه نویس
@oxbir 4 سال پیش مطرح شد
0

توی سایت که این موارد رو بردم و اپلود کرردم کار نمیکنه یه خطا در console داره

Uncaught (in promise) TypeError: Failed to execute 'exitFullscreen' on 'Document': Document not active


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

خب به نظرم این خطا مستقل از کلیت کار هستش، واسه این خطا ی گفتگوی جدید درست کن، ببنیم نظر دوستان چیه.
توی اینترنت باید گشت.


محمود خسروی
تخصص : طراح و برنامه نویس
@oxbir 4 سال پیش مطرح شد
0

من الان چهار تا 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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

اینجوری که نوشتی یکیش جی کوئری هستش، چهارتا نیست که.
بررسی کردم، دیدم exitFullscreen یکی از توابع baguetteBox هستش. توی گیتهاب هم خطاش گزارش شده بود. منتها چون توی سیستم من خطایی نداره، نمی تونم مشکلش رو درست سنجش کنم.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام