цикл jQuery: вертикальное выравнивание изображения внутри li

Question

В основном я использую цикл jQuery для изображения баннера, в котором у меня есть изображения, которые представляют собой массив размеров. Я пытаюсь получить изображения, чтобы вертикально выровнять центральную высоту LI. Теперь у меня есть что-то, что грубо работает, но плохо.

Вы можете просматривать мои разработки здесь:

http://jsfiddle.net/X4GQC/

Мой HTML:

<div id="slider"> 
    <ul class="slidah"> 
     <li><img src="img/slide1.jpg" alt=""></li> 
     <li><img src="img/slide1.jpg" alt=""></li> 
     <li><img src="img/slide1.jpg" alt=""></li> 
     <li><img src="img/slide1.jpg" alt=""></li> 
    </ul> 
</div> 

Мой JQuery:

(function ($) { 
    $.fn.vAlign = function(fn) { 

     return this.each(

      function(i){ 

       var ah = $(this).height(); 
       var ph = $(this).parent().height(); 
       var mh = Math.ceil((ph-ah)/2); 
       $(this).css('margin-top', mh); 
      }); 
    }; 
})(jQuery); 

$('.slidah').cycle({ 
    after: function(){ 
     $(".slidah li img").vAlign(); 
    } 
}); 

Мой CSS:

#slider{ 
    width: 100%; 
    height: 200px; 
    overflow: hidden; 
} 

.slidah{ 
    width: 100%; 
    height: 200px; 
} 

.slidah li{ 
    width: 100%; 
    height: 200px; 
} 

Теперь, как вы можете видеть, вертикальная функция Align делает работу, но это срабатывает после того, как цикл происходит. Я пробовал before, но это не сработало. Мне нужен способ перезапустить событие в то же время, когда цикл может произойти?

Answer 1

Я верю из-за того, что делает jquery .cycle(), вы всегда будете получать неуловимые результаты, атакуя проблему таким образом. моя первая мысль состоит в том, чтобы выполнить вычисления для всех элементов списка в документе jquery ready и установить каждую из своих вершин сразу после загрузки DOM. поэтому пытается решить эту проблему с помощью начального CSS, а не полагаться на вызов функции в/перед/или в качестве обратного вызова каждого вызова jquery .cycle.

Этот подход должен давать более стабильные результаты. плохо посмотрите, могу ли я получить скрипку в нескольких.

EDIT: вот ваш модифицированный jquery working for me in a fiddle here без каких-либо сбоев или других проблем, таких как пример, который вы предоставили. пользуются

(function ($) { 
    $.fn.vAlign = function(fn) { 

     return this.each(

      function(i){ 

       var ah = $(this).height(); 
       var ph = $(this).parent().height(); 
       var mh = Math.ceil((ph-ah)/2); 
       $(this).css('margin-top', mh); 
      }); 
    }; 
})(jQuery); 


$(document).ready(function(){ 
    $(".slidah li img").vAlign(); 
}); 

$('.slidah').cycle({});