محمد مجدي19

بالظبط .. كأن لدي صفين .. وكل صف به منتج .. وكل منتج له الصورة الكبيرة والـ 3 صور المصغرة الخاصة به .. وهذا ما قمت به من خلال ملف الـ html المرفق .. حيث كررت الكود مرتين .. المرة الأولى تبدأ من السطر رقم 12 .. والمرة الثانية تبدأ من السطر رقم 66 وكلاهما يبدأ بـ : <div class="component-content"> هل واضح الأمر أكثر الآن ؟

أشكرك للمساعدة أستاذي العزيز .. سأقرأ ما تفضلت حضرتك بتوضيحه بتركيز .. وسأرد عليه بعد فهمه الآن بإذن الله .. أردت أن أرد على سؤال حضرتك : أقصد في هذه الصورة : https://prnt.sc/203lfla لو لاحظت حضرتك في ملف html ستجد أنني كررت كود المنتج مرتين .. ومن المفترض أن تظهر الصورة الكبيرة ثم يليها الـ 3 صورة الصغيرة لأول منتج .. ثم تظهر الصورة الكبيرة ثم تليلها الـ 3 صور الصغيرة لثاني منتج .. ولكن المشكلة أنه عند تكرار المنتج في الصفحة .. تظهر الصورة الكبيرة فقط لأول منتج .. هل الأمر واضح لحضرتك الآن أم تحتاج توضيح أكثر ؟

السلام عليكم .. الفكرة أنني كنت أقوم بعمل Gallery للمنتجات من خلال html , css , js مثلما يظهر في الصورة . طبعاً لم أقم بضبط الـتنسيق الخاص بها .. الفكرة أنني عند تكرار المنتج تختفي الصورة الكبيرة . وكذلك عند التنقل بين الصور في المنتج الثاني .. فإن التنقل يحدث في المنتج الأول .. كنت قد قمت من قبل بتجربة الفكرة من خلال مكتبة Lightbox ولم أنجح .. فكنت أجرب الأمر بطريقة أخرى .. قمت بإرفاق الملفات .. خالص الشكر . Learn.zip

أشكرك جداً على هذه النصائح الرائعة .. بالتأكيد سأحاول تخصيص وقت مناسب للقيام بهذه الأمور .. هل يمكن في هذا الجزء أنه عند الضغط على الصور السفلية .. تظهر الصورة الكبيرة في مكانها بالأعلى .. ثم عند الضغط على هذه الصورة الكبيرة تقوم بفتح الـ Lightbox ليتم التقليب بين الـ 3 صور .. لأن السيناريو الحالي أن الـ Lightbox يفتح عند الضغط على الصور السفلية وبالتالي لن يعمل التقليب .. هل يمكنك مساعدتي في هذا الأمر ؟ .. لا أريد أن أثقل عليك بالتأكيد .. ولكنها أفكار تأتيني أثناء التعلم والتنفيذ .. أشكرك جداً .. وأقدر وقتك الكريم .. وجهدك الوافر .

بالظبط أستاذي .. هذا ما كنت أبحث عنه .. وهو بالفعل حل المشكلة .. لدي سؤال من فضلك .. أدرس الآن دورة تطوير واجهات المستخدم .. وهذه الفكرة التي نفذتها حضرتك تماماً خطرت ببالي .. ولكني لم أكن أعرف كيف أنفذها برمجياً .. هل هذا طبيعي في هذه المرحلة ؟ .. وبماذا تنصحني ؟ .. خالص الشكر .. وآسف على الإطالة .

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

أستاذي العزيز .. لاحظت أنه عند تكرار المنتج .. يظهر لي 6 صور في الـ lightbox عند فتح صور أي منتج .. فالمنتج الأول له 3 صور سفلية .. والمنتج الثاني له 3 صور سفلية أخرى .. هل يمكنني جعل المنتج يعرض الـ 3 صور الخاصة به فقط ؟ .. بصراحة جربت العديد من الطرق ولكني لم أنجح في الوصول .. تم إرفاق المثال لحضرتك .. ولحضرتك خالص الشكر . HomePage.zip

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

بالفعل أستاذي .. لقد أخطأت دون قصد ووضعت الخاصية ضمن عنصر a .. أشكرك على التوضيح .. أصبح الآن الـ Lightbox يعمل معي .. ولكني ألاحظ عدم ظهور الأسهم للتقليب بين الصور وكذلك علامة x للإغلاق .. رغم أنني قمت بالفعل بوضع الملفات الخاصة بهم ضمن img وهو المجلد الخاص بالصور .. فما المشكلة من فضلك ؟

السلام عليكم ورحمة الله وبركاته .. أريد فتح بعض الصور باستخدام lightbox وقمت باستخدام lightbox Jquery plugin ولكن لا تعمل معي .. هذا رابط الـ plugin المستخدم : https://lokeshdhakar.com/projects/lightbox2/ تم إرفاق الملفات الخاصة بالصفحة ليكون الأمر أكثر وضوحاً . شكراً جداً . Home.zip

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

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

السلام عليكم ورحمة الله وبركاته .. عندي مشكلة تظهر في هذه الصورة : " https://prnt.sc/1ybr0jc " الفكرة التي أريد القيام بها هو أنه عند الضغط على أي صورة من الـ 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') } } })