لا يعمل معي الـ Lightbox Jquery plugin لعرض الصور

يجب أن تقوم بإضافة الخاصية data-lightbox إلى عنصر a وليس إلى الصورة، على النحو التالي:

<a href="img/1.png" data-lightbox="gallery">
  <!--              ^^^^^^^^^^^^^^^^^^^^^^^ -->
  <img src="img/1.png" class="show-small-img" alt="">
</a>

أيضًا بما أنك تستعمل مكتبة jQuery فليس عليك تضمين الملف lightbox-plus-jquery.min.js لأنه يحتوي على مكتبة jQuery 3.4.1 بالإضافة إلى lightbox، بدلًا من ذلك يمكنك أن تستعمل الملف lightbox.min.js بعد مكتبة jQuery فقط كالتالي:

<script src="js/jquery.js"></script>
<script src="LIGHTBOX\lightbox2-2.11.3\dist\js\lightbox.min.js"></script>
<script src="js/home.js"></script>

بتاريخ 8 ساعات قال محمد محمد مجدي:

أستاذي العزيز .. لاحظت أنه عند تكرار المنتج .. يظهر لي 6 صور في الـ lightbox عند فتح صور أي منتج ..

فالمنتج الأول له 3 صور سفلية .. والمنتج الثاني له 3 صور سفلية أخرى .. 

هل يمكنني جعل المنتج يعرض الـ 3 صور الخاصة به فقط ؟ ..

بصراحة جربت العديد من الطرق ولكني لم أنجح في الوصول ..

تم إرفاق المثال لحضرتك .. ولحضرتك خالص الشكر .

عندما يكون لديك أكثر  من مجموعة من الصور يجب أن تقوم بتغير قيمة الخاصية data-lightbox، كالتالي:

<div id="small-img-roll" class="gallery">
    <a href="img/1.png" data-lightbox="gallery1"><img src="img/1.png" class="show-small-img" alt=""></a>
    <a href="img/2.png" data-lightbox="gallery1"><img src="img/2.png" class="show-small-img" alt=""></a>
    <a href="img/3.png" data-lightbox="gallery1"><img src="img/3.png" class="show-small-img" alt=""></a>
</div>

<div id="small-img-roll" class="gallery">
    <a href="img/1.png" data-lightbox="gallery2"><img src="img/1.png" class="show-small-img" alt=""></a>
    <a href="img/2.png" data-lightbox="gallery2"><img src="img/2.png" class="show-small-img" alt=""></a>
    <a href="img/3.png" data-lightbox="gallery2"><img src="img/3.png" class="show-small-img" alt=""></a>
</div>

لاحظ أن قيمة الخاصية data-lightbox في المجموعة الأولى تختلف عن المجموعة الثانية، وبالتالي يُمكن لمكتبة LightBox أن تُفرق بين المجموعات.

بتاريخ 18 دقائق مضت قال سامح أشرف:

يجب أن تقوم بإضافة الخاصية data-lightbox إلى عنصر a وليس إلى الصورة، على النحو التالي:

<a href="img/1.png" data-lightbox="gallery">
  <!--              ^^^^^^^^^^^^^^^^^^^^^^^ -->
  <img src="img/1.png" class="show-small-img" alt="">
</a>

أيضًا بما أنك تستعمل مكتبة jQuery فليس عليك تضمين الملف lightbox-plus-jquery.min.js لأنه يحتوي على مكتبة jQuery 3.4.1 بالإضافة إلى lightbox، بدلًا من ذلك يمكنك أن تستعمل الملف lightbox.min.js بعد مكتبة jQuery فقط كالتالي:

<script src="js/jquery.js"></script>
<script src="LIGHTBOX\lightbox2-2.11.3\dist\js\lightbox.min.js"></script>
<script src="js/home.js"></script>

 

بالفعل أستاذي .. لقد أخطأت دون قصد ووضعت الخاصية ضمن عنصر a .. أشكرك على التوضيح ..

أصبح الآن الـ Lightbox يعمل معي .. ولكني ألاحظ عدم ظهور الأسهم للتقليب بين الصور وكذلك علامة x للإغلاق ..

