مساعدة في ضبط معرض صور عن طريق html , css , js

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

عند التنقل بين الصور في المنتج الثاني .. فإن التنقل يحدث في المنتج الأول ..

لحل هذا المشكل قمت بدل البحث عن الصورة التي تم الضغط عليها عن طريق الشريحة النشطة بتمرير كائن الصورة التي تم الضغط عليها في الدالة currentSlide كمعامل ثانٍ:

<div class="Slides">
    <img src="./img/1.png" onclick="openModal();currentSlide(1 ,this)"  alt="img-1">
</div>

حيث يشير this إلى الصورة التي هي العنصر نفسه (يجب تعميم هذا في كامل العناصر). 

ستقوم الدالة currentSlide بإلتقاط هاته الصورة، ثم حذف الصنف active عن كامل الصور وتطبيقها على هذا العنصر:

function currentSlide(n ,activeImg) {
  showSlides(slideIndex = n);
  
  var imgs = document.getElementsByClassName("demo");
  
  for(i=0; i < imgs.length ;i++){
    imgs[i].classList.remove('active');
  }

  activeImg.classList.add('active');
}

سيمكن بهذا التخلص من هاته الأسطر:

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("Slides");
  //var dots = document.getElementsByClassName("demo"); هذا

  if (n > slides.length) {slideIndex = 1}
  
  if (n < 1) { 
    slideIndex = slides.length
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  /* for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  } هذا */

  slides[slideIndex-1].style.display = "block";
  // dots[slideIndex-1].className += " active"; هذا 
}

سيجعلك هذا تتجاوز المشكلة الثانية وستحتاج فقط إعطاء الصنف active للصورة النشطة يدويا كإعداد إفتراضي. 

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

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

لم أستطع إلتماس هاته المشكلة، هل يمكنك توضيحها أكثر؟

بتاريخ 3 دقائق مضت قال Adnane Kadri:

لحل هذا المشكل قمت بدل البحث عن الصورة التي تم الضغط عليها عن طريق الشريحة النشطة بتمرير كائن الصورة التي تم الضغط عليها في الدالة currentSlide كمعامل ثانٍ:

<div class="Slides">
    <img src="./img/1.png" onclick="openModal();currentSlide(1 ,this)"  alt="img-1">
</div>

حيث يشير this إلى الصورة التي العنصر نفسه (يجب تعميم هذا في كامل العناصر). 

ستقوم الدالة currentSlide بإلتقاط هاته الصورة، ثم حذف الصنف active عن كامل الصور وتطبيقها على هذا العنصر:

function currentSlide(n ,activeImg) {
  showSlides(slideIndex = n);
  
  var imgs = document.getElementsByClassName("demo");
  
  for(i=0; i < imgs.length ;i++){
    imgs[i].classList.remove('active');
  }

  activeImg.classList.add('active');
}

سيمكن بهذا التخلص من هاته الأسطر:

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("Slides");
  //var dots = document.getElementsByClassName("demo"); هذا

  if (n > slides.length) {slideIndex = 1}
  
  if (n < 1) { 
    slideIndex = slides.length
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  /* for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  } هذا */

  slides[slideIndex-1].style.display = "block";
  // dots[slideIndex-1].className += " active"; هذا 
}

سيجعلك هذا تتجاوز المشكلة الثانية وستحتاج فقط إعطاء الصنف active للصورة النشطة يدويا كإعداد إفتراضي. 

لم أستطع إلتماس هاته المشكلة، هل يمكنك توضيحها أكثر؟

أشكرك للمساعدة أستاذي العزيز .. سأقرأ ما تفضلت حضرتك بتوضيحه بتركيز .. وسأرد عليه بعد فهمه الآن بإذن الله ..

أردت أن أرد على سؤال حضرتك :

بتاريخ 5 دقائق مضت قال Adnane Kadri:

لم أستطع إلتماس هاته المشكلة، هل يمكنك توضيحها أكثر؟

أقصد في هذه الصورة :

https://prnt.sc/203lfla

لو لاحظت حضرتك في ملف html ستجد أنني كررت كود المنتج مرتين ..

ومن المفترض أن تظهر الصورة الكبيرة ثم يليها الـ 3 صورة الصغيرة لأول منتج ..

ثم تظهر الصورة الكبيرة ثم تليلها الـ 3 صور الصغيرة لثاني منتج ..

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

