مشكلة تحديث Lightgallery مع Livewire

جواد حيدر · 16 فبراير

I use blade to show my project detail in database I have

phone table which contain detail for the phone

and phonecolor table which contain four string for four i

mage which image1 , image2 , image3 , image4

in blade I display the color like foreach phone->phonecolor as color

and when I click on any color it display the phonecolor image which image1 image2, image... it work well and lightgallery work well but when I click on some color to display It work but lightgallery didn't update when I click on the image 1 or imag2 to zoom it in large screen it didn't work it display the previous color

I mean the lightgallery didn't update with livewire any more when the number of image update

can any one help

تم التعديل في 16 فبراير بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 16 فبراير

لنتفق أولاً على المشكلة لديك وهي بالوصف التالي:

تستخدم Blade لعرض تفاصيل المشروع من قاعدة البيانات.
لديك جدول phone يحتوي على تفاصيل الهاتف وجدول phonecolor يحتوي على أربعة سلاسل لأربعة صور (image1, image2, image3, image4).
في Blade، تعرض الألوان باستخدام foreach phone->phonecolor as color.
عند النقر على أي لون، يتم عرض صور phonecolor (أي image1، image2، إلخ).
يعمل Lightgallery بشكل صحيح عند النقر على لون لعرض الصور.
ومع ذلك، عندما تقوم بالنقر على صورة واحدة (مثل image1 أو image2) لتكبيرها، لا يتم تحديث Lightgallery ولا يتم تكبير الصورة الصحيحة.
Lightgallery لم تعد تتفاعل مع Livewire عند تحديث عدد الصور.

فهل قمت بتحديث مكونات Livewire بشكل صحيح عند النقر على لون مختلف؟ حيث تستطيع ذلك بواسطة $refresh() أو إعادة توجيه المستخدم إلى نفس الصفحة باستخدام $goto() للتأكد من إعادة تحميل المكون وتحديث Lightgallery.

أيضًا أضف الخاصية livewire:key إلى العناصر التي يتم تحديثها ديناميكيًا (مثل معرض Lightgallery). سيضمن ذلك إعادة تقديم العنصر بشكل صحيح عند تغير البيانات.

<div x-data="{ selectedColor: 'black' }">
    <button @click="selectedColor = 'black'">أسود</button>
    <button @click="selectedColor = 'white'">أبيض</button>

    <div x-show="selectedColor === 'black'" livewire:key="black-images">
        </div>

    <div x-show="selectedColor === 'white'" livewire:key="white-images">
        </div>
</div>

مع التأكد من أن كود JavaScript الخاص بك الذي يحاول تكبير الصور يعمل بشكل صحيح مع Livewire، فربما تحتاج إلى تعديل الكود لاستهداف العناصر الصحيحة بعد تحديث المكونات، أو التفكير في استخدام مكتبة أخرى مثل photoswipe أو swiper.

جواد حيدر · 16 فبراير

بتاريخ 32 دقائق مضت قال Mustafa Suleiman:
لنتفق أولاً على المشكلة لديك وهي بالوصف التالي:

تستخدم Blade لعرض تفاصيل المشروع من قاعدة البيانات.

لديك جدول phone يحتوي على تفاصيل الهاتف وجدول phonecolor يحتوي على أربعة سلاسل لأربعة صور (image1, image2, image3, image4).

في Blade، تعرض الألوان باستخدام foreach phone->phonecolor as color.

عند النقر على أي لون، يتم عرض صور phonecolor (أي image1، image2، إلخ).

يعمل Lightgallery بشكل صحيح عند النقر على لون لعرض الصور.

ومع ذلك، عندما تقوم بالنقر على صورة واحدة (مثل image1 أو image2) لتكبيرها، لا يتم تحديث Lightgallery ولا يتم تكبير الصورة الصحيحة.

Lightgallery لم تعد تتفاعل مع Livewire عند تحديث عدد الصور.

فهل قمت بتحديث مكونات Livewire بشكل صحيح عند النقر على لون مختلف؟ حيث تستطيع ذلك بواسطة $refresh() أو إعادة توجيه المستخدم إلى نفس الصفحة باستخدام $goto() للتأكد من إعادة تحميل المكون وتحديث Lightgallery.

أيضًا أضف الخاصية livewire:key إلى العناصر التي يتم تحديثها ديناميكيًا (مثل معرض Lightgallery). سيضمن ذلك إعادة تقديم العنصر بشكل صحيح عند تغير البيانات.
<div x-data="{ selectedColor: 'black' }">
    <button @click="selectedColor = 'black'">أسود</button>
    <button @click="selectedColor = 'white'">أبيض</button>

    <div x-show="selectedColor === 'black'" livewire:key="black-images">
        </div>

    <div x-show="selectedColor === 'white'" livewire:key="white-images">
        </div>
</div>
مع التأكد من أن كود JavaScript الخاص بك الذي يحاول تكبير الصور يعمل بشكل صحيح مع Livewire، فربما تحتاج إلى تعديل الكود لاستهداف العناصر الصحيحة بعد تحديث المكونات، أو التفكير في استخدام مكتبة أخرى مثل photoswipe أو swiper.