رغم أنني قمت بالفعل بوضع الملفات الخاصة بهم ضمن img وهو المجلد الخاص بالصور .. فما المشكلة من فضلك ؟

بتاريخ 2 دقائق مضت قال محمد محمد مجدي:

بالفعل أستاذي .. لقد أخطأت دون قصد ووضعت الخاصية ضمن عنصر a .. أشكرك على التوضيح ..

أصبح الآن الـ Lightbox يعمل معي .. ولكني ألاحظ عدم ظهور الأسهم للتقليب بين الصور وكذلك علامة x للإغلاق ..

رغم أنني قمت بالفعل بوضع الملفات الخاصة بهم ضمن img وهو المجلد الخاص بالصور .. فما المشكلة من فضلك ؟

مكتبة lightbox تحتاج أن تكون الصور في مجلد images وليس img وبالتالي لا تتمكن المكتبة من العثور على الصور، يمكنك حل المشكلة من خلال نقل المجلد LIGHTBOX\lightbox2-2.11.3\dist\images إلى مجلد المشروع مباشرة. كما في الصورة:

بتاريخ 2 ساعات قال سامح أشرف:

مكتبة lightbox تحتاج أن تكون الصور في مجلد images وليس img وبالتالي لا تتمكن المكتبة من العثور على الصور، يمكنك حل المشكلة من خلال نقل المجلد LIGHTBOX\lightbox2-2.11.3\dist\images إلى مجلد المشروع مباشرة. كما في الصورة:

أشكرك أستاذي العزيز .. بصراحة أستفيد من ردود حضرتك جداً .. وأشعر بمتعة أثناء رحلة التعلم .. خالص الشكر .

أستاذي العزيز .. لاحظت أنه عند تكرار المنتج .. يظهر لي 6 صور في الـ lightbox عند فتح صور أي منتج ..

فالمنتج الأول له 3 صور سفلية .. والمنتج الثاني له 3 صور سفلية أخرى .. 

هل يمكنني جعل المنتج يعرض الـ 3 صور الخاصة به فقط ؟ ..

بصراحة جربت العديد من الطرق ولكني لم أنجح في الوصول ..

تم إرفاق المثال لحضرتك .. ولحضرتك خالص الشكر .

HomePage.zip

بتاريخ On 08/11/2021 at 18:11 قال سامح أشرف:

عندما يكون لديك أكثر  من مجموعة من الصور يجب أن تقوم بتغير قيمة الخاصية data-lightbox، كالتالي:

<div id="small-img-roll" class="gallery">
    <a href="img/1.png" data-lightbox="gallery1"><img src="img/1.png" class="show-small-img" alt=""></a>
    <a href="img/2.png" data-lightbox="gallery1"><img src="img/2.png" class="show-small-img" alt=""></a>
    <a href="img/3.png" data-lightbox="gallery1"><img src="img/3.png" class="show-small-img" alt=""></a>
</div>

<div id="small-img-roll" class="gallery">
    <a href="img/1.png" data-lightbox="gallery2"><img src="img/1.png" class="show-small-img" alt=""></a>
    <a href="img/2.png" data-lightbox="gallery2"><img src="img/2.png" class="show-small-img" alt=""></a>
    <a href="img/3.png" data-lightbox="gallery2"><img src="img/3.png" class="show-small-img" alt=""></a>
</div>

لاحظ أن قيمة الخاصية data-lightbox في المجموعة الأولى تختلف عن المجموعة الثانية، وبالتالي يُمكن لمكتبة LightBox أن تُفرق بين المجموعات.

شكراً جداً .. بالفعل أعرف هذا الحل .. ولكني كنت أبحث عن حل يقوم بذلك تلقائياً ..

كنت أعتقد أنه يمكن القيام بالأمر من خلال لغة Javascript .. خالص تحياتي .

بتاريخ 2 ساعات قال محمد محمد مجدي:

شكراً جداً .. بالفعل أعرف هذا الحل .. ولكني كنت أبحث عن حل يقوم بذلك تلقائياً ..

كنت أعتقد أنه يمكن القيام بالأمر من خلال لغة Javascript .. خالص تحياتي .

بالتأكيد يمكنك أن تقوم بهذا الأمر بطريقة تلقائية من خلال JavaScript وهي كالتالي:

// تحديد كل العناصر التي لها الصنف gallery
const galleries = document.querySelectorAll('.gallery')

galleries.forEach(gallery => {
  // توليد قيمة عشوائية للخاصية data-lightbox
  const randomText = 'gallery-' + Math.floor(Math.random() * 10000)
  
  // إضافة الخاثية data-lightbox بقيمة النص العشوائي السابق
  const links = gallery.querySelectorAll('a')
  links.forEach(link => {
    link.setAttribute('data-lightbox', randomText)
  })
})

بهذه الطريقة ليس عليك أن تقوم بتحديد قيمة مختلفة، وستقوم JavaScript بتوليد قيم عشوائية لكل مجموعة من الصور.

بتاريخ منذ ساعة مضت قال سامح أشرف:

بالتأكيد يمكنك أن تقوم بهذا الأمر بطريقة تلقائية من خلال JavaScript وهي كالتالي:

// تحديد كل العناصر التي لها الصنف gallery
const galleries = document.querySelectorAll('.gallery')

galleries.forEach(gallery => {
  // توليد قيمة عشوائية للخاصية data-lightbox
  const randomText = 'gallery-' + Math.floor(Math.random() * 10000)
  
  // إضافة الخاثية data-lightbox بقيمة النص العشوائي السابق
  const links = gallery.querySelectorAll('a')
  links.forEach(link => {
    link.setAttribute('data-lightbox', randomText)
  })
})

بهذه الطريقة ليس عليك أن تقوم بتحديد قيمة مختلفة، وستقوم JavaScript بتوليد قيم عشوائية لكل مجموعة من الصور.

بالظبط أستاذي .. هذا ما كنت أبحث عنه .. وهو بالفعل حل المشكلة ..

لدي سؤال من فضلك .. أدرس الآن دورة تطوير واجهات المستخدم .. 

وهذه الفكرة التي نفذتها حضرتك تماماً خطرت ببالي .. ولكني لم أكن أعرف كيف أنفذها برمجياً .. 

هل هذا طبيعي في هذه المرحلة ؟ .. وبماذا تنصحني ؟ .. خالص الشكر .. وآسف على الإطالة .

بتاريخ 52 دقائق مضت قال محمد محمد مجدي:

بالظبط أستاذي .. هذا ما كنت أبحث عنه .. وهو بالفعل حل المشكلة ..

لدي سؤال من فضلك .. أدرس الآن دورة تطوير واجهات المستخدم .. 

وهذه الفكرة التي نفذتها حضرتك تماماً خطرت ببالي .. ولكني لم أكن أعرف كيف أنفذها برمجياً .. 

هل هذا طبيعي في هذه المرحلة ؟ .. وبماذا تنصحني ؟ .. خالص الشكر .. وآسف على الإطالة .

بالتأكيد قد تجد صعوبات في تنفيذ الأفكار أو حل المشاكل بشكل عام، وذلك لأنك تحاول أن تكتسب الخبرة مع الوقت ومع حل كل مشكلة، فعلى سبيل المثال: ربما لا تعرف كيفية توليد أرقام عشوائية في JavaScript ولكن لأنك رأيت هذا الأمر في الكود السابق أصبح لديك المعرفة أن الكائن Math يمكن أن يستعمل في توليد أرقام عشوائية، وعليك أن تحاول بتطبيق أفكار بسيطة تستخدم فيها الكائن Math لكي يصبح لديك أيضًا "خبرة" في هذا الكائن بشكل عام وليس مجرد معلومة بأنه يستخدم في توليد أرقام عشوائية.

شخصيًا كنت أواجهة مشكلة في إستخدام لغة JavaScript في تعديل كائنات DOM (عناصر الصفحة)، وكلما أردت أن أقوم بتنفيذ فكرة ما لا أعرف من أين أبدأ ولكن مع الوقت ومع تنفيذ أفكار بسيطة واحدًا تلو الآخر أصبجت أكتسب خبرة -ولو بسيطة- من كل مشروع JavaScript أقوم به. وفي الكثير من الأحيان عندما أفشل في معرفة كيفية تنفيذ فكرة معينة أقوم بالبحث عن حلول من خلال سؤال آخرين أو البحث عن مكتبات تساعدني .. إلخ، ومع مرور الوقت أصبحت أستطيع تنفيذ أفكار أكثر تقدمًا وحل مشاكل أكثر صعوبة.

لدي بعض النصائح التي قد يساعدك تطبيقها كثيرًا:

• حاول أن تتعمق في الأكواد التي تعرفها، فعلى سبيل المثال حاول أن تتعمق في كيفية إستخدام الكائن Math لأنك أستخدمته في مشروعك وكذلك الأمر بالنسبة querySelectorAll و التابع forEach و setAttribute وحاول البحث عن توابع أخرى مشابهة وستجد توابع مثل hasAttribute و getAttribute و removeAttribute .. إلخ، أي إن أستخدمت تابع أو كائن جديد فحاول الإطلاع على كل تفاصيله وكذلك الكائنات أو التوابع الأخرى له، وسوف يساعدك إستخدام موسوعة حسوب كثيرًا في هذا الأمر.
• أقرأ كثيرًا، تحتوي الأكاديمية على مئات المقالات في البرمجة بشكل عام وفي تقنيات الويب مثل JavaScript بشكل خاص، فستجد أكثر من 330 (وقت كتابة هذه الإجابة) خاصة بلغة JavaScript فقط وسوف تستفيد كثيرًا من قراءة المقالات.
• حاول تنفيذ مشاريع كثيرة، وأنت بالفعل تقوم بهذه الخطوة، لذلك أحسنت العمل أنت في الطريق الصحيح.
• بعدما تشعر أنك أصبحت متمكنًا من اللغة وتستطيع تطبيق أغلب الأفكار التي لديك بسهولة، حاول أن تقرأ الكود المصدري للمكتبات التي تستعملها مثل lightbox على سبيل المثال، لترى كيف يتم كتابة أكواد إحترافية وكيف يتم تنظيمهما.

بتاريخ On 10/11/2021 at 01:55 قال سامح أشرف:

بالتأكيد قد تجد صعوبات في تنفيذ الأفكار أو حل المشاكل بشكل عام، وذلك لأنك تحاول أن تكتسب الخبرة مع الوقت ومع حل كل مشكلة، فعلى سبيل المثال: ربما لا تعرف كيفية توليد أرقام عشوائية في JavaScript ولكن لأنك رأيت هذا الأمر في الكود السابق أصبح لديك المعرفة أن الكائن Math يمكن أن يستعمل في توليد أرقام عشوائية، وعليك أن تحاول بتطبيق أفكار بسيطة تستخدم فيها الكائن Math لكي يصبح لديك أيضًا "خبرة" في هذا الكائن بشكل عام وليس مجرد معلومة بأنه يستخدم في توليد أرقام عشوائية.

شخصيًا كنت أواجهة مشكلة في إستخدام لغة JavaScript في تعديل كائنات DOM (عناصر الصفحة)، وكلما أردت أن أقوم بتنفيذ فكرة ما لا أعرف من أين أبدأ ولكن مع الوقت ومع تنفيذ أفكار بسيطة واحدًا تلو الآخر أصبجت أكتسب خبرة -ولو بسيطة- من كل مشروع JavaScript أقوم به. وفي الكثير من الأحيان عندما أفشل في معرفة كيفية تنفيذ فكرة معينة أقوم بالبحث عن حلول من خلال سؤال آخرين أو البحث عن مكتبات تساعدني .. إلخ، ومع مرور الوقت أصبحت أستطيع تنفيذ أفكار أكثر تقدمًا وحل مشاكل أكثر صعوبة.

لدي بعض النصائح التي قد يساعدك تطبيقها كثيرًا:

• حاول أن تتعمق في الأكواد التي تعرفها، فعلى سبيل المثال حاول أن تتعمق في كيفية إستخدام الكائن Math لأنك أستخدمته في مشروعك وكذلك الأمر بالنسبة querySelectorAll و التابع forEach و setAttribute وحاول البحث عن توابع أخرى مشابهة وستجد توابع مثل hasAttribute و getAttribute و removeAttribute .. إلخ، أي إن أستخدمت تابع أو كائن جديد فحاول الإطلاع على كل تفاصيله وكذلك الكائنات أو التوابع الأخرى له، وسوف يساعدك إستخدام موسوعة حسوب كثيرًا في هذا الأمر.
• أقرأ كثيرًا، تحتوي الأكاديمية على مئات المقالات في البرمجة بشكل عام وفي تقنيات الويب مثل JavaScript بشكل خاص، فستجد أكثر من 330 (وقت كتابة هذه الإجابة) خاصة بلغة JavaScript فقط وسوف تستفيد كثيرًا من قراءة المقالات.
• حاول تنفيذ مشاريع كثيرة، وأنت بالفعل تقوم بهذه الخطوة، لذلك أحسنت العمل أنت في الطريق الصحيح.
• بعدما تشعر أنك أصبحت متمكنًا من اللغة وتستطيع تطبيق أغلب الأفكار التي لديك بسهولة، حاول أن تقرأ الكود المصدري للمكتبات التي تستعملها مثل lightbox على سبيل المثال، لترى كيف يتم كتابة أكواد إحترافية وكيف يتم تنظيمهما.

أشكرك جداً على هذه النصائح الرائعة .. بالتأكيد سأحاول تخصيص وقت مناسب للقيام بهذه الأمور .. 

هل يمكن في هذا الجزء أنه عند الضغط على الصور السفلية .. تظهر الصورة الكبيرة في مكانها بالأعلى ..

ثم عند الضغط على هذه الصورة الكبيرة تقوم بفتح الـ Lightbox ليتم التقليب بين الـ 3 صور ..

لأن السيناريو الحالي أن الـ Lightbox يفتح عند الضغط على الصور السفلية وبالتالي لن يعمل التقليب ..

هل يمكنك مساعدتي في هذا الأمر ؟ .. لا أريد أن أثقل عليك بالتأكيد .. ولكنها أفكار تأتيني أثناء التعلم والتنفيذ ..

أشكرك جداً .. وأقدر وقتك الكريم .. وجهدك الوافر .

بتاريخ 3 ساعات قال محمد محمد مجدي:

أشكرك جداً على هذه النصائح الرائعة .. بالتأكيد سأحاول تخصيص وقت مناسب للقيام بهذه الأمور .. 

هل يمكن في هذا الجزء أنه عند الضغط على الصور السفلية .. تظهر الصورة الكبيرة في مكانها بالأعلى ..

ثم عند الضغط على هذه الصورة الكبيرة تقوم بفتح الـ Lightbox ليتم التقليب بين الـ 3 صور ..

لأن السيناريو الحالي أن الـ Lightbox يفتح عند الضغط على الصور السفلية وبالتالي لن يعمل التقليب ..

هل يمكنك مساعدتي في هذا الأمر ؟ .. لا أريد أن أثقل عليك بالتأكيد .. ولكنها أفكار تأتيني أثناء التعلم والتنفيذ ..

أشكرك جداً .. وأقدر وقتك الكريم .. وجهدك الوافر .

يمكنك أن تضيف حدث onclick على الصور الصغيرة ليقوم بأخذ مسار الصورة التي تم الضغط عليها، ويبدلها بمسار الصورة الكبيرة، وبالتالي عند الضغط على أس صورة صغيرة سوف تظهر مكان الصورة الكبيرة. ثم تضيف حدث onclick على الصورة الكبيرة أيضًا ليتم فتح الـ Lightbox عند الضغط عليها وذلك من خلال تحديد أي صورة صغيرة وإستدعاء التابع click عليها، وهنا مثال:

var img = document.querySelector('img.my-image')
img.click()

حاول أن تقوم بعمل بحث عن التابع click لتعلم المزيد عنه، ولتتدرب على تنفيذ أفكار أكثر تعقيدًا.