Isotope + resize + imageLoaded

Question

Привет, помощники :) Я достиг, чтобы на одном слое Wordpress отображались изображения в сетке фторопласта, но у меня есть проблема при вызове видео в HTML5 (только с тегом :). Проблема в том, что изображения отлично работают с шириной: 50%; высота: авто; и видео загружается в с, но не соответствует макетному макету (он перекрывается с другими изображениями), только когда вы изменяете размер экрана, который он вписывает в сетку. Поэтому я думаю, что я могу решить это, просто добавив плагин .imageLoaded() к изотопному вызову, но я не могу понять, когда мой код jQuery следующий:

Действительно благодарен за все заранее!

$ (функция() {

 var $container = $('#container'), 
     // create a clone that will be used for measuring container width 

      $containerProxy = $container.clone().empty().css({ visibility: 'hidden' }); 
     $checkboxes = $('#filters input'); 


     $container.after($containerProxy); 

     // get the first item to use for measuring columnWidth 
     var $item = $container.find('.item').not('.w2').eq(0); 

     $(window).smartresize(function() { 
      // calculate columnWidth 
      var colWidth = Math.floor($containerProxy.width()/4); 
      // set width of container based on columnWidth 
      $container.css({ 
       width: colWidth * 4 
      }) 
       .isotope({ 
        // other options... 
        // disable automatic resizing when window is resized 
        resizable: false, 
        // set columnWidth option for masonry 
        masonry: { 
         columnWidth: colWidth 
        } 
       }); 
      // trigger smartresize for first time 
     }).smartresize(); 

     $checkboxes.change(function(){ 
      var filters = []; 
      // get checked checkboxes values 
      $checkboxes.filter(':checked').each(function(){ 
       filters.push(this.value); 
      }); 
      // ['.red', '.blue'] -> '.red, .blue' 
      filters = filters.join(', '); 
      $container.isotope({ filter: filters }); 
     }); 



    }); 

Answer 1

Смотрите следующий код:.

$(function(){ 

    var $container = $('#container'), 
    // create a clone that will be used for measuring container width 

     $containerProxy = $container.clone().empty().css({ visibility: 'hidden' }); 
    $checkboxes = $('#filters input'); 


    $container.after($containerProxy); 

    // get the first item to use for measuring columnWidth 
    var $item = $container.find('.item').not('.w2').eq(0); 

    $(window).smartresize(function() { 
     // calculate columnWidth 
     var colWidth = Math.floor($containerProxy.width()/4); 
     // set width of container based on columnWidth 

     $container.imagesLoaded(function(){ //Add Imagesloaded here 


     $container.css({ 
      width: colWidth * 4 
     }) 
      .isotope({ 
       // other options... 
       // disable automatic resizing when window is resized 
       resizable: false, 
       // set columnWidth option for masonry 
       masonry: { 
        columnWidth: colWidth 
       } 
      }); 
     // trigger smartresize for first time 
    }).smartresize(); 

    $checkboxes.change(function(){ 
     var filters = []; 
     // get checked checkboxes values 
     $checkboxes.filter(':checked').each(function(){ 
      filters.push(this.value); 
     }); 
     // ['.red', '.blue'] -> '.red, .blue' 
     filters = filters.join(', '); 
     $container.isotope({ filter: filters }); 
    }); 

    }); //imagesloaded end 

    });