أحتاج مساعدة في JS لعرض Gallery منتجات

محمد مجدي19 · 4 نوفمبر 2021

السلام عليكم ورحمة الله وبركاته ..

عندي مشكلة تظهر في هذه الصورة :

"

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

وإذا تم الضغط على أيقونة العدسة في الأعلى يتم فتح الصورة في Tab جديدة ..

لكن المشكلة التي أواجهها أنه إذا قمت بالضغط على صورة صغيرة في المنتج الثاني فإنها تظهر كبيرة ولكن في مكان الصورة الكبيرة في المنتج الأول ..

هذا كود الـ js المستخدم :

$('.show-small-img:first-of-type').css({'border':'solid 1px #0A2F8C','padding':'5px', 'transition':'.3s'}).siblings().css({'border':'1px solid #DDD','padding':'5px'})

$('.show-small-img:first-of-type').attr('alt','now').siblings().removeAttr('alt')

$('.show-small-img').click(function () {

  $('#show-img').attr('src', $(this).attr('src'));  $('#show-tab').attr('href', $(this).attr('src'));

  $('#big-img').attr('src', $(this).attr('src'))

  $(this).attr('alt','now').siblings().removeAttr('alt')

  $(this).css({'border':'solid 1px #0A2F8C','padding':'5px', 'transition':'.3s'}).siblings().css({'border':'1px solid #DDD','padding':'5px'})

  if ($('#small-img-roll').children().length > 4) {

    if ($(this).index() >= 3 && $(this).index() < $('#small-img-roll').children().length - 1){

      $('#small-img-roll').css('left', -($(this).index() - 2) * 76 +'px')

    }else if ($(this).index() == $('#small-img-roll').children().length - 1) {

      $('#small-img-roll').css('left', -($('#small-img-roll').children().length - 4) * 76 +'px')

    }else {

      $('#small-img-roll').css('left','0')

    }

  }

})




$('#next-img').click(function (){

  $('#show-img').attr('src', $(".show-small-img[alt='now']").next().attr('src'))

  $('#big-img').attr('src', $(".show-small-img[alt='now']").next().attr('src'))

  $(".show-small-img[alt='now']").next().css({'border':'solid 1px #0A2F8C','padding':'5px', 'transition':'.3s'}).siblings().css({'border':'1px solid #DDD','padding':'5px'})

  $(".show-small-img[alt='now']").next().attr('alt','now').siblings().removeAttr('alt')

  if ($('#small-img-roll').children().length > 4) {

    if ($(".show-small-img[alt='now']").index() >= 3 && $(".show-small-img[alt='now']").index() < $('#small-img-roll').children().length - 1){

      $('#small-img-roll').css('left', -($(".show-small-img[alt='now']").index() - 2) * 76 +'px')

    }else if ($(".show-small-img[alt='now']").index() == $('#small-img-roll').children().length - 1) {

      $('#small-img-roll').css('left', -($('#small-img-roll').children().length - 4) * 76 +'px')

    }else {

      $('#small-img-roll').css('left','0')
    }
  }
})
 

$('#prev-img').click(function (){

  $('#show-img').attr('src', $(".show-small-img[alt='now']").prev().attr('src'))

  $('#big-img').attr('src', $(".show-small-img[alt='now']").prev().attr('src'))

  $(".show-small-img[alt='now']").prev().css({'border':'solid 1px #0A2F8C','padding':'5px', 'transition':'.3s'}).siblings().css({'border':'1px solid #DDD','padding':'5px'})

  $(".show-small-img[alt='now']").prev().attr('alt','now').siblings().removeAttr('alt')

  if ($('#small-img-roll').children().length > 4) {

    if ($(".show-small-img[alt='now']").index() >= 3 && $(".show-small-img[alt='now']").index() < $('#small-img-roll').children().length - 1){

      $('#small-img-roll').css('left', -($(".show-small-img[alt='now']").index() - 2) * 76 +'px')

    }else if ($(".show-small-img[alt='now']").index() == $('#small-img-roll').children().length - 1) {

      $('#small-img-roll').css('left', -($('#small-img-roll').children().length - 4) * 76 +'px')

    }else {

      $('#small-img-roll').css('left','0')
    }
  }
})

