ميزة توسيع/عقد النظائر

Question

أنا أعمل على نظير - وأريد أن أقترب من مثال ماكدونالد مع توسيع الجزء وفتحه.

http://www.mcdonalds.de/produkte/alle-produkte

http://jsfiddle.net/9zX6z/1/

لدي فصل يحدد الارتفاع/العرض

$(".element-item").on("click", function() {
                that.highlightBlock($(this));

                $("#filter").click();
            });

Answer 1

لقد أتقنت الأساسيات بالفعل - تحديد العرض والارتفاع لعنصر النظائر "الموسع"/"المفتوح" عبر فئة CSS open

<li class="product open">

ثم قم بتشغيل النظائر إعادة التخطيط-طريقة.

يتم تنفيذ تكبير صورة المنتج عبر انتقالات CSS اعتمادًا على وجود الفئة المذكورة:

.product-image {
    width: 148px;
    height: 148px;
    transition: all 0.4s ease-in-out;
}

.product.open .product-image {
    width: 308px;
    height: 308px;
}

لكن مجرد تضخيم أبعاد الصورة المصغرة لن يبدو لطيفًا جدًا: قبل إضافة open إلى عنصر النظائر، وبالتالي نقوم باستبدال الصورة المصغرة src- سمة مع عنوان URL لنسخة أكبر من صورة المنتج.يتم تخزين هذا الأخير في data-src-large- سمة الصورة:

<img class="product-image" data-src-large="product_preview.png" src="product_thumbnail.png" data-src-standard="product_thumbnail.png">

يضيف التنفيذ على صفحة منتج McDonalds أيضًا فئة CSS item-open إلى الحاوية الأصلية التي تحتوي على عناصر النظائر:

<ul id="isotope" class="isotope item-open">
    <li class="product open"> ...
    <li class="product"> ...
    ...

واستنادا إلى هذه الفئة، فإن عتامة جميع العناصر النظائرية التي تفعل ذلك لا لديك open يتم تقليل الفئة المخصصة مرة أخرى عبر CSS:

.item-open .product {
    opacity: 0.15;
}

.item-open .product.open {
    opacity: 1;
}

يمكنك رؤية CodePens ملائمًا لمقتطفات التعليمات البرمجية أعلاه هنا: http://codepen.io/fk/pen/dGAzl/ (باستخدام النظائر v1) و http://codepen.io/fk/pen/ohLvF/ (باستخدام Isotope v2) - كلاهما صعب بعض الشيء حول الحواف، ولكنهما يعملان في أحدث إصدار من Chrome.

يرجى ملاحظة أنني استخدمت spin.js لعرض مؤشر التحميل، وقمت بتغيير طفيف في أسماء فئات CSS واستبعدت مجموعة من العلامات وبادئات البائعين والمرشحات الخاصة بـ IE بدلاً من صفحة منتج McDonalds الأصلية لتسهيل الأمور قليلاً فهم (نأمل؛)) - كل شيء آخر هو نسخة 1:1 تقريبًا.

لاحظ أيضًا أن المكوّن الإضافي imageLoaded الذي يأتي المجمعة مع النظائر v1 يحتوي على مشاكل وربما سيكون من الأفضل لك استخدام التيار نسخة مستقلة من البرنامج المساعد إذا كنت تريد استخدامه لتحديد متى يتم تحميل صورة المنتج عالية الدقة.

يحتوي jsFiddle JavaScript على بعض التعليقات لمساعدتك.
آمل أن يمنحك هذا مع الإجابة هنا بعض المؤشرات حول كيفية المضي قدمًا من مكانك الحالي.