هل الأمر واضح لحضرتك الآن أم تحتاج توضيح أكثر ؟ 

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

أشكرك للمساعدة أستاذي العزيز .. سأقرأ ما تفضلت حضرتك بتوضيحه بتركيز .. وسأرد عليه بعد فهمه الآن بإذن الله ..

أردت أن أرد على سؤال حضرتك :

أقصد في هذه الصورة :

https://prnt.sc/203lfla

لو لاحظت حضرتك في ملف html ستجد أنني كررت كود المنتج مرتين ..

ومن المفترض أن تظهر الصورة الكبيرة ثم يليها الـ 3 صورة الصغيرة لأول منتج ..

ثم تظهر الصورة الكبيرة ثم تليلها الـ 3 صور الصغيرة لثاني منتج ..

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

هل الأمر واضح لحضرتك الآن أم تحتاج توضيح أكثر ؟ 

هل تقصد أن لديك صفين من المنتجات؟ 

الصف الأول الحاوي للمنتج الأول وثلاث صور مصغرة يتم التحكم  عن طريقها في الصورة المعروضة من الصف الأول ، ثم الصف الثاني الحاوي للمنتج الثاني وثلاث صور مصغرة أخى يتم التحكم عن طريقها في الصورة المعروضة من الصف الثاني ؟

بتاريخ 9 دقائق مضت قال Adnane Kadri:

هل تقصد أن لديك صفين من المنتجات؟ 

الصف الأول الحاوي للمنتج الأول وثلاث صور مصغرة يتم التحكم  عن طريقها في الصورة المعروضة من الصف الأول ، ثم الصف الثاني الحاوي للمنتج الثاني وثلاث صور مصغرة أخى يتم التحكم عن طريقها في الصورة المعروضة من الصف الثاني ؟

بالظبط .. كأن لدي صفين .. وكل صف به منتج .. وكل منتج له الصورة الكبيرة والـ 3 صور المصغرة الخاصة به ..

وهذا ما قمت به من خلال ملف الـ html المرفق .. حيث كررت الكود مرتين .. 

المرة الأولى تبدأ من السطر رقم 12 .. والمرة الثانية تبدأ من السطر رقم 66 وكلاهما يبدأ بـ :

        <div class="component-content">

هل واضح الأمر أكثر الآن ؟

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

بالظبط .. كأن لدي صفين .. وكل صف به منتج .. وكل منتج له الصورة الكبيرة والـ 3 صور المصغرة الخاصة به ..

وهذا ما قمت به من خلال ملف الـ html المرفق .. حيث كررت الكود مرتين .. 

المرة الأولى تبدأ من السطر رقم 12 .. والمرة الثانية تبدأ من السطر رقم 66 وكلاهما يبدأ بـ :

        <div class="component-content">

 

لاحظ أنك على مستوى الجافاسكربت لا تقوم بالتفريق أصلا بين محتويات المنتج الأول ومحتويات المنتج الثاني ، فكامل الصور ذات الصنف demo تشير إلى صور المنتج الأول ولا يتم أبدا اعتبار المنتج الثاني. 

لماذا يحدث هذا؟

لأنك تقوم بعرض المنتج بناء على ترتيبه في شجرة العناصر الحاوية للصنف Slides في الدالة showSlides:

var slides = document.getElementsByClassName("Slides");

ولو قمت بتتبع فهرس الشريحة النشطة slideIndex عن طريق طباعته في الـ console فستجد أنه دوما يأخذ القيم 1,2,3 . وبالتالي فإن عناصر الصور الكبيرة التي سيتم تحديدها هي دوما العناصر الثلاث الأولى التي تحمل الصنف Slides .

ولن يتم اعتبار ما إن كانت من الصف الأول أو الثاني ، أو إن كانت تخص المنتج الأول أو الثاني. 

ما الحل؟ 

أظن أن الحل بتعديلات بسيطة هو في تــمــييــز الصور المصغرة للمنتج الأول عن الصور المصغرة للمنتج الثاني وبالتالي فإن عرض صورة كبيرة عن طريق صورة صغيرة في المنتج الأول لن تتداخل مع الصورة الكبيرة للمنتج الثاني وهكذا. 

إذا كيف نخبر الجافاسكربت أننا في الصف الأول أو الثاني؟

لعمل ذلك قمت بالتصفح في شجرة الوثيقة والبحث عن الأب component-content لأن الذي يميز المنتج الأول والثاني هو أن كل واحد منهما في حاوٍ مختلف :

<!-- ////////////////////// first product -->
<div class="component-content">
  العناصر التي يتم ضغطها من هذا الحاوي تشير إلى الحاوي الأب هذا 
</div>


<!-- ////////////////////// second product -->
<div class="component-content">
  العناصر التي يتم ضغطها من هذا الحاوي تشير إلى الحاوي الأب هذا 
</div>

وذلك عن طريق التصفح في شجرة الاباء إنطلاقا من العنصر الذي تم الضغط عليه:

function currentSlide(n ,activeImg) {
  var parentContainer = activeImg.parentNode
                                 .parentNode
                                 .parentNode
                                 .parentNode;
  /*
  <div class="component-content"> الأب الرابع 
            <div class="component-container-img"> الأب الثالث 
               <div class="slider-component"> الأب الثاني
                    <div class="Slides">  الأب الأول
                        <img src="./img/1.png" onclick="openModal();currentSlide(1 ,this)"  alt="img-1">
  */

  showSlides(slideIndex = n ,parentContainer);

حيث أن عند الضغط على صورة مصغرة :

• يتم إلتقاط الصورة المضغوطة عن طريق الدالة currentSlide .
• تخزين الأب الحاوي لها في متغير . 

لاحظ أيضا أني قمت بتمرير هذا المتغير إلى الدالة showSlides التي ستستعمله في عدم الخلط بين المنتج الأول والثاني: 

function showSlides(n ,parentContainer) {
  var i;
  
  /* المنتمية للحاوي الذي نقوم بتحديده لها فقط Slides تحديد العناصر ذات الصنف  */
  /* وكأننا نخبر الجافاسكربت ألا تخلط بين الحاويين */
  var slides = parentContainer.getElementsByClassName("Slides");

سيكون هذا كافيا لعمل عرض الشرائح عند التحريك، 

ولكن ستبقى هنالك خطوة أخرى، هي في تحديد الشريحة النشطة افتراضية، فإستدعاءنا للدالة showSlides هنا غير كافٍ:

var slideIndex = 1;
showSlides(slideIndex);

كونها لا تقوم بتحديد حاو المنتج الذي نقوم بعرض شريحته النشطة، ولذلك لنقم بشكل إفتراضي بعرض :

• الشريحة الأولى من الحاوي الأول .
• الشريحة الثانية من الحاوي الثاني . 

كالتالي: 

var slideIndex = 1;

/*تحديد كامل الحاويات*/
var containers = document.querySelectorAll('.component-content');

/* عرض الشريحة الأولى من الحاو الأول */
showSlides(slideIndex ,containers[0]);

/* عرض الشريحة الأولى من الحاو الثاني */
showSlides(slideIndex ,containers[1]);

فتكون الشيفرة كاملة: 

/** 
 * عرض الشريحة الحالية
 * إزالة الصنف النشط من الصور المصغرة الغير نشطة
 * */ 
function currentSlide(n ,activeImg) {
  // الذي تم من داخله استدعاء الدالة component-content تحديد الأب الرابع : أي العنصر ذي الصنف
  var parentContainer = activeImg.parentNode.parentNode.parentNode.parentNode;
  
  showSlides(slideIndex = n ,parentContainer);
  
  // الصور المصغرة الخاصة بهذا الحاوي فقط
  var imgs = parentContainer.querySelectorAll(".demo");
  
  for(i=0; i < imgs.length ;i++){
    imgs[i].classList.remove('active');
  }

  activeImg.classList.add('active');
}


var containers = document.querySelectorAll('.component-content');

showSlides(slideIndex ,containers[0]);
showSlides(slideIndex ,containers[1]);

function showSlides(n ,parentContainer) {
  var i;
  
  // نحتاج تحديد الصور الكبيرة الخاصة بهذا المنتج فقط 
  var slides = parentContainer.getElementsByClassName("Slides");
  
  ... 
  إلى اخر الشيفرة

سيكون هذا كفيلا بحل المشكلتين معا لديك، تأكد فقط من تعميم هذا التعديل بإضافة this على كامل العناصر المشابهة: 

<div class="Slides">
    <img src="./img/1.png" onclick="openModal();currentSlide(1 ,this)"  alt="img-1">
</div>