JCarousel Lite - صور مركز أفقيًا ورأسيًا

Question

لدي jcarousel lite الذهاب في دروبال مع صور من مختلف الأحجام/نسب الارتفاع. أنا لا أحصل على الكثير من الحظ في محاولة تركيز الصور رأسياً وأفقياً (أي بالتساوي بالتساوي). يتطلب البرنامج المساعد أن تكون الصور في <ul><li><img ... /></li></ul>. لقد حاولت display:inline-block, marginTop:50% من بين أشياء أخرى ، معظمها فقط تفسد الكاروسيل.

تم نشر الكاروسيل على: http://carillontech.org/drupal/

شكرًا!!

Answer 1

شكرا على التلميحات. إنه نوع من الشرطي ، لكن الحل الأسهل كان للتو تمديد اللوحات المصورة بحيث تكون بنفس الحجم. إذا تغير لون الخلفية على الإطلاق ، فسوف أضطر إلى العودة وتغييره في الصور (نظرًا لأن JPG لا يقوم بالشفافية) ، ولكن على الأقل يعمل بشكل ثابت على كل متصفح (على عكس CSS).

Answer 2

إحدى الطرق التي يمكنك من خلالها القيام بذلك ، نظرًا لأنك تستخدم jQuery بالفعل على الصفحة ، تتمثل في الحصول على ارتفاع الصورة لكل صورة ، وطرح ذلك من ذروة carousel ، وتطبيق هامش أعلى من نصف هذه القيمة إلى الصورة أو إلى الوالد لي.

شيء من هذا القبيل:

$('#carousel img').each(function() {
   marginTop = ($('#carousel').outerHeight(false) - $(this).outerHeight(false)) / 2;
   if(marginTop > 0) {
      $(this).css({'margin-top':marginTop});
   }
});

ستحتاج إلى ضبط #Carousel مع المعرف الفعلي الذي تستخدمه ، ولكن يجب أن يعمل بهذه الطريقة.