سامح أشرف · 4 نوفمبر 2021

هل يًمكنك أن ترفق كود HTML كذلك؟ لأن كود JavaScript وحده لا يساعد على فهم سبب المشكلة.

محمد مجدي19 · 4 نوفمبر 2021

بتاريخ الآن قال سامح أشرف:

هل يًمكنك أن ترفق كود HTML كذلك؟ لأن كود JavaScript وحده لا يساعد على فهم سبب المشكلة.

بالتأكيد أستاذي .. أعتذر عن ذلك .. قمت بإرفاق ملف html .

index.html

سامح أشرف · 4 نوفمبر 2021

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

بالتأكيد أستاذي .. أعتذر عن ذلك .. قمت بإرفاق ملف html .

index.html

قُمت بتجربة الكود وهو يقوم بتبديل الصور عند الضغط عليهم بدون مشكلة.

لكن لاحظ أن ملف HTML الخاص بك لا يحتوي على العديد من العناصر التي يتم تعديلها في كود JavaScript، فعلى سبيل المثال لا يوجد عنصر له المعرف #show-tab أو #big-img أو #next-img أو #prev-img وقد يكون هذا سبب المشكلة لديك.

محمد مجدي19 · 4 نوفمبر 2021

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

قُمت بتجربة الكود وهو يقوم بتبديل الصور عند الضغط عليهم بدون مشكلة.

لكن لاحظ أن ملف HTML الخاص بك لا يحتوي على العديد من العناصر التي يتم تعديلها في كود JavaScript، فعلى سبيل المثال لا يوجد عنصر له المعرف #show-tab أو #big-img أو #next-img أو #prev-img وقد يكون هذا سبب المشكلة لديك.

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

هل يمكن أن تقوم حضرتك بنسخ كود المنتج مرة أخرى ليكون هناك منتجان في الصفحة مثل الصورة والتجربة ؟ .

سامح أشرف · 4 نوفمبر 2021

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

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

هل يمكن أن تقوم حضرتك بنسخ كود المنتج مرة أخرى ليكون هناك منتجان في الصفحة مثل الصورة والتجربة ؟ .

لا يُمكن أن تحتوي الصفحة على أكثر من منتج لان الصورة يتم تحديدها من خلال id ، ولا يمكن أن تحتوي الصفحة على أكثر من عنصر لهم نفس الـ id، لذلك يتم تجديد أول عنصر لديه المعرف #show-img في الصفحة، ولحل المشكلة يجب إستخدام الأصناف classes بدلًا المعرفات IDs ، كالتالي:

<div class="content-first">
    <div class="show">
      
        <!-- تم إستخدام class .show-img بدلًا من #show-img -->
        <img src="img/1.png" class="show-img">
      
        <a href="#" class="zoom-image">
            <i class="fas fa-search-plus"></i>
        </a>
    </div>
    <div class="small-img">
        <div class="small-container">
            <div id="small-img-roll">
                <img src="img/1.png" class="show-small-img" alt="">
                <img src="img/2.png" class="show-small-img" alt="">
                <img src="img/3.png" class="show-small-img" alt="">
            </div>
        </div>
    </div>
</div>

أيضًا في كود JavaScript يجب تحديد العنصر .show-img الخاص بالمنتج وليس أي عنصر لديه الصنف show-img كالتالي:


$('.show-small-img').click(function() {

    // لاحظ كيف تم تحديد العنصر .show-img من خلال الأب
    $(this).parents('.content-first').children('.show').children('.show-img')
        .attr('src', $(this).attr('src'));

	// ...

})

بهذه الطريقة سوف يتم تحديد العنصر show-img الخاص بالمنتج وليس أول عنصر في الصفحة لديه الصنف .show-img

أحتاج مساعدة في JS لعرض Gallery منتجات

السؤال

محمد مجدي19

5 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

محمد مجدي19

سامح أشرف

محمد مجدي19

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية